Princípios
As regras que a biblioteca segue.
Tokens, não valores
Todo valor visual vem de um var(). Três camadas: primitivo → semântico → componente.
Fiel ao token, não ao pixel
Entrelinha e tracking são convertidos; diferença sub-pixel em relação ao Figma é aceitável.
Estado em data-*
O estado visual vai em data-* e o CSS dirige :hover / :focus-visible / [data-*]. Nunca uma classe condicional no TSX.
Acessível por padrão
Todo interativo tem papel, nome acessível, estado ARIA e foco visível. axe passa sem violação.
React Aria para o que é difícil
Interativos complexos usam React Aria Components; os simples são hand-roll. Sem misturar filosofias headless.
O código é a fonte da verdade
Depois da migração, o código manda. Mudança no Figma é re-sync manual revisado, nunca automático.