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

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 🌝