We expose a theme object for our customizable design system. You can easily customize colors, typography, breakpoints, etc to match with your design.
Colors
Customize the color on the theme.colors
object. Colors can be used for color
, borderColor
, backgroundColor
, etc. Example of a color: dark-900
. See more on github
export default {colors: {// ...'primary-500': '#FF0000','dark-100': '#333','dark-900': '#000',custom: '#F12345',// ...},}
Primary
Light
Dark
Black and White
Nudes
Success
Danger
Info
Warning
Subs
Spacing
You can customize the global spacing for padding
and margin
, top
, left
, right
and bottom
.
xxs
0.125rem
(2px)
xs
0.25rem
(4px)
sm
0.5rem
(8px)
md
0.75rem
(12px)
lg
1rem
(16px)
xl
1.5rem
(24px)
xxl
2rem
(32px)
3xl
3rem
(48px)
4xl
4rem
(64px)
5xl
6rem
(96px)
6xl
8rem
(128px)
7xl
12rem
(192px)
Borders
By default, we have a border radius on components. You can remove it by set to 0 the radii borders. You can also configure the width of the border.
none
0
(0px)
sm
0.125rem
(2px)
md
0.25rem
(4px)
lg
0.5rem
(8px)
xl
1rem
(16px)
Breakpoints (screens)
We use screens from xstyled. Default sizes from the core theme are below. (Note: values are taken from this article).
xs
0px
sm
480px
md
736px
lg
980px
xl
1280px
xxl
1440px
3xl
1620px
4xl
1920px
Typography
We use fonts
, fontSizes
, fontWeights
, lineHeights
and letterSpacings
to customize the theme. You should use the Text component with predefined text styles where you can.
font-size
h0
4.0625rem
(65px)
h1
2.8125rem
(45px)
h2
2.25rem
(36px)
h3
1.625rem
(26px)
h4
1.25rem
(20px)
h5
1rem
(16px)
h6
0.875rem
(14px)
lg
1.125rem
(18px)
md
1rem
(16px)
sm
0.875rem
(14px)
xs
0.75rem
(12px)
subtitle-md
0.8125rem
(13px)
subtitle-sm
0.6875rem
(11px)
weight
regular
400px
medium
500px
bold
600px