Web tokens

All values are exposed as CSS variables : a value is never hardcoded in a project. Names follow the Figma collection, so a variable renamed in the library shows up identically in the CSS. The visual detail of each ramp lives under Design language → Colors; this page lists the role aliases — the ones to use in code.

Colors

The Figma name maps mechanically to a CSS variable : Palette/Neural/900 becomes --neural-900. Use role aliases rather than raw ramp steps : they survive a palette change.

AliasValueUsage
--text-strong --neural-900 Headings
--text-body --neural-700 Body text
--text-muted --neural-600 Secondary text
--surface-page #F8F8F8 Page background
--surface-sunken #EFF2F5 Sunken background, disabled
--border-default #D5D9DD Default border
--border-focus --blue-600 Focus ring
--action-primary-bg --neural-900 Primary button
--text-error --red-600 Error, destructive
--text-success --green-800 Success