# Cores — Fundação do Design System Phorte

> A paleta: cada token com nome, variável, valor, uso e sobre o que pode ir. Use o token pelo nome, nunca o valor.

- Página: https://phorte-design-system.vercel.app/styleguide/fundacao/cores
- Ficha no Storybook: https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/foundation-colors--docs
- Índice do design system: https://phorte-design-system.vercel.app/llms.txt

Cor só por token semântico (`bg-primary`, `text-muted-foreground`) — hexadecimal e paleta do Tailwind (`slate-600`) são erro de lint. `--brand-red` e `--brand-green` são decorativos: nunca fundo de texto pequeno nem de controle; para vermelho clicável, `--primary`; para verde, `--secondary`. Todo par de texto e de controle é medido pelo `npm run audit` a cada build.

## Marca

Uso decorativo: grandes áreas, gráficos e peças de imagem. Proibido como fundo de texto pequeno ou de controle interativo. Para interface, use o grupo seguinte.

| Nome | Variável | Valor | Uso | Use sobre |
| --- | --- | --- | --- | --- |
| Vermelho da marca | `--brand-red` | #E64242 | Vermelho institucional da Phorte (decorativo) | — |
| Verde da marca | `--brand-green` | #13B241 | Verde institucional (decorativo) | — |

## Interface

Carregam texto. Todos passam em WCAG 2.2 AA com o respectivo foreground.

| Nome | Variável | Valor | Uso | Use sobre |
| --- | --- | --- | --- | --- |
| Ação primária | `--primary` | #D42B2B | Ação principal | — |
| Ação primária, escura | `--primary-dark` | #A81E1E | Hover e superfícies fortes | — |
| Ação secundária | `--secondary` | #0B8434 | Ação secundária e confirmação | — |
| Ação secundária, escura | `--secondary-dark` | #0D6B2E | Hover da ação secundária | — |

## Feedback

Estados semânticos. Nunca comunique estado apenas por cor — acompanhe sempre de ícone ou texto.

| Nome | Variável | Valor | Uso | Use sobre |
| --- | --- | --- | --- | --- |
| Sucesso | `--success` | #2E844A | Confirmação e sucesso | — |
| Atenção | `--warning` | #DD7A01 | Aviso e atenção | — |
| Informação | `--info` | #1D345E | Informação neutra — nem sucesso, nem atenção, nem erro. Badge, Progress e Alert `info` | — |
| Erro | `--destructive` | #BA0517 | Erro e ação destrutiva | — |

## Feedback tênue

O par de um aviso: o fundo tênue e o texto forte da mesma família. É o que o Alert usa — o token cheio sobre si mesmo a 10% reprovaria.

| Nome | Variável | Valor | Uso | Use sobre |
| --- | --- | --- | --- | --- |
| Sucesso, fundo | `--success-subtle` | #EEF5F1 | Fundo do aviso de sucesso | recebe o texto --success-strong |
| Sucesso, texto | `--success-strong` | #276F3E | Texto e ícone do aviso de sucesso | --success-subtle |
| Atenção, fundo | `--warning-subtle` | #FCF4EB | Fundo do aviso de atenção | recebe o texto --warning-strong |
| Atenção, texto | `--warning-strong` | #945201 | Texto e ícone do aviso de atenção | --warning-subtle |
| Informação, fundo | `--info-subtle` | #EDF0F5 | Fundo do aviso de informação | recebe o texto --info-strong |
| Informação, texto | `--info-strong` | #142544 | Texto e ícone do aviso de informação | --info-subtle |
| Erro, fundo | `--destructive-subtle` | #F9EBEC | Fundo do aviso de erro | recebe o texto --destructive-strong |
| Erro, texto | `--destructive-strong` | #BA0517 | Texto e ícone do aviso de erro — o mesmo valor do --destructive | --destructive-subtle |
| Primária, fundo tênue | `--primary-subtle` | #FBEAEA | Caixa de ícone em vermelho (IconBox primary) — E64 | recebe o ícone --primary (4,32:1) ou o texto --primary-dark (6,29:1) |
| Secundária, fundo tênue | `--secondary-subtle` | #EAF4EE | Caixa de ícone em verde (IconBox secondary) — E64 | recebe o ícone --secondary (4,28:1) ou o texto --secondary-dark (5,91:1) |

## Superfícies

Fundos. A amostra usa --muted-foreground (#595959), o texto secundário — o caso mais apertado de cada superfície.

| Nome | Variável | Valor | Uso | Use sobre |
| --- | --- | --- | --- | --- |
| Fundo da página | `--background` | #FAFAFA | Fundo geral da página | — |
| Superfície | `--card` | #FFFFFF | Superfície elevada | — |
| Superfície tênue | `--muted` | #F4F6F9 | Superfície neutra | — |
| Vermelho do rodapé | `--footer-red` | #7D1B1B | Rodapé institucional | — |

## Texto

A cor do texto, pelo fundo onde ele está. Um nome por papel (E58): ink e muted-foreground; foreground e ink-light ficaram como apelidos obsoletos.

| Nome | Variável | Valor | Uso | Use sobre |
| --- | --- | --- | --- | --- |
| Texto principal | `--foreground` | #1A1A1A | Título e corpo (text-ink) | fundo da página, superfície, superfície tênue |
| Texto de apoio | `--muted-foreground` | #595959 | Legenda, dica, data (text-muted-foreground) | fundo da página, superfície, superfície tênue |
| Texto sobre escuro | `--ink-inverse` | #FAFAFA | Texto em fundo escuro ou vermelho (text-ink-inverse) | ação primária, vermelho do rodapé, bg-ink |
| Texto de apoio sobre escuro | `--ink-inverse-muted` | #C7C7C7 | Texto secundário em fundo escuro (text-ink-inverse-muted) | bg-ink e o vermelho do rodapé — nunca sobre a ação primária |

## Bordas e foco

--border é divisória decorativa e não delimita controle; campo, checkbox, radio e trilha usam --border-interactive.

| Nome | Variável | Valor | Uso | Use sobre |
| --- | --- | --- | --- | --- |
| Borda decorativa | `--border` | #E5E5E5 | Divisórias e separadores | — |
| Borda de controle | `--border-interactive` | #8C8C8C | Limite de campo, checkbox, radio e trilho | — |
| Borda de foco | `--border-focus` | #6B6B6B | Campo com foco, em 2px. Vermelho ou verde substituem quando há regra de validação. | — |
| Anel de foco | `--ring` | #7D1B1B | Anel de foco de teclado. É o vermelho do rodapé (--footer-red), sem cor própria | — |