Default Theme

The default theme tokens in Amplify UI define our base palette, typography, and sizing used throughout the design system.

Feedback

Amplify UI follows a consistent pattern when defining our default tokens for properties such as color, font size, border radius, and more. In addition to the reference here, you can browse our default tokens and their corresponding types on GitHub.

Explore theme tokens

Colors

Tokens that define our default color palette

Typography

Font families, font sizes, line heights and more

Sizes

Tokens for spacing, border widths and radii

Referencing default theme tokens

The overall structure of the default theme object gives us a clue as to how to reference each token. If we look at the top level of the object, we can see how the tokens are separated by properties:

*/
interface BaseTokens<Output extends OutputVariantKey = unknown> {
  borderWidths?: BorderWidths<Output>;
  colors?: Colors<Output>;
  fonts?: Fonts<Output>;
  fontSizes?: FontSizes<Output>;
  fontWeights?: FontWeights<Output>;
  lineHeights?: LineHeights<Output>;
  opacities?: Opacities<Output>;
  outlineOffsets?: OutlineOffsets<Output>;
  outlineWidths?: OutlineWidths<Output>;
  radii?: Radii<Output>;
  shadows?: Shadows<Output>;
  space?: Space<Output>;
  time?: Time<Output>;
  transforms?: Transforms<Output>;
}

If we use space as an example, we'd discover its token definition looks similar to the following (shortened for example):

  space: {
    xxs: {},
    xs: {},
    small: {
      value: "0.75rem"
    }
    medium: {},
    large: {},
  }

All of our tokens follow this pattern: a top level namespace that is further defined by a scale, each which has their own unique value. In the case of our space design tokens, that scale is based on a size: small, medium, large, etc. Our color tokens, on the other hand, are further defined by hue (red, blue, yellow, etc), and then by a numerical scale based on lightness (10-100).

The space token definition also gives us an idea of how the CSS custom properties associated with each token are named. Amplify UI uses StyleDictionary to generate the associated CSS custom properties for each token. For the small space token, this would be --amplify-space-small and you can use it in your stylesheet as:

.my-component {
  margin-bottom: var(--amplify-space-small);
}