Kitchen Sink / Style Guide

Semantic Backgrounds

Primary / Brand

Primary --background-primary
Primary Hover --background-primary-hover
Primary Active --background-primary-active

Secondary / Neutral

Secondary --background-secondary
Secondary Hover --background-secondary-hover
Secondary Active --background-secondary-active

Tertiary / Dark

Tertiary --background-tertiary
Tertiary Hover --background-tertiary-hover
Tertiary Active --background-tertiary-active

Structure & Overlays

Main (Dark) --background-main
Main Inverse --background-main-inverse
Overlay 50 --overlay-50

Semantic Content (Text)

On Dark Background

Content Primary (--content-primary)
Content Secondary (--content-secondary)
Content Tertiary (--content-tertiary)
Content Brand (--content-brand)

On Light Background

Content Primary Inverse (--content-primary-inverse)
Content Secondary Inverse (--content-secondary-inverse)
Content Tertiary Inverse (--content-tertiary-inverse)
Content Link (--content-link)
Content Disabled (--content-disabled)
Content Hover (--content-hover)
Content Active (--content-active)

Typography: Display

.display__x-large Display XL
.display__large Display LG
.display__medium Display MD
.display__small Display SM
.display__x-small Display XS

Typography: Headings

.heading__3x-large
Heading 3XL
Heading 3XL Italic
.heading__2x-large
Heading 2XL
Heading 2XL Italic
.heading__x-large
Heading XL
Heading XL Italic
.heading__large
Heading LG
Heading LG Italic
.heading__medium
Heading MD
Heading MD Italic
.heading__small
Heading SM
Heading SM Italic
.heading__x-small
Heading XS
Heading XS Italic
.heading__2x-small
Heading 2XS
Heading 2XS Italic

Typography: Labels

.label__x-large Label XL
.label__large Label LG
.label__medium Label MD
.label__small Label SM
.label__x-small Label XS

Typography: Paragraphs

.paragraph__2x-large
Paragraph 2XL
Paragraph 2XL Bold
.paragraph__x-large
Paragraph XL
Paragraph XL Bold
.paragraph__large
Paragraph LG
Paragraph LG Bold
.paragraph__base
Paragraph Base
Paragraph Base Bold
.paragraph__medium
Paragraph MD
Paragraph MD Bold
.paragraph__small
Paragraph SM
Paragraph SM Bold
.paragraph__x-small
Paragraph XS
Paragraph XS Bold