Skip to content

Color draft v3.0.0

The palettes the system draws from and the mapped color roles every component paints with, in every mode: the Figma library's colors, as they are.

The color tokens are the Figma library's three color collections, recreated with the same paths (made valid), values and aliases: Colors / Base, the raw palettes; Colors / Palette Switch, the neutral ramp the roles read (ash today); Colors / Mapped, the roles, in a light and a dark mode. Nobody paints with a palette step directly: components alias the mapped roles (global.bg, global.text, global.icon, global.border), so dark mode, and later another neutral palette, change in one place. The Figma library's errors and limitations are kept on purpose, as the starting point the system evolves from; the few colors the design system adds live apart, in tokens/additions/.

Decisions

From decisions in packages/components/specs/foundations/color.spec.json, newest first. Every active decision is implemented by the spec, the semantic tokens and the components following the foundation.

Color

  • The color tokens are the Figma library's Colors / Base, Colors / Palette Switch (ash) and Colors / Mapped (light and dark), recreated with the same paths made valid, the same values and the same aliases, errors and limitations included. The design system adds only color.transparent and the focus ring color, kept apart in tokens/additions/.

    One vocabulary: the current state mixed the repository's first decisions with tokens partly taken from the Figma library, which made every decision hard to discuss. The Figma library as it is becomes the starting point the system evolves from.

    figma-library-colors · 2026-10-02 · v3.0.0 · replaces level-borderssurface-levels-light-alternatesurface-levels

    global.*neutral.*light-switch.*dark-switch.*brand.*functional.*extended.*branded-extended.*brand-identity.*ai.*dataviz.*color.*

Superseded (3)

  • Borders follow the surface levels in three families: edge (the outline around a surface: light ash 200 on levels 0 and 2, ash 300 on levels 1 and 3 and sunken; dark ash 800, 700, 600, 500 from level 0 to 3, ash 700 on sunken), on-level (lines painted on a surface: light ash 100 on levels 0 and 2, ash 200 on levels 1 and 3; dark ash 600, 500, 400, 300 from level 0 to 3) and blend (the surface color of each level). Edges alone have states, shared by every level: hover light ash 500, dark ash 500; active light ash 900, dark ash 100. color.border.default is removed; color.border.strong stays.

    level-borders · 2026-10-01 · v2.0.0 · replaced by figma-library-colors

  • In light mode the surface levels alternate between ash 25 (levels 0 and 2) and ash 50 (levels 1 and 3), and sunken is ash 50. In dark mode they climb toward lighter steps: ash 900, 800, 700 and 600, and sunken is ash 975, a new step darker than 950.

    surface-levels-light-alternate · 2026-10-01 · v1.0.0 · replaced by figma-library-colors

  • Surfaces are numbered levels: color.surface.level.0 (the page) to color.surface.level.3 (the highest), plus color.surface.sunken, a plane recessed below the page. They replace color.surface.default (now level 0) and color.surface.subtle (now level 1).

    surface-levels · 2026-10-01 · v1.0.0 · replaced by figma-library-colors