BASIC STYLES

CALL-TO-ACTION BUTTON

NOTE

Call-to-action buttons are used as a primary means of getting the user to proceed somewhere else. There should only be one per page - if there is a need for a secondary or less important CTA, refer to text links. As an interactive it should adhere to the #C98F7D swatch outlined under the colour palette section.

For additional inquiries contact the designer, Chantal Huang.

CODE SNIPPET

								
									<---- HTML code snippet ---->
									<div class="cta-margin">
									<a href="" class="cta-button">CTA Button</a>
									</div>

									/*---- CSS code snippet ----*/
									/* call to action button */
									.cta-button {
										border: 0.15rem solid #C98F7D;
										background-color: #C98F7D;
										padding: 0.6rem 3.2rem;
										font-weight: bold;
										color: white;
										border-radius: 0.8rem;
										margin-top: 1rem;
									}

									/* hover state for CTA button */
									.cta-button:active, .cta-button:hover, .cta-button:focus {
										background-color: white;
										color: #C98F7D;
										text-decoration: none;
										transition-property: background; 
										transition-duration: 0.3s; 
										transition-timing-function: ease-out;
									} 

									.cta-margin {
										margin-top: 3rem;
										margin-bottom: 2.5rem;
									}

									/* flexbox container for cta on forms */
									.cta-container {
										display: flex;
										flex-direction: column;
										align-items: center;
									}
								
							

COLOR PALETTE

white #FFFFFF (255, 255, 255) backgrounds, form input boxes
light grey #F4F4F4 (244, 244, 244) backgrounds, form containers
grey-brown #A9A2A1 (169, 162, 161) accent lines, footer
warm beige #C6B09D (198, 176, 157) h2 headings
blush pink #C98F7D (201, 143, 125) interactives
dark grey #6D716F (109, 113, 111) h1 headings, text

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 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

  1. number one
  2. number two
  3. 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;
									}