Buttons
btn
Basic buttonbtn--large
Large buttonbtn--primary
Primary buttonColors
black
black
Used for headers and body text
white
white
Sometimes used when text overlays a colored background
gray-lighter
gray-lighter
gray-light
gray-light
gray
gray
Used for subjacent text
gray-dark
gray-dark
gray-darker
gray-darker
brand-color-1
brand-color-1
Primary color. Used to indicate the most important part of a page
brand-color-2
brand-color-2
Secondary color
negative
negative
Used for indicating negative values and actions
positive
positive
Used for indicating positive values and actions
mark
mark
Used for form notesForms
Glyphs
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
- M
- N
- O
- P
- Q
- R
- S
- T
- U
- V
- W
- X
- Y
- Z
Uppercase
- a
- b
- c
- d
- e
- f
- g
- h
- i
- j
- k
- l
- m
- n
- o
- p
- q
- r
- s
- t
- u
- v
- w
- x
- y
- z
Lowercase
- 0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
Numbers
- ↑
- ↗
- →
- ↘
- ↓
- ↙
- ←
- ↖
- ↔
- ↕
- ↵
Arrows
Icons
Brand
System
Icons
Arrows
Check / radio
Icons
Typography
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem laboriosam inventore, in veniam sequi alias esse repudiandae omnis quaerat a cumque quos quia nihil obcaecati repellat atque harum neque pariatur
p
Basic paragrpah
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
h1
Heading 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
h2
Heading 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
h3
Heading 3“Lorem ipsum dolor sit amet, consectetur adipisicing elit.” Citation