How References Work in BaseFrame

A reference is what keeps your design system consistent. Instead of repeating the same hex code in a dozen places, a token can simply point at another token. Change the one it points to, and everything that references it updates automatically.

What a reference looks like

A normal token holds a raw value — a hex color, a pixel size, a font name. A reference token holds the name of another token instead, written in curly braces:

{
  "background": {
    "default": {
      "$value": "{color.neutral.900}",
      "$type": "color"
    }
  }
}

Here background.default doesn't store a color of its own — it borrows the value of color.neutral.900. If you later change color.neutral.900, background.default changes with it. No find-and-replace, no drift.

This is why most design systems are built in two layers:

• —Primitives — the raw palette: every shade, size, and weight.
• —Semantics — meaning-based tokens like background, text, or border that reference the primitives.

You design with the semantics and never touch the raw values directly. When you rebrand, you update the primitive — and every semantic role that points to it follows.

Linking a reference set

References used to only work inside a single token set. Now you can link one set to another, so tokens in one set can reference tokens in a completely separate set. This is what reference sets do.

A common setup:

• —One primitives set — your shared palette, spacing, and type scales. The single source of truth.
• —One or more theme or brand sets — semantic tokens that reference the primitives set.

Because the primitives live in their own set, you maintain them once and reuse them across every brand or theme you build on top.

How to link a set

1. —Open the token set you want to add references to (your semantic or brand set).
2. —Open its actions menu (the ••• button) and choose Reference set.
3. —Search for and select the set you want to reference — usually your primitives set.

That's it. From now on, when you edit a token's value in this set, you can point it at any token in the linked set. Those cross-set references resolve just like references within a single set.

You can also remove the link at any time from the same menu, and you can chain references — a set can reference a set that itself references another — so shared foundations can stack as deep as you need.

Why it cascades

The payoff of references — within a set or across linked sets — is that you edit in one place and the change flows everywhere:

• —Update a primitive, and every semantic token that references it updates.
• —Update your shared primitives set, and every set linked to it updates at once.
• —Export to Figma or any other tool, and the references come along intact — the connection isn't lost when you leave BaseFrame.

References are what turn a list of values into an actual system. Reference sets extend that same idea across your whole library, so one set of foundations can power everything you build.