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

export default {
  colors: {
    // ...
    'primary-500': "#FF0000",
    'dark-100': "#333",
    'dark-900': "#000",
    custom: "#F12345",
    // ...
  },
}

Primary #

primary-100#FFF8D9

primary-200#FFE166

primary-500#FFCD00

primary-600#E5B800

primary-700#997B00

primary-800#735C00

primary-900#4C3D00

Light #

light-100rgba(255, 255, 255, 0.1)

light-200rgba(255, 255, 255, 0.17)

light-400rgba(255, 255, 255, 0.4)

light-500rgba(255, 255, 255, 0.55)

light-700rgba(255, 255, 255, 0.7)

light-900rgba(255, 255, 255, 1)

Dark #

dark-100rgba(0, 0, 0, 0.1)

dark-200rgba(0, 0, 0, 0.17)

dark-400rgba(0, 0, 0, 0.4)

dark-500rgba(0, 0, 0, 0.55)

dark-700rgba(0, 0, 0, 0.7)

dark-900rgba(0, 0, 0, 1)

Black and White #

blackdark-900

whitelight-900

Nudes #

nude-100#F6F3EF

nude-200#EFEAE4

nude-400#D6D2CC

nude-600#8F8C88

nude-700#6B6966

nude-900#474543

Success #

success-100#E3F0EC

success-200#99DCC7

success-300#45BE98

success-400#00A772

success-500#00875C

Danger #

danger-100#FFE7E7

danger-200#EBBDB5

danger-300#D87C6E

danger-400#CE5947

danger-500#AF4636

Info #

info-100#EDF3FE

info-200#B7D7F9

info-300#9AC7F7

info-400#4B9BF1

info-500#106DD1

Warning #

warning-100#FFF2DC

warning-200#F4DFBB

warning-300#EBC484

warning-400#E4AE56

warning-500#B97F22

Subs #

sub-1#8CB3DB

sub-2#3B52D0

sub-3#EE4B65

sub-4#F79D85

sub-5#A5D0A8

sub-6#267566

sub-7#9B8CC0

Spacing #

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

Name	Space	Pixel
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

export default {
  "space": {
    "xxs": "0.125rem",
    "xs": "0.25rem",
    "sm": "0.5rem",
    "md": "0.75rem",
    "lg": "1rem",
    "xl": "1.5rem",
    "xxl": "2rem",
    "3xl": "3rem",
    "4xl": "4rem",
    "5xl": "6rem",
    "6xl": "8rem",
    "7xl": "12rem"
  }
}

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.

export default {
  "radii": {
    "none": "0",
    "sm": "0.125rem",
    "md": "0.25rem",
    "lg": "0.5rem",
    "xl": "1rem"
  },
  "borderWidths": {
    "sm": "1px",
    "md": "2px",
    "lg": "3px"
  }
}

Breakpoints (screens) #

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

export default {
  "screens": {
    "xs": 0,
    "sm": 480,
    "md": 736,
    "lg": 980,
    "xl": 1280,
    "xxl": 1440,
    "3xl": 1620,
    "4xl": 1920
  }
}

Usage #

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.

export default {
  "fonts": {
    "texts": "work-sans, sans-serif",
    "headings": "welcome-font, sans-serif",
    "icons": "welcome-icon-font"
  },
  "fontSizes": {
    "h0": "4.0625rem",
    "h1": "2.8125rem",
    "h2": "2.25rem",
    "h3": "1.625rem",
    "h4": "1.25rem",
    "h5": "1rem",
    "h6": "0.875rem",
    "lg": "1.125rem",
    "md": "1rem",
    "sm": "0.875rem",
    "xs": "0.75rem",
    "subtitle-md": "0.8125rem",
    "subtitle-sm": "0.6875rem"
  },
  "defaultLineHeight": 1.15,
  "defaultLetterSpacing": "-0.019rem",
  "lineHeights": {
    "html": 1.15,
    "h0": "4.5rem",
    "h1": "3rem",
    "h2": "2.5rem",
    "h3": "2rem",
    "h4": "1.5rem",
    "h5": "1.125rem",
    "h6": "1rem",
    "lg": "1.5rem",
    "md": "1.125rem",
    "sm": "1.125rem",
    "xs": "0.875rem",
    "subtitle-md": 1.15,
    "subtitle-sm": 1.15
  },
  "fontWeights": {
    "regular": 400,
    "medium": 500,
    "bold": 600
  },
  "letterSpacings": {
    "html": "-0.019rem",
    "h0": "-0.10625rem",
    "h1": "-0.075rem",
    "h2": "-0.0625rem",
    "h3": "-0.05625rem",
    "h4": "-0.0375rem",
    "h5": "-0.03125rem",
    "h6": "-0.03125rem",
    "lg": "-0.019rem",
    "md": "-0.019rem",
    "sm": "-0.019rem",
    "xs": "-0.0125rem",
    "subtitle-md": "-0.0125rem",
    "subtitle-sm": "-0.0125rem"
  }
}

Upgrade

Customize