Color Palette
Etched On's primary palette contains fallen, muted colors.
#CDC5C1
#BE7684
#A18BA4
#5E3149
Textual Element Style
Etched On will use two typography types: Josefin Slab and Roboto Condensed. Generally speaking, Josefin Slab will be used for headings and Roboto Condensed will be used for body texts.
CSS selector:
'h1' , 'h2' , 'h3' , 'p' , 'a' , 'ul' , 'li'
Sample code:
<h1>Ready Made Products</h1>
<h2>Cheers Wine Glass</h2>
<h3>Inpire, Express, Craft</h3>
<p>This is a paragraph.</p>
<a href="#">This is a link.</a>
<ul>This is a list.</a>
<li>This is a list.</a>
Rendered element:
Header Level 1 24px
Header Level 2 19px
Header Level 3 (Tagline) 18px
This is what a paragraph looks like. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat aute irure dolor est. 14px
This is a link 14px
- This is a list
- This is a list
- This is a list 14px
Lines Style
There are two different types of lines used: solid and dotted.
CSS selector:
'hr' , '.solid-lines-text-body hr' , '.dotted-line-separator hr' , '.dotted-line-footer hr'
Sample code:
<div class="solid-lines-text-body"><hr></div>
<div class="dotted-lines-text-body"><hr></div>
Rendered element:
Forms Style
Forms are used when users going through the purchase process and have to enter their shipping and billing info.
CSS selector:
'.checkout-info-form' , '.checkout-info-form input' , '.checkout-info-form select' , '.billing-info-form' , '.billing-info-form input' , '.billing-info-form select' , '.shoppingbag-summary select' ,
'.check-boxes' , 'select' , 'label'
Sample code:
<form class="checkout-info-form">
...
</form>
<div class="col-4of8">
</label for ="first-name">First Name</label>
<input type="text" id=first-name" placeholder="Jane">
</div>
<label for="contry">PROVINCE</label>
<select name="province" id="province">
<option>Alberta</option>
<option>British Columbia</option>
<option>Manitobal</option>
<option>New Brunswick</option>
<option>Newfoundland</option>
<option>Nova Scotia</option>
<option>Ontario</option>
<option>Prince Edward Island</option>
<option>Quebec</option>
<option>Saskatchewan</option>
</select>
Rendered element:
As an example, this is what the second part of the 'billing info' form looks like on a TV and desktop display.
As an example, this is what the second part of the 'billing info' form looks like on a mobile phone display.
Key Grouping Element Examples
As an example, this is what the navigation bar would look like on Etched On's website.
CSS selector:
'nav' , 'nav a' , 'nav a:hover' , 'nav a:focus' , 'nav li img' , 'nav li img:hover' , 'nav li img:focus' , '.navbar-icons-group' , '.nav-icons'
Sample code:
<nav class="grid">
<div class="col-2of10">
<a href="EtchedOn_WhoAreWe.html" class="menu-items">WHO ARE WE?></a>
</div>
...
</nav>
<div class="col-2of10">
<div class="nav-icons-group">
<a href="EtchedOn_ShoppingBag.html" class="nav-icons">
<img src="images/icons/icon_shoppingbag.png" height="32" width="32" alt="placeholder">
</a>
...
</div>
</div>
Rendered element:
As an example, this is what the a group of text would look like on Etched On's website.
CSS selector:
'h1' , 'h3' , 'p' , 'a.button' , 'a.button:hover' , 'a.button:focus'
Sample code:
<h1>WHO ARE WE?</h1>
<h3>crafters by day</h3>
<p>Etched On is a customized novelty crafting company with a passion for typography and design on various mediums. Whether it’s etching on glass, painting on canvases or stenciling cards, they work with individuals from start to finish to design and create handmade products that are inspired by people’s thoughts.</p>
<a class="button" href="#">FIND OUT MORE</a>
Rendered element:
WHO ARE WE?
crafters by day
Etched On is a customized novelty crafting company with a passion for typography and design on various mediums. Whether it’s etching on glass, painting on canvases or stenciling cards, they work with individuals from start to finish to design and create handmade products that are inspired by people’s thoughts.
✉ info@Etchedon.ca
FIND OUT MOREAs an example, this is what the product listing elements would look like on Etched On's website.
CSS selector:
'.product-content p' , '.product-content-image' , '.product-content-text' , '.product-content-image img' , '.product-content-image img a:hover' , '.product-content-image img a:focus'
Sample code:
<div class="product-content>
<div class="product-content-image">
<img src="images/product_listing/mason_jar.jpg" height="200" width="250"alt="designer life mason jar>
</div>
<div class="product-content-text">
<h2>Design Life Mason Jar</h2>
<p><strong>$20.00</strong></p>
<a class="button" href="EtchedOn_MasonJar.html"><VIEW DETAIL></a>
</div>
</div>
Rendered element:
Product Name
Product Name
Product Name
Product Name
$$$
$$$
$$$
$$$
Product Name
Product Name
Product Name
Product Name
$$$
$$$
$$$
$$$
As an example, this is what the checkout process bar would look like on Etched On's website.
CSS selector:
'.checkout-info-form input' , '.checkout-info-form select' , '.processbar' , '.processbar-info-container' , '.processbar-inactive-steps' , '.processbar-info-container h3'
Sample code:
<div class="processbar-info-container">
<h3><strong>1. SHIPPING INFO </strong></h3>
</div>
Rendered element:
1. SHIPPING INFO
2. BILLING INFO
3. COMPLETE
Image Elements Style
Icons will be bounded by circles.
CSS selector:
'.navbar-icons-group' , '.nav-icons' , '.nav-icons img' , '.nav-icons img:hover' , '.nav-icons img:focus'
Sample code:
<div class="nav-icons-group">
<a href="EtchedOn_ShoppingBag.html" class="nav-icons-selected">
<img src="images/icons/icon_shoppingbag.png" height="32" width="32" alt="shopping icon placeholder>
</a>
</div>
Rendered element:
Images (product listing and othes) will be borderless and have right angled corners.
CSS selector:
'img' , '.blog-content-image img' , '.bio-content-image img' , '.product-details-content-image img' , '.suggested-product-images img'
Sample code:
<div class="product-content">
<div class="product-content-image">
img src="images/product_listing/candle_mason_jar.jpg"height="200" width="250" alt="candle mason jars">
</div>
</div>
Rendered element:
IAT 339 || D101 || Nicky Fung & Jessica Kuk