Marca
Tokens de marca — primária e secundária para ações e identidade.
Cada token aponta para uma paleta em Colors. Regras gerais no hub de Tokens.
Boas Práticas
Quando usar
Ações principais e CTAs com `--ui-primary` (ou variantes alpha).
Apoio visual e chips com `--ui-secondary`.
Hover e foco com tokens alpha (`--ui-primary-25`, `--ui-primary-10`).
Quando não usar
HEX ou rgb soltos no lugar dos tokens de marca.
Opacidade manual quando já existe token alpha.
Secundária como substituto da primária em ações principais.
Tokens
Tokens
| Token | Light | Dark |
|---|---|---|
| --ui-primary | UIColors/ME brand/500 | UIColors/ME brand/400 |
| --ui-color-primary-600 | UIColors/ME brand/600 | UIColors/ME brand/300 |
| --ui-secondary | secondary-500 | secondary-400 |
| --ui-color-secondary-600 | secondary-600 | secondary-300 |
Alpha
| Token | Light | Dark |
|---|---|---|
| --ui-primary-90 | alpha/500-90 | alpha/400-90 |
| --ui-primary-75 | alpha/500-75 | alpha/400-75 |
| --ui-primary-50 | alpha/500-50 | alpha/400-50 |
| --ui-primary-25 | alpha/500-25 | alpha/400-25 |
| --ui-primary-20 | alpha/500-20 | alpha/400-20 |
| --ui-primary-15 | alpha/500-15 | alpha/400-15 |
| --ui-primary-10 | alpha/500-10 | alpha/400-10 |
| --ui-secondary-90 | alpha/500-90 | alpha/400-90 |
| --ui-secondary-75 | alpha/500-75 | alpha/400-75 |
| --ui-secondary-50 | alpha/500-50 | alpha/400-50 |
| --ui-secondary-25 | alpha/500-25 | alpha/400-25 |
| --ui-secondary-20 | alpha/500-20 | alpha/400-20 |
| --ui-secondary-15 | alpha/500-15 | alpha/400-15 |
| --ui-secondary-10 | alpha/500-10 | alpha/400-10 |
Guia de decisão
| Contexto | Token recomendado |
|---|---|
| CTAs e botões de ação principal | --ui-primary |
| Fundo sutil de hover / foco sobre primária | --ui-primary-10 ou --ui-primary-25 |
| Chip, badge e elementos de apoio | --ui-secondary |
| Fundo sutil de hover / foco sobre secundária | --ui-secondary-10 ou --ui-secondary-25 |
| Estado pressed / tom mais forte | --ui-color-primary-600 |
Pareamentos recomendados
| Contexto | Fundo | Texto / ícone |
|---|---|---|
| Botão primário (solid) | --ui-primary | --ui-text-inverted |
| Hover de botão outline primary | --ui-primary-10 | --ui-primary |
| Chip / badge de marca ativo | --ui-primary-25 | --ui-primary |
| Item ativo em navegação | --ui-primary-10 | --ui-primary |
| Botão secondary (solid) | --ui-secondary | --ui-text-inverted |
Onde aparece
| Token | Componentes |
|---|---|
--ui-primary | UButton (color=primary solid), UBadge (color=primary), indicador ativo de UTabs, anel de foco de UInput, NavBar |
--ui-primary-* (alpha) | Hover de UButton outline, fundo de chip ativo, anel de foco global |
--ui-secondary | UButton (color=secondary), UBadge (color=secondary) |
--ui-secondary-* (alpha) | Hover e foco em contextos de secundária |