Basics

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

Primary #

100
#FFF8D9
200
#FFE166
500
#FFCD00
700
#E5B800
800
#735C00
900
#4C3D00

Light #

100
#737373
200
#8C8C8C
500
#999999
700
#B3B3B3
800
#E5E5E5
900
#FFFFFF

Dark #

100
#666666
200
#4C4C4C
500
#2B2B2B
700
#1A1A1A
800
#151515
900
#000000

Nudes #

100
#F6F3EF
200
#EFEAE4
500
#D6D2CC
700
#8F8C88
800
#6B6966
900
#474543

Success #

100
#E3F0EC
200
#00A772
500
#00875C

Danger #

100
#FFE7E7
200
#D87C6E
500
#CE5947
700
#AF4636

Info #

100
#EDF3FE
200
#4B9BF1
500
#106DD1

Warning #

100
#FFF2DC
200
#EBC484
500
#E4AE56
700
#B97F22

Subs #

1
#8CB3DB
2
#3B52D0
3
#EE4B65
4
#F79D85
5
#A5D0A8
6
#267566
7
#9B8CC0

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.

Spacing #

You can customize the global spacing for padding and margin, top, left, right and bottom.

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.

Breakpoints #

We use breakpoints from xstyled. Default sizes from the core theme are below. (Note: values are taken from this article).

Usage #

Resize screen to change this Box 🌝