Style Guide

Typography

Font Families

Aa
sans
Aa
serif
Aa
mono
Aa
body
Aa
heading
Aa
monospace

Font Sizes

4.5rem
4rem
3rem
2.25rem
1.875rem
1.5rem
1.375rem
1.25rem
1rem
.875rem

Font Weights

100
hairline
200
thin
300
light
400
normal
500
medium
600
semibold
700
bold
800
extrabold
900
black
400
body
700
heading

Line Heights

.75rem
3
1rem
4
1.25rem
5
1.5rem
6
1.75rem
7
2rem
8
2.25rem
9
2.5rem
10
1
none
1.25
tight
1.375
snug
1.5
normal
1.625
relaxed
2
loose
1.625
body
1.25
heading

Colors

transparent
black
white
slate.0
slate.1
slate.2
slate.3
slate.4
slate.5
slate.6
slate.7
slate.8
slate.9
gray.0
gray.1
gray.2
gray.3
gray.4
gray.5
gray.6
gray.7
gray.8
gray.9
zinc.0
zinc.1
zinc.2
zinc.3
zinc.4
zinc.5
zinc.6
zinc.7
zinc.8
zinc.9
neutral.0
neutral.1
neutral.2
neutral.3
neutral.4
neutral.5
neutral.6
neutral.7
neutral.8
neutral.9
stone.0
stone.1
stone.2
stone.3
stone.4
stone.5
stone.6
stone.7
stone.8
stone.9
red.0
red.1
red.2
red.3
red.4
red.5
red.6
red.7
red.8
red.9
orange.0
orange.1
orange.2
orange.3
orange.4
orange.5
orange.6
orange.7
orange.8
orange.9
amber.0
amber.1
amber.2
amber.3
amber.4
amber.5
amber.6
amber.7
amber.8
amber.9
yellow.0
yellow.1
yellow.2
yellow.3
yellow.4
yellow.5
yellow.6
yellow.7
yellow.8
yellow.9
lime.0
lime.1
lime.2
lime.3
lime.4
lime.5
lime.6
lime.7
lime.8
lime.9
green.0
green.1
green.2
green.3
green.4
green.5
green.6
green.7
green.8
green.9
emerald.0
emerald.1
emerald.2
emerald.3
emerald.4
emerald.5
emerald.6
emerald.7
emerald.8
emerald.9
teal.0
teal.1
teal.2
teal.3
teal.4
teal.5
teal.6
teal.7
teal.8
teal.9
cyan.0
cyan.1
cyan.2
cyan.3
cyan.4
cyan.5
cyan.6
cyan.7
cyan.8
cyan.9
sky.0
sky.1
sky.2
sky.3
sky.4
sky.5
sky.6
sky.7
sky.8
sky.9
blue.0
blue.1
blue.2
blue.3
blue.4
blue.5
blue.6
blue.7
blue.8
blue.9
indigo.0
indigo.1
indigo.2
indigo.3
indigo.4
indigo.5
indigo.6
indigo.7
indigo.8
indigo.9
violet.0
violet.1
violet.2
violet.3
violet.4
violet.5
violet.6
violet.7
violet.8
violet.9
purple.0
purple.1
purple.2
purple.3
purple.4
purple.5
purple.6
purple.7
purple.8
purple.9
fuchsia.0
fuchsia.1
fuchsia.2
fuchsia.3
fuchsia.4
fuchsia.5
fuchsia.6
fuchsia.7
fuchsia.8
fuchsia.9
pink.0
pink.1
pink.2
pink.3
pink.4
pink.5
pink.6
pink.7
pink.8
pink.9
rose.0
rose.1
rose.2
rose.3
rose.4
rose.5
rose.6
rose.7
rose.8
rose.9
grayDark
text
background
primary
primaryHover
secondary
muted
success
info
warning
danger
light
dark
textMuted
accent
panel-background
panel-divider
panel-highlight
secondaryGradient
tableText