Colour system

How the palette is built

One primitive ramp, everything else on top

Only the neutral ramp holds raw greys. Every neutral-derived token — text, surfaces, borders, the secondary button — is declared as a reference into it, exactly as Figma declares it. The ramp inverts between modes, so one unchanged declaration paints two colours:

:root,
[data-mode='dark'] {
  --neutral-900: #f9f9f9;
  --text-typical: var(--neutral-900);
}

[data-mode='light'] {
  --neutral-900: #333333;
  --text-typical: var(--neutral-900);
}

The chips below are filled with the token itself rather than a copy of its value, so toggling the theme in the header repaints them. Printed values have their references resolved per mode, dark first — a swatch reading #f9f9f9 / #333333 is one declaration, not two. Colours Figma stores as literals stay literals here even where two of them happen to match today, so a future divergence cannot hide behind an alias.

Neutral ramp

12 tokens · the primitives

The index counts distance from the surface, not lightness: 900 is the furthest from the page and therefore the text colour in both modes. Base --neutral is the nearest surface — white in light, near-black in dark. Retint these and everything aliased to them moves.

Text

4 tokens

--text-inverse is the label on a solid fill and is near-white in both modes, which is why it is the only one of the four that does not simply follow the ramp.

Surface

6 tokens

Depth 0 is the nearest surface — a card — and Depth 3 the deepest, which is the page behind it. The order is the same in both modes even though the greys invert.

Border

4 tokens

Button

17 tokens

Five families, each with a hover and a pressed value; Button is the only group Figma ships full interaction states for. --button-inactive is not consumed — ALPHA renders a disabled button at 45% opacity rather than swapping its fill.

Primary and status

12 tokens

The brand indigo and the three status hues, for anything that is not a button — a focus ring, a badge, an inline message.

Tooltip

6 tokens

ALPHA ships no tooltip component. These are here because the Figma collection is complete, not because the component is — build one against your own markup for now.

Charts

32 tokens · 16 series

Sixteen categorical series in order, each with a hover. Figma names them after a hue; the name here is the ordinal, because that is what a chart indexes by — and because the hue is not reliable: four of the sixteen are a different colour from the Vivid hue they share a name with, which is why the two groups are declared independently.

Vivid

39 tokens · 13 hues

Base, hover and pressed for each hue, for surfaces that need to be told apart rather than ranked.

Aquarelle

9 tokens

Pale washes for tinted backgrounds — the ghost destructive button hovers onto --aquarelle-red. They are opaque and tuned against Depth 0, so on any other surface they read as a patch rather than a tint.

Indigo

4 tokens

Brand constants, and the only colours identical in both modes.

Theming

Retinting is the supported way to theme ALPHA — override a token, never a component class. Override it in the same two-block shape the package uses: a bare :root rule comes later in the cascade at equal specificity, so it would land on both modes at once.

:root,
[data-mode='dark'] {
  --primary: #0f766e;
}

[data-mode='light'] {
  --primary: #0d6157;
}

Because the semantics alias into the ramp, retinting --neutral-900 alone moves --text-typical, --text-inverse, --tooltip-text and --tooltip-background-inverted with it.

These names are not namespaced — --primary and --chart-1 are ordinary global custom properties, so they match the Figma hand-off exactly and collide with an application that already defines them. If yours does, rename it or scope ALPHA to a subtree.