Build Composite Tokens with Objects

Most design tokens hold a single value: a hex color, a pixel size, a font name. Composite tokens are different — they group multiple related values under one name. A shadow.md token doesn't just hold an offset; it holds an offset, blur, spread, color, and inset flag together. A typography.body token holds font family, size, weight, and line height as a unit.

The W3C DTCG spec supports this through object $value types. BaseFrame uses this pattern for two token categories: typography and elevation.

How composite tokens are structured

A composite token looks like a normal token from the outside — it has a $type, a $value, and lives in the same tree as everything else. The difference is that $value is an object instead of a scalar:

{
  "token": {
    "base": {
      "elevation": {
        "md": {
          "$type": "shadow",
          "$value": {
            "offsetX": "0px",
            "offsetY": "4px",
            "blur": "16px",
            "spread": "0px",
            "color": "rgba(0,0,0,0.24)",
            "inset": false
          }
        }
      }
    }
  }
}

When Style Dictionary transforms this token, it reads the object properties and produces the correct CSS box-shadow shorthand. When Tokens Studio syncs it, Figma receives a shadow effect with each property mapped to its corresponding field.

Typography composites in BaseFrame

BaseFrame's base typography tokens are composite objects at the token level. Each scale step — xs, sm, md, lg, xl, 2xl — is a composite that bundles four properties:

{
  "md": {
    "$type": "typography",
    "$value": {
      "fontFamily": "{token.base.typography.font-family.sans}",
      "fontSize": "{token.base.typography.font-size.md}",
      "fontWeight": "{token.base.typography.font-weight.regular}",
      "lineHeight": "{token.base.typography.line-height.normal}"
    }
  }
}

Notice that each property inside the $value object is itself a reference — it points to a primitive token, not a raw value. This is deliberate. It means you can change your base font size scale and have every typography composite update automatically without touching the composite definitions.

Style Dictionary flattens these into individual CSS custom properties or a utility class map, depending on the transform you configure. Tokens Studio maps them to Figma text styles.

Elevation composites in BaseFrame

The elevation scale follows the same pattern. BaseFrame generates five levels — xs, sm, md, lg, xl — each defined as a shadow composite:

{
  "xs": {
    "$type": "shadow",
    "$value": {
      "offsetX": "0px",
      "offsetY": "1px",
      "blur": "4px",
      "spread": "0px",
      "color": "rgba(0,0,0,0.12)",
      "inset": false
    }
  }
}

In CSS output, this becomes:

--token-shadow-xs: 0px 1px 4px 0px rgba(0,0,0,0.12);

In Figma, Tokens Studio maps it to a drop shadow effect that you can apply directly to frames and components.

Using composites in components

In code, consuming a composite token depends on whether Style Dictionary has expanded it or kept it as a shorthand. For shadows, the CSS variable output is a ready-to-use shorthand:

.card {
  box-shadow: var(--token-shadow-md);
}

For typography, Style Dictionary can either produce individual properties (--token-typography-body-font-size, --token-typography-body-line-height) or a combined shorthand — whichever your transform config specifies.

In Figma, composite tokens map to shared styles rather than individual variables. A typography composite becomes a text style; a shadow composite becomes an effect style. Components bound to these styles update in bulk when the composite value changes.

Why composites matter for consistency

The practical value of a composite token is atomicity. When a designer says "use elevation.md," they mean a specific combination of offset, blur, and color — not a shadow that happens to look similar. Encoding that combination as a single named token eliminates the drift that comes from developers approximating it independently.

BaseFrame's reference token set ships with composites for typography and elevation because those are the two categories where independent property drift causes the most visual inconsistency in production UIs.