Theming

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.

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.

Breakpoints (screens)

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

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

weight