| Spacing | Value | Examples | Usage |
|---|---|---|---|
spacing-none
|
0
|
||
spacing-quarter
|
0.25rem
|
||
spacing-half
|
0.5rem
|
||
spacing-tight
|
0.75rem
|
||
spacing-base
|
1rem
|
||
spacing-loose
|
1.5rem
|
||
spacing-double
|
2rem
|
||
spacing-triple
|
3rem
|
||
spacing-quadruple
|
4rem
|
| Font Weights | Value | Examples | Usage |
|---|---|---|---|
font-weight-light
|
300
|
The quick brown fox jumps over the lazy dog.
|
|
font-weight-regular
|
400
|
The quick brown fox jumps over the lazy dog.
|
|
font-weight-demi
|
600
|
The quick brown fox jumps over the lazy dog.
|
|
font-weight-bold
|
700
|
The quick brown fox jumps over the lazy dog.
|
| Font Sizes | Value | Examples | Usage |
|---|---|---|---|
font-size-1
|
5rem
|
The quick brown fox jumps over the lazy dog.
|
|
font-size-2
|
3rem
|
The quick brown fox jumps over the lazy dog.
|
|
font-size-3
|
2rem
|
The quick brown fox jumps over the lazy dog.
|
|
font-size-4
|
1.5rem
|
The quick brown fox jumps over the lazy dog.
|
|
font-size-5
|
1rem
|
The quick brown fox jumps over the lazy dog.
|
|
font-size-6
|
0.75rem
|
The quick brown fox jumps over the lazy dog.
|
|
font-size-7
|
0.5rem
|
The quick brown fox jumps over the lazy dog.
|
|
font-size-base
|
16px
|
The quick brown fox jumps over the lazy dog.
|
| Line Heights | Value | Examples | Usage |
|---|---|---|---|
line-height-base
|
1.5
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
id feugiat at, venenatis quis erat.
|
|
line-height-large-text
|
1.25
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
id feugiat at, venenatis quis erat.
|
| Font Families | Value | Examples | Usage |
|---|---|---|---|
font-family-monospaced
|
'SFMono-Regular', Consolas, 'Fira Sans', 'Liberation Mono', Menlo, 'Courier New', Courier, monospace
|
The quick brown fox jumps over the lazy dog.
|
|
font-family-sans-serif
|
'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
|
The quick brown fox jumps over the lazy dog.
|
| Border Radii | Value | Examples | Usage |
|---|---|---|---|
border-radius-base
|
0.5rem
|
||
border-radius-circle
|
50%
|
||
border-radius-small
|
0.25rem
|
| Background Colors | Value | Examples | Usage |
|---|---|---|---|
color-blue
|
#004c99
|
||
color-blue-dark
|
#002447
|
||
color-blue-light
|
#006bd6
|
||
color-blue-lighter
|
#258aef
|
||
color-blue-lightest
|
#64adf7
|
||
color-gold
|
#fcba36
|
||
color-gold-dark
|
#fa0
|
||
color-gold-darker
|
#cc8100
|
||
color-gold-light
|
#fdd077
|
||
color-gold-lighter
|
#fee2aa
|
||
color-green
|
#06893a
|
||
color-green-dark
|
#036329
|
||
color-green-darker
|
#013c19
|
||
color-green-light
|
#19a953
|
||
color-green-lighter
|
#29d66e
|
||
color-grey
|
#b8c2cc
|
||
color-grey-dark
|
#8b99a7
|
||
color-grey-darker
|
#657586
|
||
color-grey-light
|
#d6dbe1
|
||
color-grey-lighter
|
#e7ebee
|
||
color-ice
|
#f2f5f7
|
||
color-magenta
|
#e60073
|
||
color-magenta-dark
|
#9e004f
|
||
color-magenta-darker
|
#520029
|
||
color-magenta-light
|
#fa61ad
|
||
color-magenta-lighter
|
#fab2d6
|
||
color-night
|
#212b36
|
||
color-night-dark
|
#0e1216
|
||
color-night-light
|
#405468
|
||
color-night-lighter
|
#627a93
|
||
color-night-lightest
|
#97a8ba
|
||
color-red
|
#ea1010
|
||
color-red-dark
|
#940a0a
|
||
color-red-darker
|
#4c0505
|
||
color-red-light
|
#f46666
|
||
color-red-lighter
|
#fab3b3
|
||
color-turquoise
|
#00b4f0
|
||
color-turquoise-dark
|
#007aa3
|
||
color-turquoise-darker
|
#00455c
|
||
color-turquoise-light
|
#47caf5
|
||
color-turquoise-lighter
|
#94e0f9
|
||
color-white
|
#fff
|
| Box Shadows | Value | Examples | Usage |
|---|---|---|---|
shadow-base
|
0 0.25rem 1rem
|
Shadow values are intended to be used with colors added to them | |
shadow-border
|
0 0 1px
|
Shadow values are intended to be used with colors added to them | |
shadow-heavy
|
0 0.5rem 1.5rem 0.25rem
|
Shadow values are intended to be used with colors added to them | |
shadow-light
|
0 0.25rem 1rem
|
Shadow values are intended to be used with colors added to them |
| Time | Value | Examples | Usage |
|---|---|---|---|
duration-none
|
0
|
||
duration-fast
|
100ms
|
||
duration-base
|
200ms
|
||
duration-slow
|
300ms
|
||
duration-slower
|
400ms
|
||
duration-slowest
|
500ms
|
| Easing | Value | Examples | Usage |
|---|---|---|---|
easing-anticipate
|
cubic-bezier(0.38, -0.4, 0.88, 0.65)
|
||
easing-base
|
cubic-bezier(0.64, 0, 0.35, 1)
|
||
easing-ease-in
|
cubic-bezier(0.36, 0, 1, 1)
|
||
easing-ease-out
|
cubic-bezier(0, 0, 0.42, 1)
|
||
easing-excite
|
cubic-bezier(0.18, 0.67, 0.6, 1.22)
|
||
easing-overshoot
|
cubic-bezier(0.07, 0.28, 0.32, 1.22)
|