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",
      // ...
      900: "#000",
    },
    custom: "#F12345"
    // ...
  },
}

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

#45BE98

500

#00A772

700

#00875C

Danger #

100

#FFE7E7

200

#D87C6E

500

#CE5947

700

#AF4636

Info #

100

#EDF3FE

200

#9AC7F7

500

#4B9BF1

700

#106DD1

Warning #

100

#FFF2DC

200

#EBC484

500

#E4AE56

700

#B97F22

Subs #

#8CB3DB

#3B52D0

#EE4B65

#F79D85

#A5D0A8

#267566

#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.

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",
    "body1": "1.125rem",
    "body2": "1rem",
    "body3": "0.875rem",
    "body4": "0.75rem",
    "button": "0.75rem",
    "subtitle1": "0.8125rem",
    "subtitle2": "0.6875rem",
    "meta1": "0.875rem",
    "meta2": "0.75rem"
  },
  "defaultLineHeight": 1.15,
  "defaultLetterSpacing": 0,
  "headingLineHeight": 1.2,
  "headingLetterSpacing": 0,
  "lineHeights": {
    "html": 1.15,
    "h0": 1.2,
    "h1": 1.2,
    "h2": 1.2,
    "h3": 1.2,
    "h4": 1.2,
    "h5": 1.2,
    "h6": 1.2,
    "body1": 1.15,
    "body2": 1.15,
    "body3": 1.15,
    "body4": 1.15,
    "subtitle1": 1.2,
    "subtitle2": 1.2,
    "meta1": 1.15,
    "meta2": 1.15
  },
  "fontWeights": {
    "regular": 400,
    "medium": 500,
    "bold": 600
  },
  "letterSpacings": {
    "sm": "0.5px",
    "md": "1px",
    "lg": "2px",
    "html": 0,
    "h0": 0,
    "h1": 0,
    "h2": 0,
    "h3": 0,
    "h4": 0,
    "h5": 0,
    "h6": 0,
    "body1": 0,
    "body2": 0,
    "body3": 0,
    "body4": 0,
    "subtitle1": 0,
    "subtitle2": 0,
    "meta1": 0,
    "meta2": 0
  }
}

Spacing #

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

export default {
  "space": {
    "xxs": "0.375rem",
    "xs": "0.5rem",
    "sm": "0.625rem",
    "md": "0.75rem",
    "lg": "0.9375rem",
    "xl": "1.25rem",
    "xxl": "1.5rem",
    "3xl": "1.875rem",
    "4xl": "2.25rem",
    "5xl": "3.125rem",
    "6xl": "4rem"
  }
}

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": {
    "sm": "4px",
    "md": "6px",
    "lg": "10px"
  },
  "borderWidths": {
    "sm": "1px",
    "md": "2px",
    "lg": "3px"
  }
}

Breakpoints #

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

theme.breakpoints = {
  xs: 0,
  sm: 480,
  md: 736,
  lg: 980,
  xl: 1280
}

Usage #


<Box
  display="flex"
  alignItems="center"
  justifyContent="center"
  textAlign="center"
  color={{ xs: 'light.900', lg: 'dark.900' }}
  fontSize={{ lg: 'h2' }}
  h={{ xs: '10rem', lg: '20rem' }}
  backgroundColor={{ xs: 'sub.1', lg: 'primary.100' }}
>
  Resize screen to change this Box 🌝
</Box>

Upgrade

Customize