Cores
Arquitetura de tokens em três camadas: valores hex brutos → papéis semânticos → atribuições específicas por componente. Fundo claro com primary green (#2ECE78) e accent teal (#00B4AE).
Primitive
Camada 1 · hex bruto · nunca usado diretamente em componentes
- Camada
- 1 · Primitive
- Total
- 15 valores brutos
- Formato
- Hex (sRGB)
- Definido em
- tokens.css :root
Semantic
Camada 2 · aliases de significado · use estes em layouts
- Camada
- 2 · Semantic
- Total
- 10 aliases
- Formato
- var(--color-*)
- Dark mode
- Inverte nesta camada
Component
Camada 3 · baseado em papéis · usado dentro dos estilos de componente
- Camada
- 3 · Component
- Total
- 6 tokens
- Formato
- var(--color-*)
- Inclui
- Preenchimentos de marca, estados de feedback
Tints Translúcidos
Camada 3 · específico do kiosk · semitransparente
Numpad
Surfaces on-dark
Tints de recess & shadow
Tints de success
Tints de accent
Tints de feedback
- Camada
- 3 · Específico do kiosk
- Total
- 31 tokens · 6 famílias
- Nomenclatura
- Por intenção, não por número de alpha
- Referência
- A Regra Semantic-Alpha (DESIGN.md)