BASE SYSTEM ✦ VERSION 2.0

Style Guide

Use this style guide to manage your website branding and design.

Typography

Headings
All H1 Headings

The quick brown fox jumps over the lazy dog

h1-heading

The quick brown fox jumps over the lazy dog

All H2 Headings

The quick brown fox jumps over the lazy dog

h2-heading

The quick brown fox jumps over the lazy dog

All H3 Headings

The quick brown fox jumps over the lazy dog

h3-heading

The quick brown fox jumps over the lazy dog

All H4 Headings

The quick brown fox jumps over the lazy dog

h4-heading

The quick brown fox jumps over the lazy dog

All H5 Headings
The quick brown fox jumps over the lazy dog
h5-heading
The quick brown fox jumps over the lazy dog
All H6 Headings
The quick brown fox jumps over the lazy dog
h6-heading
The quick brown fox jumps over the lazy dog
HTML Elements
Body
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
All Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.

All Block Quotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
All Links
Link
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.
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.
Text
body-x-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.

body-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.

body-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.

body-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.

body-x-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.

Subheadings
subheading-x-large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
subheading-large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
subheading-medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
subheading-small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
subheading-x-small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
Overline
overline-x-large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis
overline-large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis
overline-medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
overline-small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
overline-x-small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
Text Colors
text-color-primary
Text Color Primary
text-color-secondary
Text Color Secondary
text-color-tertiary
Text Color Tertiary
text-color-brand
Text Color Brand
text-color-inherit
Text Color Inherit
text-color-alternate
Text Color Alternate
text-color-muted
Text Color Muted
Text Weights
text-weight-x-bold
Text Weight X Bold
text-weight-bold
Text Weight Bold
text-weight-semibold
Text Weight Semibold
text-weight-medium
Text Weight Medium
text-weight-normal
Text Weight Normal
text-weight-light
Text Weight Light
Text Styles
text-link
text-strikethrough
Text Strikethrough
text-underline
Text Underline
text-italics
Text Italics
text-all-caps
Text All Caps
text-balance
Text Balance
text-no-wrap
Text No Wrap
text-truncate
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
Text Alignments
text-align-left
Text Align Left
text-align-center
Text Align Center
text-align-right
Text Align Right

Elements

Buttons
button
Button
button
Button
button
secondary
Button
button
alternate
Icon Buttons
icon-button
icon-button
Badges
badge
Badge
badge
Badge
badge
secondary
Badge
badge
outline
Badge
badge
alternate
Badge
Avatar
avatar
avatar-group
avatar
Dividers
divider
divider
Is-secondary
divider
is-tertiary
Icons
icon
icon-x-small
icon-small
icon-medium
icon-large
icon-x-large
Form Elements
form_label
form_input
form_input
is-text-area
form_input
is-select
form_checkbox
form_radio
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Structure

Sections
section-x-large
section-large
section-medium
section-small
section-xsmall
Containers
container-x-large
container-large
container-medium
container-small
container-x-small
Max Widths
max-width-2x-large
max-width-x-large
max-width-large
max-width-medium
max-width-small
max-width-x-small
max-width-2x-small
Columns
column
column-2x-small
column-x-small
column-small
column-medium
column-large
column-x-large
column-2x-large
column-3x-large
column-left
column-center
column-right
column-space-between
Rows
row
row-2x-small
row-x-small
row-small
row-medium
row-large
row-x-large
row-2x-large
row-left
row-center
row-right
row-top
row-bottom
row-space-between
row-wrap
Padding
padding-2x-small
padding-x-small
padding-small
padding-medium
padding-large
padding-x-large
padding-2x-large
padding-3x-large
padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right
Utility
page-wrapper
page-padding
overflow-hidden
relative
z-index-1
z-index-2
align-center
button-group
hide
This element is hidden
hide-tablet
hide-mobile-landscape
hide-mobile-portrait
Images
image-cover
image-contain
image-fill

Colors

Background Colors
background-primary
background-secondary
background-tertiary
background-brand
background-alternate

Rich Text

rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript