Getting Started

This code style guide is a reference for application owners and developers to understand how an application will look and feel. It is used to convey design language, define design rationale, and explain how to use markup..

Global

Global styles can be found in the global.css file.

Colors

Aubergine

Classes:

Hex:

RGBA:

Classes:

Hex:

RGBA:

Classes:

Hex:

RGBA:

Classes:

Hex:

RGBA:

Guava

Classes:

Hex:

RGBA:

Classes:

Hex:

RGBA:

Classes:

Hex:

RGBA:

Classes:

Hex:

RGBA:

Ecru

Classes:

Hex:

RGBA:

Classes:

Hex:

RGBA:

Classes:

Hex:

RGBA:

Classes:

Hex:

RGBA:

Mint

Classes:

Hex:

RGBA:

Classes:

Hex:

RGBA:

Classes:

Hex:

RGBA:

Classes:

Hex:

RGBA:

Stone

Classes:

Hex:

RGBA:

Classes:

Hex:

RGBA:

Classes:

Hex:

RGBA:

Classes:

Hex:

RGBA:

Classes:

Hex:

RGBA:

Classes:

Hex:

RGBA:

Copy

:root {
    /* fonts */
    --primary-font: Roboto;
    
    /* colors */
    --huron-colors-aubergine-800-og: #370022ff;
    --huron-colors-aubergine-600-og: #5d013aff;
    --huron-colors-aubergine-400: #850253ff;
    --huron-colors-aubergine-100: #f5e6efff;
    --huron-colors-guava-100: #ffe0e5ff;
    --huron-colors-guava-500-og: #ff3d5aff;
    --huron-colors-guava-600: #db354dff;
    --huron-colors-guava-700: #d62440ff;
    --huron-colors-ecru-50: #f7f6f4ff;
    --huron-colors-ecru-100-og: #ebe9e4ff;
    --huron-colors-ecru-200-og: #e3e1d4ff;
    --huron-colors-ecru-300: #d6d3c9ff;
    --huron-colors-mint-100: #e3fff6ff;
    --huron-colors-mint-300-og: #bcffecff;
    --huron-colors-mint-500-og: #70cdb3ff;
    --huron-colors-mint-700: #4da38bff;
    --huron-colors-stone-50: #f2f0ebff;
    --huron-colors-stone-200: #d4d0cbff;
    --huron-colors-stone-400: #9e9995ff;
    --huron-colors-stone-600: #5c5652ff;
    --huron-colors-stone-900: #2b2624ff;
    --alpha-80-alt: #ffffff33;
    --huron-colors-button-primary-hover: #e25d71;
}

Fonts

We use two fonts:

Bricolage Grotesque
1. Headlines
2. Titles
3. Buttons
4. Links
Roboto
1. Body copy
2. Bullets
3. Captions

Copy

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap" rel="stylesheet">

-or-

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');

font-weight: 300; font-family: 'Bricolage Grotesque', sans-serif;

font-weight: 400; font-family: 'Bricolage Grotesque', sans-serif;

font-weight: 500; font-family: 'Bricolage Grotesque', sans-serif;

font-weight: 600; font-family: 'Bricolage Grotesque', sans-serif;

font-weight: 700; font-family: 'Bricolage Grotesque', sans-serif;

font-weight: 300; font-family: 'Roboto', sans-serif;

font-weight: 400; font-family: 'Roboto', sans-serif;

font-weight: 500; font-family: 'Roboto', sans-serif;

font-weight: 600; font-family: 'Roboto', sans-serif;

font-weight: 700; font-family: 'Roboto', sans-serif;

Copy

<h4 class="fw-300">font-weight: 300; font-family: 'Bricolage Grotesque', sans-serif;</h4>
<h4 class="fw-400">font-weight: 400; font-family: 'Bricolage Grotesque', sans-serif;</h4>
<h4 class="fw-500">font-weight: 500; font-family: 'Bricolage Grotesque', sans-serif;</h4>
<h4 class="fw-700"> font-weight: 700; font-family: 'Bricolage Grotesque', sans-serif;</h4>

Headers

This is a heading (H1) with Bricolage Grotesque font

This is a heading (H2) with Bricolage Grotesque font

This is a heading (H3) with Bricolage Grotesque font

This is a heading (H4) with Bricolage Grotesque font

Paragraphs

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Copy

<p>Lorem ipsum dolor sit amet, consectetur <b>adipiscing elit</b>, 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. Duis aute irure dolor in <a href="#">reprehenderit</a> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Paragraph with modifiers:

Copy

<p class="primary-blue">Lorem ipsum dolor sit amet, consectetur <b class="secondary-orange-light">adipiscing elit</b>, 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. Duis aute irure dolor in <a href="#" class="fw-700">reprehenderit</a> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Anchors

