Fundamentos
Cor
Teal é a marca. Âmbar é ação e atenção. Neutros frios sustentam texto, bordas e fundos. As cores de status existem só para feedback do sistema.
Duas camadas
O Constela tem duas camadas de cor:
- Escalas: os valores da marca (
teal-50ateal-950,amber-50aamber-950,neutral-0aneutral-950) e as cores de status. São fixas. - Papéis: nomes pela função (
bg-surface,text-secondary,action-primary,link). Cada papel aponta para um tom da escala no tema claro e para outro no escuro.
Nos componentes, use sempre os papéis. A escala crua fica para ilustração, gráfico e casos documentados.
Papéis
| Token e uso | Tailwind | Claro | Escuro |
|---|---|---|---|
bg-pageFundo da área de conteúdo dos portais e do site. | page | #f9fafb | #030712 |
bg-surfaceCard, modal, popover, input e header do portal do colaborador. | surface | #ffffff | #111827 |
bg-subtleÁreas de apoio dentro de uma superfície, input desabilitado, trilhos. | subtle | #f3f4f6 | #1f2937 |
bg-sidebarSidebar fixa dos portais administrativos, rodapé do site, capa de documento. | sidebar | #064e4e | #064e4e |
bg-sidebar-activeFundo do item ativo na sidebar (com borda esquerda amber-400 de 3px). | sidebar-active | rgba(255, 255, 255, 0.1) | rgba(255, 255, 255, 0.1) |
text-primaryTexto principal sobre bg-page e bg-surface (17,7:1 claro, 16,1:1 escuro). | fg | #111827 | #f3f4f6 |
text-secondaryTexto de apoio, helpers, legendas sobre bg-page e bg-surface (4,63:1 ou mais nos dois temas). | fg-muted | #6b7280 | #9ca3af |
text-disabledTexto de controle desabilitado (isento de contraste; nunca para informação). | fg-disabled | #9ca3af | #4b5563 |
text-errorTexto de erro de formulário sobre bg-surface (4,83:1 claro, 6,41:1 escuro). | fg-error | #dc2626 | #f87171 |
text-on-darkTexto sobre bg-sidebar, teal-800, teal-900 e error-strong. | fg-inverse | #ffffff | #ffffff |
text-heading-brandTítulos de documento e header de tabela quando o título leva cor da marca (8,88:1 sobre teal-50). | fg-brand | #064e4e | #b3deda |
border-defaultBorda de card, divisores de tabela, contorno de input em repouso (não carrega contraste 3:1; o input é identificado também pelo label e pelo fundo). | line | #e5e7eb | #1f2937 |
border-strongBorda de botão outline, hover de input. | line-strong | #d1d5db | #374151 |
border-focusBorda do input em foco (v1.0), acompanhada do halo focus-halo. | line-focus | #55b0a9 | #55b0a9 |
focus-ringAnel de foco de 2px com offset de 2px em todo elemento interativo. teal-700 dá 3,7:1 sobre branco; teal-400 do v1.0 dava 2,57:1. | focus-ring | #0e9494 | #55b0a9 |
focus-haloBox-shadow de 3px do input em foco. | focus-halo | rgba(85, 176, 169, 0.15) | rgba(85, 176, 169, 0.3) |
action-primaryFundo do botão primário. Claro: 5,15:1 com branco. Escuro: 7,83:1 com neutral-950. | action-primary | #0a7a7a | #55b0a9 |
action-primary-hoverHover do botão primário. | action-primary-hover | #064e4e | #7fc7c2 |
on-action-primaryTexto e ícone sobre action-primary. | on-action-primary | #ffffff | #030712 |
action-secondaryFundo do botão secundário. | action-secondary | #f0f9f8 | #033535 |
action-secondary-hoverHover do botão secundário. | action-secondary-hover | #e0f2f0 | #064e4e |
on-action-secondaryTexto do botão secundário (4,81:1 claro, 9,19:1 escuro). | on-action-secondary | #0a7a7a | #b3deda |
action-accentCTA de destaque (no máximo um por tela). | action-accent | #f59e0b | #fbbf24 |
action-accent-hoverHover do CTA. | action-accent-hover | #d97706 | #fcd34d |
on-action-accentTexto do CTA: sempre escuro (8,26:1 claro, 12,06:1 escuro). | on-action-accent | #111827 | #030712 |
action-dangerFundo do botão Danger. | action-danger | #dc2626 | #f87171 |
on-action-dangerTexto do botão Danger (4,83:1 claro, 7,28:1 escuro). | on-action-danger | #ffffff | #030712 |
linkLinks em texto corrido e botão ghost (4,93:1 sobre neutral-50; 6,9:1 sobre neutral-900). | link | #0a7a7a | #55b0a9 |
link-hoverHover de link. | link-hover | #064e4e | #7fc7c2 |
table-header-bgFundo do header de tabela. | table-header-bg | #f0f9f8 | #1f2937 |
table-header-textTexto do header de tabela (8,88:1 claro, 10,05:1 escuro). | table-header-text | #064e4e | #b3deda |
table-row-altLinha alternada de tabela. | table-row-alt | #f9fafb | rgba(255, 255, 255, 0.02) |
table-row-hoverHover de linha de tabela. | table-row-hover | #e0f2f0 | rgba(255, 255, 255, 0.04) |
selection-bgFundo da seleção de texto. | selection-bg | #b3deda | #0a7a7a |
selection-textTexto selecionado (8,88:1 claro; 5,15:1 escuro). | selection-text | #064e4e | #ffffff |
chart-1Série principal de gráficos. | chart-1 | #0fa4b8 | #55b0a9 |
chart-2Série de destaque em gráficos. | chart-2 | #f59e0b | #fbbf24 |
chart-3Série secundária. | chart-3 | #7fc7c2 | #0e9494 |
chart-4Série de comparação (período anterior, meta). | chart-4 | #9ca3af | #6b7280 |
A coluna Tailwind traz o nome da classe quando você usa o tailwind.css: bg-surface, text-fg-muted, border-line, bg-action-primary.
Escalas
Teal
50
#f0f9f8100
#e0f2f0200
#b3deda300
#7fc7c2400
#55b0a9500
#26aeae600
#0fa4b8700
#0e9494800
#0a7a7a900
#064e4e950
#033535Amber
50
#fffbeb100
#fef3c7200
#fde68a300
#fcd34d400
#fbbf24500
#f59e0b600
#d97706700
#b45309800
#92400e900
#78350f950
#451a03Neutros
0
#ffffff50
#f9fafb100
#f3f4f6200
#e5e7eb300
#d1d5db400
#9ca3af500
#6b7280600
#4b5563700
#374151800
#1f2937900
#111827950
#030712Status
| Token | Valor | Uso |
|---|---|---|
success | #10b981 | Ponto, ícone e borda de sucesso. Nunca texto (2,54:1 sobre branco). |
success-soft | #ecfdf5 | Fundo do badge Ativo / Concluído (igual nos dois temas). |
success-text | #065f46 | Texto de sucesso sobre success-soft (7,29:1) e sobre branco. |
warning | #f59e0b | Ponto, ícone e borda de atenção. Nunca texto. |
warning-soft | #fef3c7 | Fundo do badge Pendente / Em andamento. |
warning-text | #92400e | Texto de atenção sobre warning-soft (6,37:1). |
error | #ef4444 | Ponto, ícone e borda de erro, borda de input inválido. Não usar com texto branco (3,76:1). |
error-strong | #dc2626 | Fundo do botão Danger com texto branco (4,83:1) e texto de erro de formulário sobre branco. |
error-soft | #fef2f2 | Fundo do badge Erro / Cancelado. |
error-text | #991b1b | Texto de erro sobre error-soft (7,6:1). |
info | #3b82f6 | Ponto, ícone e borda informativa. |
info-soft | #eff6ff | Fundo do badge Info / Neutro. |
info-text | #1e40af | Texto informativo sobre info-soft (8,01:1). |
scheduled | #0fa4b8 | Ponto do badge Agendado (alias visual de teal-600). |
scheduled-soft | #e0f2f0 | Fundo do badge Agendado. |
scheduled-text | #064e4e | Texto do badge Agendado sobre scheduled-soft (8,21:1). |
Regras
teal-500é o teal do logotipo. Use em ícones, ilustrações e gráficos, nunca como fundo de texto ou como texto.teal-600é o teal de interface do v1.0. Com texto branco dá 2,99:1, abaixo do AA: use como mancha (ícone, ponto de status, série de gráfico).- A ação primária e os links usam
teal-800no tema claro. - Texto sobre âmbar é sempre escuro (
on-action-accent), nunca branco. - Cada cor de status tem três tons: a base (ponto, ícone, borda),
-soft(fundo) e-text(texto sobre o fundo). A base nunca é usada como texto. - No máximo um CTA âmbar por tela.
Tema escuro
Os papéis já têm valor para o tema escuro. Ele vale quando o html tem a classe dark ou o atributo data-theme="dark". Para seguir a preferência do sistema operacional, use tokens-auto.css no lugar de tokens.css.
No escuro, a ação primária vira teal-400 com texto escuro, e a superfície vira neutral-900 sobre fundo neutral-950. Os fundos dos badges de status continuam claros, por isso o texto deles não muda.
Ajustes em relação ao v1.0
A versão 1.0 do guia definia o botão primário e o link em teal-600 e o CTA em amber-500 com texto branco. Esses pares ficam em 2,99:1 e 2,15:1. O Constela manteve as escalas e mudou o papel de cada tom: ação primária em teal-800, CTA com texto escuro, botão de perigo em #dc2626 e anel de foco em teal-700.