Seeds components come with a default theme that provides them with design tokens, and allows you to easily access those tokens as well.

The theme file provides structured access to design tokens in a format that is consistent and easily consumable. You can use theme values with system props, or access the theme object directly from within your own Styled Components.

The theme is broken into categories based on different types of values, like color, space, typography, etc. Tokens can be either semantic or literal.

Semantic vs. literal tokens

Semantic tokens are essentially aliases of other tokens that are assigned to a specific purpose. In the example above, the cta.primary token is meant for the primary call-to-action on a page.

Using semantic values allows us to do things like customize the way our components look app-wide. When considering whether to use a semantic or literal token, consider: would you want the value you’re using to change if we changed the theme? If so, use a semantic token.

Theme reference

Theme values are used in two ways:

1. Values supplied to system props reference the value directly, i.e. <Box m={500} />
2. Values used within Styled Components can access the theme (on the component’s prop object) directly via a key path, i.e. margin: ${props => props.theme.space[500]};

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

Color

Space

Note: All space values are available as negative numbers as well. Simply prepend a hyphen before the value, i.e. <Box margin={-200} /> will give a -4px margin.

Typography

Typography tokens encapsulate both font size and line height values.

Font weight

Border width

Border radius

Box shadow

Easing

Duration

Breakpoints

Breakpoint values are not referenced directly in system props. Check out the system props page for more details on how to use responsive props.

Note: breakpoint values highly depend on the context in which the components are being used. These values are a good starting point, but they should likely be customized for most projects.