Style Guide

Typography

Desktop
Mobile
Classes

Filled

Filled

.outlined-text.outline-fill--black

Filled

Filled

.outlined-text.outline-fill--white

Filled

Filled

.outlined-text.outline-fill--white.outline-fill--glow

Outlined

Outlined

.outlined-text

Outlined

Outlined

.outlined-text, .outline-color--white

Outlined

Outlined

.outlined-text, .outline-glow .outline-color--glow

D1

D1

.d1, .d1--mobile

Heading 1

Heading 1

h1, .h1, .h1--mobile

Heading 2

Heading 2

h2, .h2, .h2--mobile

Heading 3

Heading 3

h3, .h3, .h3--mobile

Heading 4

Heading 4

h4, .h4, .h4--mobile
Heading 5
Heading 5
h5, .h5, .h5--mobile

S1

S1

.text-s1, .text-s1--hover
A1
A1
.text-a1, .text-a1--hover
A2
A2
.text-a2, .text-a2--hover

Form Label

Form Label

.text-f1

Form Label Bold

Form Label Bold

.text-f1--bold

Form Label Underline

Form Label Underline

.text-f1--underline

Form Label Active

Form Label Active

.text-f2

N1*

.text-n1

N2*

N2*

.text-n2, .text-n2--mobile

N3*

N3 Bold*

N3 Underline*

.text-n3, .text-n3.bold, .text-n3.underline

N4*

N4* Bold

N4* Underline

.text-n4, .text-n4.bold, .text-n4.underline

B1

B1 Bold

B1 Underline

B1 Strike-Through

.text-b1, .text-b1.bold, .text-b1.underline, .text-b1.strike-through

B2

B2 Bold

B2 Underline

B2 Strike-Through

.text-b2, .text-b2.bold, .text-b2.underline, .text-b2.strike-through

B3

B3 Bold

B3 Underline

B3 Strike-Through

.text-b3, .text-b3.bold, .text-b3.underline, .text-b3.strike-through

Colors

Black
Off Black
White
Dark Grey
Grey
Light Grey
Dolly Pink
Mid Pink
Light Pink
Mid Pink (dark)
Light Pink (dark)
Silver Fill
Silver Outline

Buttons

Button Name
Button UI
Button UI Dark
Disabled Button UI
Disabled Button UI Dark
Primary 1
Primary 2
Secondary 1
Secondary 2
Text Link 1
Text Link 2

Form Elements

Element Name
Element UI
Element UI - Dark
Dropdown
Input
Textarea
Radio Toggle
Checkbox Toggle
Radio Toggle w/text
Checkbox Toggle w/text

Optional body copy here lorem ip ...

Optional body copy here lorem ip ...