Style Guide

Reference for structure, typography, colors, and utilities used across the site.

Structure Classes

Defined and flexible core structure we can use on all or most pages.

page-wrappermain-wrapperbutton-groupcontainer-smallcontainer-mediumcontainer-largepadding-globalpadding-section-smallpadding-section-mediumpadding-section-large

Headings

H1 · Default

Heading

H1 · heading-style-h1

Heading

H2 · Default

Heading

H2 · heading-style-h2

Heading

H3 · Default

Heading

H3 · heading-style-h3

Heading

H4 · Default

Heading

H4 · heading-style-h4

Heading

H5 · Default

Heading

H5 · heading-style-h5

Heading

H6 · Default

Heading

H6 · heading-style-h6

Heading

Other HTML Tags

All paragraphs

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

All links

All Links

All quotes

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

All Ordered Lists

  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.

All Unordered Lists

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.

Text Classes

Text Sizes

text-xsSample
text-smSample
text-baseSample
text-lgSample
text-xlSample
text-2xlSample
text-3xlSample
text-4xlSample
text-5xlSample
text-6xlSample
text-7xlSample
text-8xlSample

Text Styles

text-style-strikethrough

text-style-italic

text-style-muted

text-style-allcaps

text-style-nowrap

text-style-link

text-style-quote — Sample text is being used as a placeholder.

Text Weights

text-weight-lightLight
text-weight-normalNormal
text-weight-mediumMedium
text-weight-semiboldSemibold
text-weight-boldBold

Text Alignments

text-align-left

text-align-center

text-align-right

Buttons

Button combo class system.

Button TextButton TextButton TextButton Text

Colors

Manage recurring text and background colors.

Text Colors

text-color-primary

text-color-primary

text-color-secondary

text-color-secondary

text-color-alternate

text-color-alternate

Background Colors

bg-primary

#131313

bg-secondary

#5F58FF

bg-tertiary

#F3F4F2

Max widths

Use the max-width CSS property to contain inner content to a maximum width.

max-width-fullmax-width-full-tabletmax-width-full-mobile-portraitmax-width-full-mobile-landscapemax-width-xxlargemax-width-xlargemax-width-largemax-width-mediummax-width-smallmax-width-xsmallmax-width-xxsmall

Paddings

Utility spacing system — padding classes. [padding-direction] + [padding-size].

Direction Classes

padding-bottompadding-toppadding-verticalpadding-horizontalpadding-leftpadding-right

Size Classes

padding-0padding-tinypadding-xxsmallpadding-xsmallpadding-smallpadding-mediumpadding-largepadding-xlarge

Margins

Utility spacing system — margin classes. [margin-direction] + [margin-size].

Direction Classes

margin-bottommargin-topmargin-verticalmargin-horizontalmargin-leftmargin-right

Size Classes

margin-0margin-tinymargin-xxsmallmargin-xsmallmargin-smallmargin-mediummargin-largemargin-xlarge

Spacers

Unified spacer system for the project.

spacer-tinyspacer-xxsmallspacer-xsmallspacer-smallspacer-mediumspacer-largespacer-xlargespacer-xxlargespacer-hugespacer-xhuge

Icons

Unify icon sizes. icon-height sets the height of icons. icon-1x1 sets both height and width.

icon-height-small

icon-height-medium

icon-height-large

icon-1x1-small

icon-1x1-medium

icon-1x1-large

Useful utility systems

Utility classes we like to use in most of our projects to build faster.

hidehide-tablethide-mobile-portraithide-mobile-landscapeoverflow-visibleoverflow-hiddenoverflow-autooverflow-scrollpointer-events-autopointer-events-nonelayerspacing-cleanalign-centerdisplay-inlineflexinherit-color

Form component

Example of a form component using folders.

Radio