Colors
Ten primitive ramps feed 159 semantic roles across light and dark. Bind a component to the role and the value follows the mode, the platform and the code.
Overview
Foundations are the raw color values that power the entire system. Think of them as your source of truth: every token, every component color, and every light and dark mode mapping traces back to a foundation variable.
Each hue follows a consistent 50 to 950 scale, giving you 11 shades from near-white to near-black. Gray adds a 0 step and a 150 step, so it carries 13. The naming is predictable: blue-500 is always the midpoint, blue-50 is the lightest tint, blue-950 is the deepest shade. Every hue uses the same logic, so once you learn one, you know them all.
The 150 step is a hairline surface, and the overview board in the Figma file does not draw it, so the board shows 12 gray tiles where this page shows 13. The variables are the source and they carry 13. Read from the file on 8 September 2026. Every hex, step and alias on this page came from that read.
Gray
Blue
Red
Orange
Yellow
Green
Purple
Sky
Pink
Teal
Alpha Colors
Each tile is painted over a split ground, white on the left and static-black-950 on the right, so a translucent value reads translucent against both. Beside the nine hues the file carries four neutral alpha sets: black and gray at 10, 16 and 24 percent, white also at 72, 88 and 92, gray-900 at 55, 72 and 88. They back the glass layers and the tinted status fills.
Semantic roles
A role says what a colour is for, so the decision gets made once and every component inherits it. Reach for a role by its job, never by its hue. Each swatch is cut on the diagonal: Light above the cut, Dark below it. Where a role holds the same value in both modes the cut disappears, and that is the correct reading.
Grouped the way the Figma collection is grouped. Each status family also carries a light-200, a lighter-50 and a dark-950 step; the tinted pair is drawn under Modes. The iOS and Material 3 mirrors belong to the Platform Bridge page, not here.
Modes
Color Tokens carries two modes, Light and Dark. Foundations carries one. A role does not change its value in Dark, it changes which primitive it points at. text/strong-950 points at gray/950 in Light and at gray/0 in Dark, so the token inverts on its own and no component needs a dark variant.
One asymmetry is worth knowing. In Light the light-200 and lighter-50 steps of a status family alias solid ramp steps, 200 and 50. In Dark they alias alpha-24 and alpha-16 of the same hue. A tinted surface therefore stays translucent on a dark ground instead of turning into a solid pastel block. That is deliberate. It is why a soft error banner reads as a tint in Dark and not as a slab.
Four of the ten status families. The same pattern runs through away, feature, highlighted, stable, verified and faded.
Tokens
The Appetite semantic set, resolved. The small line under each hex names what the value lands on: a Foundations step, an alpha of one, direct where the role holds a raw hex and a ramp edit will not reach it, or fixed value where the role must never switch. Copy the token name, never the hex.
A value carrying a percentage is an alpha role, drawn over the ground it sits on: white in Light, near black in Dark.