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!

<Box backgroundColor="secondary20" padding="medium">
  Box example
</Box>

<Box backgroundColor="secondary20" padding="medium">
  Box example
</Box>

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!

function Example() {
  const StyledBox = styled(Box)(({ theme }) => ({
    backgroundColor: theme.colors.secondary20,
    padding: theme.spacing.medium,
  }));

  return <StyledBox>StyledBox Example</StyledBox>;
}

function Example() {
  const StyledBox = styled(Box)(({ theme }) => ({
    backgroundColor: theme.colors.secondary20,
    padding: theme.spacing.medium,
  }));
  return <StyledBox>StyledBox Example</StyledBox>;
}

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

Introduction

Foundations

Layout

Actions & Inputs

Status & Feedback

Utilities

Colors

Available Colors