Design system

Style Guide

Version 0.1 - September 14, 2022
Typography
Default HTML Headings
All H1 Headings

Heading 1

All H2 Headings

Heading 2

All H3 Headings

Heading 3

All H4 Headings

Heading 4

All H5 Headings
Heading 5
All H6 Headings
Heading 6
Typographic Style
type-style-display
Type Style Display
type-style-blockquote
Type Style Block Quote
type-style-lining-figures
98%
type-style-headline
Type Style Headline
type-style-subheadline
Type Style Subheadline
type-style-overline
Type Style Overline
Typographic Scale Variables
text-size-9xl
Text size 9xl
text-size-8xl
Text size 8xl
text-size-7xl
Text size 7xl
text-size-6xl
Text size 6xl
text-size-5xl
Text size 5xl
text-size-4xl
Text size 4xl
text-size-3xl
Text size 3xl
text-size-2xl
Text size 2xl
text-size-xl
Text size xl
text-size-lg
Text size lg
text-size-md
Text size md
text-size-sm
Text size sm
text-size-xs
Text size xs
Other HTML Tags
All Paragraphs

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.

All Links
All Links
All Block Quotes
Block Quote
All Unordered Lists
  • No bullet list

  • No bullet list

All Unordered Lists
  • Bullet list

  • Bullet list

All Ordered Lists
  1. No bullet list

  2. No bullet list

  3. No bullet list

Text Weights
text-weight-xbold
text-weight-xbold (800)
text-weight-bold
text-weight-bold (700)
text-weight-semibold
text-weight-semibold (600)
text-weight-medium
text-weight-medium (500)
text-weight-normal
text-weight-normal (400)
text-weight-light
text-weight-light (300)
Text Letter Spacings
text-letterspacing-wide
A Lorem ipsum dolor sit amet
text-letterspacing-normal
A Lorem ipsum dolor sit amet
text-letterspacing-tight
A Lorem ipsum dolor sit amet
Text Styles
text-style-italic
text-style-italic
text-style-strikethrough
text-style-strikethrough
text-style-allcaps
text-style-allcaps
text-style-nowrap
text-style-nowrap
text-style-quote
text-style-quote
text-style-link
text-style-2lines
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.
text-style-3lines
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. 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.
text-style-muted
text-style-muted
Text Alignment
text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right
Rich Text
text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
This is a block quote inside of a rich text element. Featuring some text across multiple lines.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a link inside of a rich text

  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item
Caption Goes Here

Colors
Purple
900
800
700
600
500
400
300
200
100
50
Teal
900
800
700
600
500
400
300
200
100
50
GRey
900
800
700
600
500
400
300
200
100
50
Background Color
background-black
background-white
background-purple-50
Text Colors
text-color-grey-900
text-color-grey-900
text-color-grey-600
text-color-grey-600
text-color-grey-700
text-color-grey-700
text-color-grey-800
text-color-grey-800
text-color-grey-900
text-color-grey-900
text-color-teal-600
text-color-teal-600
text-color-purple-300
text-color-purple-300
text-color-purple-600
text-color-purple-600
text-color-purple-800
text-color-purple-800
text-color-sunset-400
text-color-sunset-400
text-color-sunset-500
text-color-sunset-500
text-color-white
text-color-white
Effects
Box Shadows
elevation-base
elevation-md
elevation-lg
elevation-xl
elevation-xxl
UI Elements
Buttons
button
is-button-large
button
button
is-button-small
button-secondary
is-button-large
button-secondary
button-secondary
is-button-small
button-tertiary
is-button-large
button-tertiary
button-tertiary
is-button-small
button-link
To use on a dark background,  use the add-on class is-alternate
button
is-button-large
is-alternate
button
is-alternate
button
is-button-small
is-alternate
Buttons With Icons
button
with-icon
button
is-button-small
with-icon
button-secondary
with-icon
button-secondary
is-button-small
with-icon
button-tertiary
with-icon
button-tertiary
is-button-small
with-icon
button-link
with-icon
Form Elements
field-label
form-input
field-label
form-input
is-text-area
field-label
form-input
is-select-input
form-checkbox
form-checkbox-icon
form-checkbox-label
form-radio
form-radio-icon
form-radio-label
button
form-success-message
Thank you! Your submission has been received!
form-error-message
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Icons (Image)

icon-xxsmall

icon-xsmall

icon-small

icon-medium

icon-large

icon-xlarge

icon-1x1-xxsmall

icon-1x1-xsmall

icon-1x1-small

icon-1x1-medium

icon-1x1-large

icon-1x1-xlarge

Icons (HTML Embed)

icon-embed-xxsmall

icon-embed-xsmall

icon-embed-small

icon-embed-medium

icon-embed-large

icon-embed-xlarge

Images

image-wrapper-1:1

image-wrapper-4:3

image-wrapper-3:2

image-wrapper-16:9

Fluid Spacers
spacer-xxl
spacer-visible
spacer-xl
spacer-visible
spacer-lg
spacer-visible
spacer-md
spacer-visible
spacer-sm
spacer-visible
spacer-xs
spacer-visible
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Additional Classes from latest style guide update (v1.2)
Text Letter Spacings
text-letterspacing-xwide
A Lorem ipsum dolor sit amet
text-letterspacing-wide
A Lorem ipsum dolor sit amet
text-letterspacing-normal
A Lorem ipsum dolor sit amet
text-letterspacing-tight
A Lorem ipsum dolor sit amet
text-letterspacing-xtight
A Lorem ipsum dolor sit amet
Text Line Heights
text-lineheight-xtall
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.
text-lineheight-tall
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.
text-lineheight-normal
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.
text-lineheight-short
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.
text-lineheight-xshort
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.
text-lineheight-none
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.
Color Samples
Used to create color swatches
Click and paste Color Palette
Box Shadows
Shadows allow you to add depth and realism to designs by positioning elements on a z-axis.
shadow-xxsmall
shadow-xsmall
shadow-small
shadow-medium
shadow-large
shadow-xlarge
shadow-xxlarge
Icons (HTML Embed)
HTML embed icons enable you to control icon color on hover.

icon-embed-xxsmall

icon-embed-xsmall

icon-embed-small

icon-embed-medium

icon-embed-large

icon-embed-xlarge

icon-embed-custom