Theme Tokens

Variables for visual consistency across platforms.

Usage

Theme tokens are used in two ways:

Values supplied to system props reference the value directly.

<Box m={6} />

Values used within Styled Components can access the theme (on the component’s prop object) directly via a key path:

const styledDiv = styled.div`
  margin: ${(props) => props.theme.space[6]};
`

All Theme Tokens

The following tables show both the system prop values and the key paths.

coming soon!