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 #
Light #
Dark #
Nudes #
Success #
Danger #
Info #
Warning #
Subs #
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 #
<Boxdisplay="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>