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
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
Form Elements
Element Name
Element UI
Element UI - Dark
Dropdown
Label
Label
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 ...