F2 · Fundamentos
Tokens
Decisões de design codificadas como propriedades CSS. Toda cor, tamanho, raio, sombra e duração consome a camada de tokens. Base de fonte: 62.5% (1rem = 10px).
Paleta da marca
| Token | Hex | Função |
|---|---|---|
--brand-accent | #00A994 | Verde-IA · cor de assinatura. |
--brand-ink | #1A1A1D | Tinta institucional. |
--brand-paper | #FFFFFF | Papel. |
Escala de acento
Ver cores completas em F4.3 Cores.
| Token | Hex | Estado |
|---|---|---|
--accent-wash | #E6F7F4 | Lavagem |
--accent-soft | #B8E8E0 | Soft |
--accent-line | #66CFC1 | Traço sobre escuro |
--accent-base | #00A994 | Base |
--accent-hover | #008C7A | Hover |
--accent-pressed | #006F60 | Pressed |
--accent-archive | #003D34 | Arquivo |
Neutros
| Token | Hex |
|---|---|
--n-snow | #FAFAFB |
--n-paper | #FFFFFF |
--n-bone | #F2F2F4 |
--n-fog | #E5E5E8 |
--n-mist | #CFCFD3 |
--n-stone | #93939A |
--n-graphite | #5C5C63 |
--n-char | #2B2B30 |
--n-ink | #1A1A1D |
--n-void | #0E0E10 |
Feedback semântico
| Token | Hex | Uso |
|---|---|---|
--sem-success | #1F8A5B | Confirmação |
--sem-warning | #B07A12 | Atenção |
--sem-danger | #B23A2A | Erro |
--sem-info | #2A6FDB | Informativo |
Spacing, radii, motion
Detalhamento por subseção em F3 · Fundações.