Color Description Notes Code
Primary Brand Color This is the primary brand color that will be seen throughout the website. It is used for main calls to action, and important elements like the navbar. #243966
Secondary Brand Color The secondary brand color is used for alternate actions. It is also used in the box-shadow token as a way to separate elements from the background. #e63462
Accent Brand Color This brand accent color is used sparingly, and only used for elements that need it to prevent the interface from looking too buys. #f7b801
Dark Text Color Works well with light color surface, this is generally the color of text elements seen on the website. #000000
Light Text Color The opposite of the dark color text, this is used on top of elements that utilize the primary brand color, such as buttons or the nav bar. #fcfcfc
Light Surface Color This light surface color is generally for articles or content that requires the user to read. It provides high contrast with the dark text. #f7f9fe
Dark Surface Color The dark surface color is used much in the same way as the light surface color, but instead used with light text. It can be used for footer content for example. #010a18
Typography Description Notes Code

Display Large

 Large Accent Display Text This is a large accent text, and should be used sparingly. It's main purpose is to create a hand made and welcoming feel to the website. 
                
** CSS **

.display_lg {
  font-family: "Just Another Hand", serif;
  font-weight: 300;
  font-style: normal;
  font-size: 4rem;
  margin: 0;
  padding: 0;
}

** HTML **

<p class="display_lg">Display Large</p>

Display Small

 Small Accent Display Text Similar to the large display accent text, this should be used sparingly. The size of this text works better when paired with the body text, and can be used within paragraphs to bring attention to specific words or short phrases. 
                
** CSS **

.display_sm {
  font-family: "Just Another Hand", serif;
  font-weight: 100;
  font-style: normal;
  font-size: 3rem;
  margin: 0;
  padding: 0;
}

** HTML **

<p class="display_sm">Display Small</p>

Header Large

 Larger Header Text Use the H1 tag to utilize this font. This can be used as main section headers, and should generally be used more than the accent text. 
                
** CSS **

h1 {
  font-family: "Poppins", serif;
  font-weight: 600;
  font-style: normal;
  font-size: 2rem;
  margin: 0;
  padding: 0;
}

** HTML **

<h1>Header Large</h1>

Header Small

 Small Header Text Useful for subtitles or headers to highlight sections within long text. 
                
** CSS **

h2 {
  font-family: "Poppins", serif;
  font-weight: 550;
  font-style: normal;
  font-size: 1.25rem;
  margin: 0;
  padding: 0;
}

** HTML **

<h2>Header Small</h2>

Body

 Body Text This is the default text that most of the body text will use. It uses the HTML default of 16px. Ensure that the contrast with the background is enough as this text is small. 
                
** CSS **

.body_text {
  font-family: "Poppins", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  margin: 0;
  padding: 0;
}

** HTML **

<p class="body_text">Body</p>
Box Shadows Description Notes Code
Box Shadows

This box shadow can be used to separate an element from the background.

Best Practices:

  • For elements that need separation from the background.
  • Should be used consistently or not at all to avoid confusing the user. 
                
** CSS **

.shadow_accent {
  box-shadow: 5px 5px #e63462;
}

** HTML **

<div class="image_placeholder shadow_accent"></div>