This is the default anchor element.

Copy

<a href="#">This is the default anchor element.<svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-arrow-right" style="min-width:16px;max-width:16px" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M8 12h8"></path><path d="m12 16 4-4-4-4"></path></svg></a>

Images

Images on the style guide are randomly generated from Lorem Picsum.
When appropriate, it is suggested to wrap the image element with a div element even if the div element is not initially styled. This will aid any Javascript that may manipulate the image after page load.

Copy

<div>
    <img src="https://picsum.photos/1200/800"/>
</div>

Images with modifiers:

Copy

<div class="overflow-hidden">
    <img src="https://picsum.photos/1200/800" class="hover-img-zoom"/>
</div>

Copy

<div class="overflow-hidden">
    <img src="https://picsum.photos/1200/800" class="fit-cover"/>
</div>

Copy

<div class="overflow-hidden">
    <img class="filter filter-grayscale-100" src="https://picsum.photos/1200/800" />
</div>
                
<div class="overflow-hidden img-duo primary-blue">
    <img src="https://picsum.photos/1200/800" class="filter filter-grayscale-1" />
</div>
                
<div class="overflow-hidden img-duo secondary-orange">
    <img src="https://picsum.photos/1200/800" class="filter filter-grayscale-1" />
</div>
    
<div class="overflow-hidden img-duo-hover primary-blue">
    <img src="https://picsum.photos/1200/800" />
</div>

Buttons

Primary Button

Secondary Button

Copy

<a href="#" class="btn-primary">Default Button</a>

Copy

.btn-primary {
  background: var(--huron-colors-guava-600);
  color: var(--huron-colors-ecru-50);
  border: none;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--typo-h2-font-family);
}

.btn-primary:hover {
  background:  var(--huron-colors-button-primary-hover);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #ffffff33;
  background-color: var(--huron-colors-aubergine-800-og);
  color: var(--huron-colors-stone-50);
  font-size: 16px;
  font-weight: 500;
  font-family: var(--typo-h2-font-family);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.btn-secondary::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: var(--alpha-80-alt);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.btn-secondary:hover::before {
  opacity: 1;
}

Horizontal Rules

Copy

<hr/>

Copy

hr {
    margin: 30px 0;
    height: 0px;
    border: 1px solid var(--huron-colors-stone-200);
}

Logos

Logo file paths will be determined by the platform they live in.
It is suggested to use the svg file format but there are png formats available here.
Due to being changed infrequently, logos are a rare exception and can be referenced within the CSS file.

Huron Light Logo

Huron Dark Logo

Utilities

Utility styles can be referenced in the utils.css file.

Utilities are simple HTML classes typically scoped to a single CSS property, like border-style or background-color. Utilities can be used additively to style an object from scratch or to override a style defined in component CSS.

Utility-first CSS [replaces] high-level classes, such as container and heading, with low-level classes, such as bg-light-gray and margin-bottom-30. You can think of them as low-level design commodities with predictable names.

Selectors

Utility class names are typically a hyphenated property-value pair. Example: margin-bottom: 30px; would be represented by margin-bottom-30. This provides an intuitive approach to the utility class naming schema.
The value of the property can be used alone if it is unique and intuitive. Instead of display-block, we can simply use block. Instead of color-secondary-green we can use secondary-green.
Other exceptions include class names such as hide (display: none !important;) and mobile-hide which convey and provide more meaning than display-none, etc.
Abbreviated class names can also be used when appropriate. Example: font-size: 18px; would become fs-18 and font-weight: 700; would become fw-700. Excessive use of abbreviations should be avoided as it can result in non-intuitive class names.
Unlike a vendor utility-first library, these utility classes are custom and created and added as needed.

Examples

An element that remains hidden until the mobile media query is triggered:

Incorrect:

<li id="unique-id" class="unique-class"><a href="#">Log In</a></li>

#unique-id,
.unique-class {
    display: none;
}

@media (max-width: 668px) {

    #unique-id,
    .unique-class {
        display: block;
    }
}

Correct:

<li class="mobile-show"><a href="#">Log In</a></li>

.mobile-show {
    display: none;
}

@media (max-width: 668px) {

    .mobile-show {
        display: block;
    }
}

Fluid Typography Example:

Lorem ipsum dolor sit amet

<h1 class="fw-500 secondary-grey-dark fluid-22-7vw-34">Lorem ipsum dolor sit amet</h1>

/* between 22px and 34px with viewport width scaler */
                    
.fluid-22-7vw-34 {
    font-size: clamp(22px, 7vw, 34px);
}