BASIC STYLES
COLOR PALETTE
NOTE
The color palette is applied site wide and should be consistent in their usage as outlined. White can be applied to backgrounds, form input boxes, as well as button text stylings or links if they appear on dark backgrounds. Light grey is used for form containers or backgrounds, while grey-brown is always used for the footer and accent lines. Warm beige may be used for acents but should always be applied to H2 headings. Blush pink is always and only used for interactives, and dark grey is primarily used for H1 headings and text.
For additional inquiries contact the designers Chantal Huang, Helen Nguyen, or Rowina Chan.
CODE SNIPPET
<figure>
<img src="img/green.png" alt="An earthy green color swatch">
<figcaption>#A6A998<br>(166, 169, 152);</figcaption>
</figure>
GRID STRUCTURES
One Column Grid
1/1
Two Column Grid
1/2
1/2
Three Column Grid
1/3
1/3
1/3
Twelve Column Grid
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
NOTE
Grid structures are used site wide to organize content. The main structure consists of a 12 column underlying grid with gutter sizes of 1.45rem.
For additional inquiries contact the designers Chantal Huang, Helen Nguyen, or Rowina Chan.
CODE SNIPPET
<---- HTML code snippet ---->
<---- underlying 12 column grid ---->
<div class="main-grid-container">
<div class="body-wrapper">
<!-- BODY CODE -->
<div>
<div>
/*---- CSS code snippet ----*/
/* main 12 column base grid for general company website */
.main-grid-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-column-gap: 1rem;
grid-template-rows: 1fr;
grid-row-gap: 4rem;
margin: 0;
}
/* container for all body content to leave 1 column on either side */
.body-wrapper {
grid-column: 2 / 12;
}
TEXT LINK
Click here to learn more →NOTE
Text links can be used in place of call-to-action buttons, but only as a secondary means. If there is only one action on the page, refer to call-to-action buttons.
For additional inquiries contact the designer, Rowina Chan.
CODE SNIPPET
<---- HTML code snippet ---->
<a href="">Click here to learn more</a>
/*---- CSS code snippet ----*/
a {
color: #C98F7D;
text-decoration: none;
font-size: 1.1rem;
}
a:hover, a:focus {
text-decoration: underline;
color: #6D716F;
transition-property: color;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
TEXT LISTS
BULLET LIST
- number one
- number two
- number three
CODE SNIPPET
<---- HTML code snippet ---->
<ul>
<li>number one</li>
<li>number two</li>
<li>number three</li>
</ul>
/*---- CSS code snippet ----*/
ul, ol {
/* 18 px*/
font-size: 1.1rem;
}
NUMBERED LIST
- number one
- number two
- number three
CODE SNIPPET
<---- HTML code snippet ---->
<ol>
<li>number one</li>
<li>number two</li>
<li>number three</li>
</ol>
/*---- CSS code snippet ----*/
ul, ol {
/* 18 px*/
font-size: 1.1rem;
}
NOTE
Text lists are used for short pieces of information that are brief and can be presented in a succinct manner. Bullet lists are more frequently used and may appear under product dimensions or the additional information section in product detail pages. Numbered lists may be used in place of bullet lists if the information needs to be ordered.
For additional inquiries contact the designer, Chantal Huang.
TYPOGRAPHY
FONT: KARLA
Heading 1 - 51px
Heading 2 - 30px
Heading 3 - 22px
Heading 4 - 20px
Body - 18px
Orci quis quam facilisis molestiel Donec sitae amet diam a velit effic venenatis. In dictu nunc libero, eul pharetra magna laoreet sitarm am. Morbi quis semper mi. Curabituras ornare orci. Aliquam erat volutpat.
NOTE
Typographic styles are applied site wide for all text using the typeface Karla. H2 Headings should adhere to the #C6B09D swatch as outlined under the color palette section.
For additional inquiries contact the designer, Helen Nguyen.
CODE SNIPPET
<---- HTML code snippet ---->
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<p>Orci quis quam facilisis molestiel Donec sitae amet diam a velit effic venenatis. In dictu nunc libero, eul pharetra magna laoreet sitarm am. Morbi quis semper mi. Curabituras ornare orci. Aliquam erat volutpat.</p>
/*---- CSS code snippet ----*/
h1 {
color: #6D716F;
/* 51 px */
font-size: 3.2rem;
}
h2 {
color: #C6B09D;
/* 30 px */
font-size: 1.9rem;
}
h3 {
/* 22 px */
font-size: 1.4rem;
}
h4 {
/* 20 px */
font-size: 1.3rem;
}
p, ul, ol {
/* 18 px*/
font-size: 1.1rem;
}