Cores semânticas
As cores semânticas ajudam a construir interfaces coesas e acessíveis, guiando a interpretação e interação do usuário. Use sempre estas variáveis nos componentes.
Estrutura
As cores semânticas seguem um padrão de nomenclatura que descreve categoria, camada, tipo e variante.
As cores semânticas seguem o padrão: --{categoria}-{camada}-{tipo}-{variante}
| Parte | Opções | Descrição |
|---|---|---|
| Categoria | text, surface, border, icon | O que a cor pinta |
| Camada | base, overlay | Contexto de uso |
| Tipo | neutral, brand, error, success, warning | Intenção semântica |
| Variante | default, secondary, subtle, strong, on-black | Nível de ênfase |
Base vs Overlay
Duas camadas garantem contraste adequado em qualquer contexto de uso.
A camada base é usada em contextos normais (páginas, cards, formulários). A camada overlay é usada em elementos sobre backdrop (modais, drawers, popovers).
css
/* Página normal — use base */
.card {
background: var(--surface-base-neutral-container-default);
color: var(--text-base-neutral-default);
}
/* Modal sobre backdrop — use overlay */
.modal {
background: var(--surface-overlay-neutral-container-default);
color: var(--text-overlay-neutral-default);
}Text
Cores para textos, labels e conteúdo escrito.
Text / Base / Neutral
--text-base-neutral-default--neutral-800
--text-base-neutral-secondary--neutral-600
--text-base-neutral-subtle--neutral-500
--text-base-neutral-white--neutral-100
Text / Base / Error
--text-base-error-default--red-500
--text-base-error-secondary--red-400
--text-base-error-on-black--red-200
Text / Base / Success
--text-base-success-default--green-500
--text-base-success-secondary--green-400
--text-base-success-on-black--green-200
Text / Base / Warning
--text-base-warning-default--yellow-500
--text-base-warning-secondary--yellow-300
--text-base-warning-on-black--yellow-200
Surface
Cores de fundo para páginas, containers e cards.
Surface / Base / Neutral
--surface-base-neutral-page-default--neutral-100
--surface-base-neutral-page-deep--neutral-200
--surface-base-neutral-container-default--neutral-100
--surface-base-neutral-container-deep--neutral-200
--surface-base-neutral-container-emphasis--neutral-300
--surface-base-neutral-container-hover--neutral-200
Surface / Base / Brand
--surface-base-brand-container-low--accent-200
--surface-base-brand-container-medium--accent-300
--surface-base-brand-container-high--accent-400
Surface / Base / Alert
--surface-base-alert-container-error--red-100
--surface-base-alert-container-warning--yellow-100
--surface-base-alert-container-success--green-100
Border
Cores para bordas, separadores e outlines.
Border / Base / Neutral
--border-base-neutral-default--neutral-400
--border-base-neutral-strong--neutral-500
--border-base-neutral-subtle--neutral-300
--border-base-neutral-on-black--neutral-600
Border / Base / Brand
--border-base-brand-default--accent-300
Border / Base / Error
--border-base-error-default--red-300
--border-base-error-strong--red-500
--border-base-error-subtle--red-200
Icon
Cores para ícones e elementos gráficos.
Icon / Base / Neutral
--icon-base-neutral-default--neutral-800
--icon-base-neutral-secondary--neutral-600
--icon-base-neutral-subtle--neutral-500
--icon-base-neutral-white--neutral-100
Icon / Base / Brand
--icon-base-brand-default--accent-300
--icon-base-brand-secondary--accent-500
Icon / Base / Success
--icon-base-success-default--green-300
--icon-base-success-secondary--green-500
Overlay
Tokens para elementos sobre backdrop (modais, drawers, popovers). Garantem contraste adequado em sobreposições.
Text overlay
Mesmas variantes do text base, mas otimizadas para contexto de overlay.
| Variável | Primitiva light | Primitiva dark |
|---|---|---|
--text-overlay-neutral-default | --neutral-800 | --neutral-800 |
--text-overlay-neutral-secondary | --neutral-600 | --neutral-700 |
--text-overlay-neutral-subtle | --neutral-500 | --neutral-600 |
--text-overlay-neutral-white | --neutral-100 | --neutral-800 |
--text-overlay-error-default | --red-500 | --red-500 |
--text-overlay-error-secondary | --red-400 | --red-400 |
--text-overlay-error-on-black | --red-200 | --red-400 |
--text-overlay-success-default | --green-500 | --green-500 |
--text-overlay-success-secondary | --green-400 | --green-400 |
--text-overlay-success-on-black | --green-200 | --green-300 |
--text-overlay-warning-default | --yellow-500 | --yellow-400 |
--text-overlay-warning-secondary | --yellow-300 | --yellow-300 |
--text-overlay-warning-on-black | --yellow-200 | --yellow-500 |
Surface overlay
Fundos para modais, drawers e elementos sobre backdrop.
| Variável | Primitiva light | Primitiva dark |
|---|---|---|
--surface-overlay-neutral-backdrop | --neutral-800 | --neutral-100 |
--surface-overlay-neutral-container-default | --neutral-100 | --neutral-300 |
--surface-overlay-neutral-container-deep | --neutral-200 | --neutral-500 |
--surface-overlay-neutral-container-emphasis | --neutral-300 | --neutral-300 |
--surface-overlay-neutral-container-hover | --neutral-200 | --neutral-500 |
--surface-overlay-neutral-container-default-on-black | --neutral-800 | --neutral-200 |
--surface-overlay-neutral-container-hover-on-black | --neutral-700 | --neutral-300 |
--surface-overlay-brand-container-low | --accent-200 | --accent-200 |
--surface-overlay-brand-container-medium | --accent-300 | --accent-300 |
--surface-overlay-brand-container-high | --accent-400 | --accent-400 |
--surface-overlay-alert-container-error | --red-100 | --red-100 |
--surface-overlay-alert-container-warning | --yellow-100 | --yellow-100 |
--surface-overlay-alert-container-success | --green-100 | --green-100 |
Border overlay
Bordas para elementos em contexto de overlay.
| Variável | Primitiva light | Primitiva dark |
|---|---|---|
--border-overlay-neutral-default | --neutral-400 | --neutral-800 |
--border-overlay-neutral-strong | --neutral-500 | --neutral-800 |
--border-overlay-neutral-subtle | --neutral-300 | --neutral-400 |
--border-overlay-neutral-on-black | --neutral-600 | --neutral-500 |
--border-overlay-brand-default | --accent-300 | --accent-300 |
--border-overlay-error-default | --red-300 | --red-300 |
--border-overlay-error-strong | --red-500 | --red-400 |
--border-overlay-error-subtle | --red-200 | --red-400 |
Icon overlay
Ícones em contexto de overlay.
| Variável | Primitiva light | Primitiva dark |
|---|---|---|
--icon-overlay-neutral-default | --neutral-800 | --neutral-800 |
--icon-overlay-neutral-secondary | --neutral-600 | --neutral-600 |
--icon-overlay-neutral-subtle | --neutral-500 | --neutral-600 |
--icon-overlay-neutral-white | --neutral-100 | --neutral-800 |
--icon-overlay-brand-default | --accent-300 | --accent-300 |
--icon-overlay-brand-secondary | --accent-500 | --accent-500 |
--icon-overlay-brand-on-black | --accent-200 | --accent-400 |
--icon-overlay-error-default | --red-300 | --red-300 |
--icon-overlay-error-secondary | --red-500 | --red-400 |
--icon-overlay-error-on-black | --red-200 | --red-300 |
--icon-overlay-success-default | --green-300 | --green-300 |
--icon-overlay-success-secondary | --green-500 | --green-500 |
--icon-overlay-success-on-black | --green-200 | --green-400 |
--icon-overlay-warning-default | --yellow-300 | --yellow-400 |
--icon-overlay-warning-secondary | --yellow-500 | --yellow-500 |
--icon-overlay-warning-on-black | --yellow-200 | --yellow-400 |
Tokens faltantes no base
Tokens base que não foram listados nas seções visuais acima.
Surface on-black
| Variável | Primitiva light | Primitiva dark |
|---|---|---|
--surface-base-neutral-container-default-on-black | --neutral-800 | --neutral-200 |
--surface-base-neutral-container-hover-on-black | --neutral-700 | --neutral-300 |
Icon base (complemento)
Icon / Base / Error
--icon-base-error-default--red-300
--icon-base-error-secondary--red-500
--icon-base-error-on-black--red-200
Icon / Base / Warning
--icon-base-warning-default--yellow-300
--icon-base-warning-secondary--yellow-500
--icon-base-warning-on-black--yellow-200