Colors
Primary
Neutral
Beige
Green
Teal
Blue
Violet
Pink
Red
Red Orange
Orange
Yellow
Semantic
Brand
Secondary
Spacing
You can customize the global spacing for padding and margin, top, left, right and bottom.
spacing-0
0
spacing-2
0.125rem
(0)
spacing-3
0.1875rem
(0)
spacing-4
0.25rem
(0)
spacing-8
0.5rem
(0)
spacing-12
0.75rem
(0)
spacing-16
1rem
(0.0625)
spacing-24
1.5rem
(0.0625)
spacing-28
1.75rem
(0.0625)
spacing-32
2rem
(0.125)
spacing-36
2.25rem
(0.125)
spacing-48
3rem
(0.1875)
spacing-64
4rem
(0.25)
spacing-96
6rem
(0.375)
spacing-128
8rem
(0.5)
spacing-192
12rem
(0.75)
spacing-3xl
3rem
(0.1875)
spacing-4xl
4rem
(0.25)
spacing-5xl
6rem
(0.375)
spacing-6xl
8rem
(0.5)
spacing-7xl
12rem
(0.75)
spacing-lg
1rem
(0.0625)
spacing-md
0.75rem
(0)
spacing-sm
0.5rem
(0)
spacing-xl
1.5rem
(0.0625)
spacing-xs
0.25rem
(0)
spacing-xxl
2rem
(0.125)
spacing-xxs
0.125rem
(0)
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.
radius-2xl
1.5rem
(0.0625)
radius-circle
calc(infinity * 1px)
radius-lg
0.5rem
(0)
radius-md
0.25rem
(0)
radius-sm
0.125rem
(0)
radius-xl
1rem
(0.0625)
Breakpoints
Default sizes from the core theme are below. (Note: values are taken from this article).
breakpoint-2xl
1440px
breakpoint-3xl
1620px
breakpoint-4xl
1920px
breakpoint-lg
980px
breakpoint-md
736px
breakpoint-sm
480px
breakpoint-xl
1280px
breakpoint-xs
0px
(0)
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-11
0.6875rem
(0)
font-size-12
0.75rem
(0)
font-size-13
0.8125rem
(0)
font-size-14
0.875rem
(0)
font-size-16
1rem
(0.0625)
font-size-18
1.125rem
(0.0625)
font-size-20
1.25rem
(0.0625)
font-size-24
1.5rem
(0.0625)
font-size-26
1.625rem
(0.0625)
font-size-36
2.25rem
(0.125)
font-size-45
2.8125rem
(0.125)
font-size-65
4.0625rem
(0.25)
font-size-h0
4.0625rem
(0.25)
font-size-h1
2.8125rem
(0.125)
font-size-h2
2.25rem
(0.125)
font-size-h3
1.625rem
(0.0625)
font-size-h4
1.25rem
(0.0625)
font-size-h5
1rem
(0.0625)
font-size-h6
0.875rem
(0)
font-size-lg
1.125rem
(0.0625)
font-size-md
1rem
(0.0625)
font-size-sm
0.875rem
(0)
font-size-subtitle-md
0.8125rem
(0)
font-size-subtitle-sm
0.6875rem
(0)
font-size-xl
1.5rem
(0.0625)
font-size-xs
0.75rem
(0)
font-weight
font-weight-400
400
font-weight-500
500
font-weight-600
600
font-weight-bold
600
font-weight-medium
500
font-weight-regular
400