Configuration

A CSS Forge config groups design tokens by family. Use the focused token pages for each family's complete schema and examples.

Referencing Variables

Basic Referencing

To reference any variable, use the . notation to navigate through the schema without using .value.

For example, if an object has the following structure :

{
  spacing: {
    custom: {
      size: {
        value: {
          1: "0.25rem",
        },
      },
    },
  },
}

The reference would be : spacing.custom.size.1, not spacing.custom.size.value.1. Motion tokens follow the same rule: motion.duration.ui.press and motion.easing.ui.out.

Referencing Fluid Spacing

To reference fluid spacing, use the @ symbol and the label of the scale; ie: spacing_fluid-base@xs. Do not include the prefix in the reference. The labels follow the following convention :

• 3xs
• 2xs
• xs
• s
• m
• l
• xl
• 2xl
• 3xl

Referencing Fluid Typography

To reference fluid typography, use the @ symbol and the label of the scale; ie: typography_fluid.comicsans@a. Do not include the prefix in the reference. The labels follow the following convention :

• 3xs
• 2xs
• xs
• s
• m
• l
• xl
• 2xl
• 3xl

The pow representation of a step adds a pow segment, as in typography_fluid.comicsans.pow@a, and its inputs and helpers are typography_fluid.comicsans.pow.<name>, such as typography_fluid.comicsans.pow.max-type-scale.