Colors

Colors can be used directly on some of our components that expect a color as a prop. Colors Design Guidelines.

Box example

Edit the code below to see your changes live!

You can also use the colors directly from the theme to style other components, for example:

StyledBox Example

Edit the code below to see your changes live!

Available Colors

white

brand

secondary10

secondary20

secondary30

secondary40 / secondary

secondary50

secondary60

secondary70

primary10

primary20

primary30

primary40 / primary

primary50

primary60

primary70

danger10

danger20

danger30

danger40 / danger

danger50

danger60

danger70

warning10

warning20

warning30

warning40 / warning

warning50

warning60

warning70

success10

success20

success30

success40 / success

success50

success60

success70

Beta