Cores

Visão ao vivo

📐 Quer entender de onde vêm esses valores (a fórmula da escala, como o par on-<tom> é escolhido, o pipeline de build) e usar o gerador acima? Veja Geração de Cores.

Todas as cores são CSS Custom Properties (--mds-colors-*), nunca hex fixo no HTML/CSS de consumo. Cada papel semântico tem 5 tons (lighter, light, main, dark, darker) + seu par de contraste — nomenclatura alinhada ao Figma (--mds-colors-<papel>-<tom> para o fundo, --mds-colors-<papel>-on-<tom> para o texto/ícone legível sobre ele, ex.: --mds-colors-primary-main + --mds-colors-primary-on-main).

Papéis semânticos (tema claro)

Papel	Token base	`lighter`	`light`	`main`	`dark`	`darker`	Quando usar
Primary	`--mds-colors-primary-*`	`#ecf3ff`	`#a0c4fd`	`#408afa`	`#3068bb`	`#20457d`	Ação principal, marca, item ativo/selecionado, foco de interação
Secondary	`--mds-colors-secondary-*`	`#e9ebf3`	`#939ac5`	`#27348b`	`#1d2768`	`#141a46`	Marca institucional, badges/destaques secundários, campo válido (borda)
Danger	`--mds-colors-danger-*`	`#fcebe6`	`#f29980`	`#e53200`	`#ac2600`	`#731900`	Erro, exclusão, bloqueio, ação irreversível
Warning	`--mds-colors-warning-*`	`#fef9e6`	`#f8e280`	`#f0c400`	`#b49300`	`#786200`	Atenção, campo obrigatório, dado pendente de revisão
Info	`--mds-colors-info-*`	`#e6f3fb`	`#80c3ed`	`#0087db`	`#0065a4`	`#00446e`	Mensagem neutra, dica, estado informativo sem urgência
Success	`--mds-colors-success-*`	`#e6f9e6`	`#80e381`	`#00c703`	`#009502`	`#006402`	Confirmação, conclusão, dado validado

on-<tom> é a cor de texto/ícone garantida legível sobre aquele fundo — sempre use o par (--mds-colors-<papel>-main + --mds-colors-<papel>-on-main), nunca aplique texto escuro fixo sobre um fundo de token.

✅ Checagem cruzada com o Figma (2026-09-22, Design System 2.0): Os fundos (lighter/main/dark/darker) batem exatamente com o Figma em todas as 12 famílias (primary, secondary, danger, warning, success, info, aqua, blue, green, orange, pink, red, teal, yellow) e na escala de cinza inteira.

Corrigido em src/scss/themes/_light.scss em 2026-09-22 (reproduzindo a fórmula de src/stories/foundations/TokenManager.stories.ts, generateScale: tom light = passo 200 = 50% de mistura da cor-base com branco): o tom light de Primary/Secondary estava desatualizado.

--mds-colors-primary-light: era #70a7fb, agora #a0c4fd.

--mds-colors-primary-on-light: era #020408, agora #060e19 (par de contraste do tom acima, ajustado junto para continuar legível).

--mds-colors-secondary-light: era #5d67a8, agora #939ac5.

--mds-colors-secondary-on-light: era #f9f9fc, agora #010204 (par de contraste do tom acima, ajustado junto para continuar legível).

Achado à parte, ainda em aberto (não corrigido): Figma: on-main/on-dark/on-darker = o próprio tom lighter do papel. CSS: um quase-branco específico do papel, próximo mas não idêntico ao lighter.

primary: CSS #f9fbff, Figma reaproveita o lighter (#ecf3ff).

secondary: CSS #f9f9fc, Figma reaproveita o lighter (#e9ebf3). Confiança: alta para primary/secondary (zoom dedicado); padrão, não confirmado byte a byte, nos demais papéis.

Background / Surface / Text (neutros)

Escala base: --mds-colors-gray-0 #fefefe … --mds-colors-gray-50 #fafbfc … --mds-colors-gray-100 #f3f4f6 … --mds-colors-gray-200 #e8eaee … --mds-colors-gray-300 #dcdfe5 … --mds-colors-gray-400 #d0d4dc … --mds-colors-gray-500 #9c9fa5 … --mds-colors-gray-600 #686a6e … --mds-colors-gray-700 #343537 … --mds-colors-gray-800 #151516 … --mds-colors-gray-900 #060607.

