Colors
Primary
Neutral
Beige
Green
Teal
Blue
Violet
Pink
Red
Red Orange
Orange
Yellow
Semantic
Background brand primary
Background brand secondary
Spacing
You can customize the global spacing for padding and margin, top, left, right and bottom.
spacing-2
2px
spacing-4
4px
spacing-8
8px
spacing-12
12px
spacing-16
16px
spacing-24
24px
spacing-32
32px
spacing-48
48px
spacing-64
64px
spacing-96
96px
spacing-128
128px
spacing-192
192px
Border radius
By default, we set a border radius on components. Set the radii borders to 0 if you don't like this default. You can also configure the border width.
Breakpoint (screens)
We use values taken from this article.
Typography
We use font, font-size, font-weight, line-height and letter-spacing to customize the theme. You should use the Text component with predefined text styles where you can.
font-size
font-size-12
12px
font-size-14
14px
font-size-16
16px
font-size-18
18px
font-size-20
20px
font-size-24
24px
font-size-32
32px
font-size-36
36px
font-size-48
48px
font-size-60
60px
font-size-72
72px