Design System

Color Primitives

Glow Yellow

glow-yellow-300

#F3FBCD

glow-yellow-700

#F3FB9F

glow-yellow-900

#F3FB84

Espresso

espresso-500

#7F716C

espresso-600

#6A5954

espresso-700

#55413B

espresso-800

#3F2A23

espresso-900

#2A120A

Cream

cream-50

#FCF5E8

cream-100

#F7F0E3

cream-200

#F2E8DE

cream-300

#EDE6D9

cream-600

#DED7CA

Red

red-100

#FFCDCD

red-600

#D82727

Green

green-100

#DEEDD0

green-600

#659731

Orange

orange-100

#FAECCD

orange-600

#C79527

Neutral

neutral-white

#FFFFFF

neutral-black

#120602

light-grey

#FCFCF8

Semantic Colors

Text Colors

text-primary

espresso-900

text-secondary

espresso-700

text-tertiary

espresso-500

text-on-accent

cream-50

Brand Text Colors

text-brand-primary

glow-yellow-900

text-brand-secondary

glow-yellow-700

text-brand-tertiary

glow-yellow-300

Status Text Colors

text-positive-primary

green-600

text-attention-primary

orange-600

text-negative-primary

red-600

Fill Colors

fill-primary

espresso-900

fill-secondary

espresso-800

fill-brand-primary

glow-yellow-900

Layer Colors

layer-floor-0

neutral-white

layer-floor-1

cream-50

layer-floor-2

cream-100

layer-floor-3

cream-200

layer-floor-4

cream-300

layer-floor-5

cream-600

Alpha/Transparent Colors

cream-a16

16% opacity

cream-a32

32% opacity

cream-a64

64% opacity

espresso-a8

8% opacity

espresso-a16

16% opacity

espresso-a32

32% opacity

Typography

Headings

Heading 1

|

Heading 1

BentonModernD | Light & Italic | 72px | 80px line height | 0% letter spacing

Heading 2

|

Heading 2

BentonModernD | Light & Italic | 56px | 60px line height | 0%

Heading 3

|

Heading 3

BentonModernD | Light & Italic | 48px | 52px line height | 0%

Heading 4

|

Heading 4

BentonModernD | Light & Italic | 40px | 44px line height | 0%

Heading 5
|
Heading 5

BentonModernD | Light & Italic | 32px | 36px line height | 0%

Heading 6
|
Heading 6

BentonModernD | Light & Italic | 24px | 28px line height | 0%

Body Typography

Body XL

Mobile: 16px / 24px • Desktop: 20px / 28px • Book

Body Large

Mobile: 14px / 20px • Desktop: 16px / 24px • Book

Body Large Strong

Mobile: 14px / 20px • Desktop: 16px / 24px • Regular

Body Medium

Mobile: 12px / 18px • Desktop: 14px / 20px • Book

Body Medium Strong

Mobile: 12px / 18px • Desktop: 14px / 20px • Regular

Body Small

Mobile: 10px / 16px • Desktop: 12px / 18px • Book

Body Small Strong

Mobile: 10px / 16px • Desktop: 12px / 18px • Regular

Caption Strong

10px / 14px • Uppercase • Regular

Buttons

Primary Buttons

Secondary Buttons

Icon Buttons

Primary

Disabled

Secondary

Disabled

Outlined Icon Buttons

Disabled

Ghost

Disabled

Text Buttons

Checkbox

Checkbox left

Checkbox right

Checkbox Only

Radio

Radio button Right

Toggle

Inputs v1

Error text

Inputs v2

Hint text
Hint text
Hint text
Hint text

Text Boxes

Hint text
0/180
Hint text
11/180
Hint text
180/180
Hint text
0/180

Spacing Scale

spacing-2xs

spacing-xxs

spacing-xs

spacing-2sm

spacing-s

spacing-m

spacing-l

spacing-xl

spacing-xxl

spacing-2xl

spacing-3xl

spacing-4xl

spacing-5xl

Tooltips

This is a tooltip
Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand the meaning, function or alt-text of an element.
This is a tooltip
Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand the meaning, function or alt-text of an element.

Alert Messaging

Title
Description
Title
Description
Green #659731
Accent Green #DEEDD0
Title
Description