Style Guide

Basic design system for site-wide styling

Components

Guidelines

All lower case classes, no spaces, use dashes or underscores
Use rem values
When to use dashes vs. underscores
- Words before the underscore (if there is one) will use dashes and will describe what the element is in relation to the section it’s in; basically what it does or is. For instance, if there’s a section about “Our Benefits”, and that section had a grid. The grid could be called benefits_grid or benefits-grid_wrap.
- Then say that grid has a list of benefits, each of those could have a class such as benefits-list_item.
- the words after the underscore can be used to describe the element name, basically what it is. examples include: hero, item, checkbox, wrap, wrapper, block, etc.

Utility Class Names

‍
How to create them

Only on style guide page

When to use them

One offs

When not to use them

Repeating elements

Combo Class Names

How to create them

Prefix your combo classes with cc-

When to use them

Whenever you want, as long as it’s not the first class

When not to use them

Don’t use the cc- prefix if it’s the first class

Typeface Merriweather

When it comes to typography, accessibility and inclusive design are important to consider when designing for the web. Format your text with search engines and accessibility in mind.

Montserrat

Color Palettes

Set color swatches to be "global," so that if you edit them in one place, they update across your whole site wherever they appear. It's like symbols, but for color.

Black and white

text-white

bg-black
#000000

text-black

bg-white
#ffffff

Neutral Backgrounds and Text Colors

text-neutral-900

bg-neutral-50
#fafafa

text-neutral-800

bg-neutral-100
#f5f5f5

text-neutral-700

bg-neutral-200
#e5e5e5

text-neutral-600

bg-neutral-300
#d4d4d4

text-neutral-500

bg-neutral-400
#a3a3a3

text-neutral-400

bg-neutral-500
#737373

text-neutral-300

bg-neutral-600
#525252

text-neutral-200

bg-neutral-700
#404040

text-neutral-100

bg-neutral-800
#262626

text-neutral-50

bg-neutral-900
#171717

Create new color swatches here for background colors

bg-primary
#00275d

bg-secondary
#9f8669

Create new color swatches here for text colors

text-neutral-900

text-primary
#ffca0a

Typography

Think of headings as content guides — anyone should be able to understand the way you’ve organized your content by glancing at your headings. So make sure your headings are clear and descriptive.

Great video on the top 10 rules for typography made by thefutur.

Did you know - A text block is a generic text element, best used for text that isn't a heading, paragraph, or link. Use text blocks for copyright notices, tags, numbers, field labels, badges, etc.

H1

H2

H3

H4

H5

H6

Font weights

u-font-bold - 700

Use these classes for any repeating heading/paragraph styles found throughout the site. Feel free to add more here if necessary.

Sizes: 72px / 72px / 64px / 52px

hero-title

Sizes: 42px / 42px / 36px / 36px

section-title

Sizes: 21px

Paragraph-lg

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Sizes: 16px

Paragraph

Sizes: 14px

headline

Use text-** classes for whenever you want to use any of those font sizes. Almost treat them like utility classes. Or try to set it to the parent element if possible.

Sizes: 64px / 64px / 56px / 48px – Medium Heading

text-7xl

Sizes: 48px / 48px / 42px / 36px – Small Heading

text-6xl

Sizes: 42px / 42px / 36px / 36px – H1

text-5xl

Sizes: 36px / 36px / 32px / 32px – H2

text-4xl

Sizes: 32px / 32px / 28px / 28px – H3

text-3xl

Sizes: 24px – H4

text-2xl

Sizes: 21px – H5

text-xl

Sizes: 18px – H6

text-lg

Sizes: 16px

text-base

Sizes: 14px

text-sm

Sizes: 12px

text-xs

Sizes: 10px

text-xxs

Text Align

u-text-left

u-text-center

u-text-right

Lists

List item
List item
List item
- List item
- List item
- List item

Buttons

All Links

Button Small

Button

Button Large

cc-primary

Button Small Primary

Button Text

Button Primary

Button Text

Button Large Primary

Button Text

cc-secondary

Button Small Secondary

Button Text

Button Secondary

Button Text

Button Large Secondary

Button Text

cc-white

Button Small White

Button White

Button Large White

cc-text-only

cc-text-arrow

Spacing

Margins

u-mt-0

u-mr-0

u-mb-0

u-ml-0

u-my-0

u-mx-0

u-m-0

u-mt-8

u-mr-8

u-mb-8

u-ml-8

u-my-8

u-mx-8

u-m-8

u-mt-16

u-mr-16

u-mb-16

u-ml-16

u-my-16

u-mx-16

u-m-16

u-mx-auto

Grids

Consider only using these combo classes

Icons

Icons / Interface / Black

Icons / Social / Black

Icons / Interface / White

Icons / Social / White

Maps

Sizing

max-w-xs

max-w-sm

max-w-md

max-w-lg

max-w-xl

max-w-2xl

max-w-3xl

max-w-4xl

max-w-5xl

max-w-6xl

max-w-7xl

w-full

w-screen

h-full

w-screen

Effects

u-shadow-sm

u-shadow

u-shadow-md

u-shadow-lg

u-shadow-xl

u-shadow-2xl

Sections and wrappers

section

section-center

flex-center

flex_wrapper

Cards

card-sm

card

card-lg

cc-primary

Forms

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Columns

Resets columns_wrapper margin and column padding to 0. Can add combo class to apply space between columns.

Make sure to reset margin and padding back to 0 when the columns stack.