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"
    // ...
  },
}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

#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

#8CB3DB

#3B52D0

#EE4B65

#F79D85

#A5D0A8

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

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
  }
}

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"
  }
}

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"
  }
}

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"
  }
}

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
}

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

Usage

Resize screen to change this Box 🌝

Made with by