Foundations · Color

Foundations

Color

Four tiers, mirroring the Figma library. A tier only references the tier directly above it. Primitives never bind to a semantic token directly — the alias layer sits between them so a rebrand, white-label, or accessibility correction is a one-place change.

Raw palette values. Theme-agnostic. Never referenced directly by a component — only by the alias layer above.

Blue

--blue-50
--blue-100
--blue-200
--blue-300
--blue-400
--blue-500
--blue-600
--blue-700
--blue-800
--blue-900
--blue-950

Grey

--grey-50
--grey-100
--grey-200
--grey-300
--grey-400
--grey-500
--grey-550
--grey-600
--grey-700
--grey-800
--grey-900
--grey-950