Principles
The rules the library follows.
Tokens, not values
Every visual value comes from a var(). Three layers: primitive → semantic → component.
Faithful to the token, not the pixel
Line-height and tracking are converted; a sub-pixel difference from Figma is acceptable.
State in data-*
Visual state lives in data-* attributes and CSS drives :hover / :focus-visible / [data-*]. Never a conditional class in the TSX.
Accessible by default
Every interactive has a role, an accessible name, an ARIA state and a visible focus ring. axe passes with no violation.
React Aria for the hard parts
Complex interactives use React Aria Components; simple ones are hand-rolled. No mixing headless philosophies.
The code is the source of truth
After the migration, the code leads. A Figma change is a reviewed manual re-sync, never automatic.