Colors - Primitive
Devider
Primary
Primary/WILLYS RED
#d63926
Classes:
.text-willys-red, .bg-willys-red
Primary/OLD HIGHLIGHTER
#fbd35a
Classes:
.text-old-highlighter, .bg-old-highlighter
Primary/OG WILLYS RED
#7f2813
Classes:
.text-og-willys-red, .bg-og-willys-red
Primary/PAPER
#f4f4ec
Classes:
.text-paper, .bg-paper
Accent
Accent/SOFT YELLOW
#ffecb1
Classes:
.text-soft-yellow, .bg-soft-yellow
Accent/OCEAN MIST
#d0d6ca
Classes:
.text-ocean-mist, .bg-ocean-mist
Accent/OCEAN MIST 50
#e7ede1
Classes:
.text-ocean-mist-50, .bg-ocean-mist-50
Accent/OCEAN MIST 25
#f1f7eb
Classes:
.text-ocean-mist-25, .bg-ocean-mist-25
Accent/OG GREEN
#3d392e
Classes:
.text-og-green, .bg-og-green
Neutral
Neutral/White
#ffffff
Classes:
.text-neutral-white, .bg-neutral-white
Neutral/900
#231f20
Classes:
.text-neutral-900, .bg-neutral-900
Neutral/800
#444041
Classes:
.text-neutral-800, .bg-neutral-800
Neutral/700
#635f60
Classes:
.text-neutral-700, .bg-neutral-700
Neutral/600
#777374
Classes:
.text-neutral-600, .bg-neutral-600
Neutral/500
#a19b9d
Classes:
.text-neutral-500, .bg-neutral-500
Neutral/400
#c0babc
Classes:
.text-neutral-400, .bg-neutral-400
Neutral/300
#e3dedf
Classes:
.text-neutral-300, .bg-neutral-300
Neutral/200
#f2eced
Classes:
.text-neutral-200, .bg-neutral-200
Neutral/100
#f9f3f5
Classes:
.text-neutral-100, .bg-neutral-100
Neutral/50
#fef8fa
Classes:
.text-neutral-50, .bg-neutral-50
Red
Red/500
#ff001e
Classes:
.text-red-500, .bg-red-500
Red/50
#ffe9ed
Classes:
.text-red-50, .bg-red-50
Green
Green/500
#389827
Classes:
.text-green-500, .bg-green-500
Green/50
#ecfae8
Classes:
.text-green-50, .bg-green-50
Colors - Semantic
Devider
Surface Fill
Surface Fill/White
#ffffff
Classes:
.text-surface-white, .bg-surface-white
Surface Fill/PAPER
#f4f4ec
Classes:
.text-surface-paper, .bg-surface-paper
Surface Fill/BUTTER
#ffecb1
Classes:
.text-surface-butter, .bg-surface-butter
Surface Fill/RUST
#7f2813
Classes:
.text-surface-rust, .bg-surface-rust
Surface Fill/RED
#d63926
Classes:
.text-surface-red, .bg-surface-red
Surface Fill/OG GREEN
#3d392e
Classes:
.text-surface-og-green, .bg-surface-og-green
Surface Fill/OLD HIGHLIGHTER
#fbd35a
Classes:
.text-surface-highlighter, .bg-surface-highlighter
Surface Fill/Dark Brown
#231f20
Classes:
.text-surface-dark-brown, .bg-surface-dark-brown
Surface Fill/Ocean Mist
#d0d6ca
Classes:
.text-surface-ocean-mist, .bg-surface-ocean-mist
Surface Fill/Ocean Mist 50
#e7ede1
Classes:
.text-surface-ocean-mist-50, .bg-surface-ocean-mist-50
Text
Text/Dark Brown
#231f20
Classes:
.text-dark-brown, .bg-dark-brown
Text/Paper
#f4f4ec
Classes:
.text-paper-text, .bg-paper-text
Text/Grey
#635f60
Classes:
.text-grey-text, .bg-grey-text
Text/Accent
#d63926
Classes:
.text-accent, .bg-accent
Text/Highlight
#fbd35a
Classes:
.text-highlight, .bg-highlight
Text/Rust
#7f2813
Classes:
.text-rust-text, .bg-rust-text
Text/White
#ffffff
Classes:
.text-white-text, .bg-white-text
Border
Border/Light
#ffffff
Classes:
.text-border-light, .bg-border-light
Border/Dark Brown
#231f20
Classes:
.text-border-dark-brown, .bg-border-dark-brown
Border/Subtle
#f2eced
Classes:
.text-border-subtle, .bg-border-subtle
Border/Highlight
#d63926
Classes:
.text-border-highlight, .bg-border-highlight
Border/Bold
#444041
Classes:
.text-border-bold, .bg-border-bold
Border/Muted
#c0babc
Classes:
.text-border-muted, .bg-border-muted
Border/Error
#ff001e
Classes:
.text-border-error, .bg-border-error
Button
Button/Primary
#d63926
Classes:
.text-button-primary, .bg-button-primary
Button/Secondary
#231f20
Classes:
.text-button-secondary, .bg-button-secondary
Button/Inverse
#ffffff
Classes:
.text-button-inverse, .bg-button-inverse
Button/Subdued
#777374
Classes:
.text-button-subdued, .bg-button-subdued
Button/Disabled
#a19b9d
Classes:
.text-button-disabled, .bg-button-disabled
Feedback
Feedback/Error
#ff001e
Classes:
.text-feedback-error, .bg-feedback-error
Feedback/Success
#389827
Classes:
.text-feedback-success, .bg-feedback-success
Feedback/Error-Light
#ffe9ed
Classes:
.text-feedback-error-light, .bg-feedback-error-light
Feedback/Success-Light
#ecfae8
Classes:
.text-feedback-success-light, .bg-feedback-success-light
Typography
Devider
Headlines Desktop
Devider
Display D
Lorem ipsum
H1/D/Bold CAPS
Lorem ipsum
H1/D/Bold
Lorem ipsum
H1/D/Regular
Lorem ipsum
H1/D/Regular CAPS
Lorem ipsum
H2/D/Bold
Lorem ipsum
H2/D/Bold CAPS
Lorem ipsum
H2/D/Regular
Lorem ipsum
H2/D/Regular CAPS
Lorem ipsum
H3/D/Bold
Lorem ipsum
H3/D/Bold Caps
Lorem ipsum
H3/D/Regular
Lorem ipsum
H3/D/Regular CAPS
Lorem ipsum
H4/D/Bold
Lorem ipsum
H4/D/Bold CAPS
Lorem ipsum
H4/D/Regular
Lorem ipsum
H4/D/Regular CAPS
Lorem ipsum
H5/D/Bold
Lorem ipsum
H5/D/Bold CAPS
Lorem ipsum
H5/D/Regular
Lorem ipsum
H5/D/Regular CAPS
Lorem ipsum
Headlines Mobile
Devider
Display M
Lorem ipsum
H1/M/Bold
Lorem ipsum
H1/M/Bold CAPS
Lorem ipsum
H1/M/Regular
Lorem ipsum
H1/M/Regular CAPS
Lorem ipsum
H2/M/Bold CAPS
Lorem ipsum
H2/M/Bold
Lorem ipsum
H2/M/Regular
Lorem ipsum
H2/M/Regular CAPS
Lorem ipsum
H3/M/Bold
Lorem ipsum
H3/M/Regular
Lorem ipsum
H3/M/Bold CAPS
Lorem ipsum
H3/M/Regular CAPS
Lorem ipsum
H4/M/Bold
Lorem ipsum
H4/M/Bold CAPS
Lorem ipsum
H4/M/Regular
Lorem ipsum
H4/M/Regular CAPS
Lorem ipsum
H5/M/Bold
Lorem ipsum
H5/M/Bold CAPS
Lorem ipsum
H5/M/Regular
Lorem ipsum
H5/M/Regular CAPS
Lorem ipsum
Hovers
Devider