Uso	Token	Valor	Regra
Surface / Card	`--mds-dimmed-default`	`#fefefe`	Fundo padrão de card, modal, painel — “branco” do sistema
Background (página)	`--mds-colors-background-light`	`#fafbfc`	Fundo da aplicação por trás dos cards
Background (elemento)	`--mds-colors-background-main`	`#f3f4f6`	Fundo de blocos secundários (ex.: `.mds-box`)
Background (rebaixado)	`--mds-colors-background-dark`	`#e8eaee`	Hover neutro, divisores de área, estado “dimmed”
Border	`--mds-colors-ui-border`	`#e8eaee`	Toda borda 1px de card, input, tabela
Text — corpo (padrão)	`--mds-colors-foreground-main`	`#686a6e`	Texto de parágrafo, valor de dado, corpo em geral
Text — ênfase/secundário	`--mds-colors-foreground-dark`	`#343537`	Título, rótulo em destaque, texto que precisa de mais peso que o corpo
Text — muted/apoio	`--mds-colors-foreground-light`	`#9c9fa5`	Placeholder, texto de ajuda, timestamp, metadado de baixa prioridade

Note a inversão de intuição: foreground-dark é o texto de MAIOR ênfase (mais escuro = mais peso), e foreground-light é o texto de MENOR ênfase (mais claro = apoio). Siga essa semântica, não o nome literal.

Destructive

Não existe token destructive isolado — Danger cobre esse papel (botão de exclusão = variant="danger" / .mds-btn--danger, --mds-colors-ui-danger = #e53200).

Overlay / Shadow

--mds-colors-ui-shadow: rgba(22, 22, 23, 0.15) — base de toda sombra do sistema.
--mds-colors-background-transparency: rgba(52, 53, 55, 0.6) — backdrop de modal/drawer.

Multi-marca (`[data-primary="..."]`)

Tenant	Cor `main`
`brand-log`	`#64be50`
`brand-mobiis`	`#408afa`
`blue`	`#0087db`
`teal`	`#00dbdb`
`aqua`	`#00f0b8`
`green`	`#00c703`
`yellow`	`#f0c400`
`orange`	`#f07800`
`red`	`#e53200`
`pink`	`#ff0073`

Tema escuro

[data-theme="dark"] e :root aplicam-se ao mesmo elemento — uma prop não redeclarada em [data-theme="dark"] cai para o valor de :root (cascata normal do CSS); a maioria dos papéis redeclara os 5 tons com valores próprios para dark. Ex.: primary-main é #408afa no claro e #3068bb no escuro. Neutros do tema escuro: fundo #001027, texto de corpo #8090a7. Um agente de IA nunca deve ler valor de cor fixo: sempre referenciar o token, para funcionar nos dois temas automaticamente.

🧮 Primary/Secondary do tema escuro: calculados, não conferidos ao vivo no Figma (2026-09-22). Não existe página de dark mode no arquivo Figma. Fórmula + mapeamento de src/stories/foundations/TokenManager.stories.ts (generateScale, selectOnColor/APCA, semanticMappingsDark), rodados com Node (apca-w3/culori, as mesmas libs da story) — não lidos de um Figma consultado ao vivo.

Mapeamento aplicado (semanticMappingsDark): lighter=passo 700, light=passo 600, main=passo 500, dark=passo 300, darker=passo 200.

Primary (src/scss/themes/_dark.scss):

lighter: #20457d → #10223f; on-lighter: #f9fbff → #ecf3ff

light: #3068bc → #20457d; on-light: #f9fbff → #ecf3ff

main: #408afa → #3068bb; on-main: #f9fbff → #ecf3ff

dark: #a0c5fd → #70a7fb; on-dark: #020408 → #020408

darker: #cfe2fe → #a0c4fd; on-darker: #020408 → #060e19 Secondary (src/scss/themes/_dark.scss):

lighter: #141a46 → #0a0d23; on-lighter: #f9f9fc → #e9ebf3

light: #1d2768 → #141a46; on-light: #f9f9fc → #e9ebf3

main: #27348b → #1d2768; on-main: #f9f9fc → #e9ebf3

dark: #939ac5 → #5d67a8; on-dark: #f9f9fc → #e9ebf3

darker: #c9cce2 → #939ac5; on-darker: #010204 → #010204

⚠️ O CSS anterior de dark já usava outro mapeamento de passo (lighter=600, light=500, main=400, dark=200, darker=100) — diferente do declarado no Token Manager. main muda de valor visível de forma perceptível (não só um ajuste de contraste): de #408afa (idêntico ao main do tema claro) para #3068bb, mais escuro. ⚠️ Sem página de dark no Figma, não há como confirmar visualmente — só a fórmula do gerador garante a consistência.