# Cores

Sistema em duas camadas: paletas primitivas do Figma e tokens semânticos compatíveis com shadcn.

## Experimente o sistema

Alterne entre claro e escuro. Componentes consomem tokens semânticos e a aparência se adapta automaticamente.

Modo

## Duas camadas

Toda cor passa por duas camadas: paletas primitivas e tokens semânticos. Componentes consomem só a camada semântica; a arquitetura completa está em [Tokens](/estilos/tokens).

## Primitivas

Referência visual compacta das paletas base. Claro e escuro ficam em linhas separadas para comparação rápida. A matriz mantém HEX visível para leitura; o seletor em cada tabela define o formato copiado.

### Base

Neutros azulados. Fundo, texto, bordas, sombras.

050100200300400500600700800900950

Claro `--itps-base-0 #FFFFFF` `--itps-base-50 #F9FAFB` `--itps-base-100 #EDF0F2` `--itps-base-200 #C4CCD4` `--itps-base-300 #A6B2BE` `--itps-base-400 #8999A9` `--itps-base-500 #6C7F93` `--itps-base-600 #5F7081` `--itps-base-700 #394C60` `--itps-base-800 #243242` `--itps-base-900 #0C1E31` `--itps-base-950 #030F1C`

Escuro `--itps-base-0 #030F1C` `--itps-base-50 #0C1E31` `--itps-base-100 #243242` `--itps-base-200 #394C60` `--itps-base-300 #5F7081` `--itps-base-400 #6C7F93` `--itps-base-500 #8999A9` `--itps-base-600 #A6B2BE` `--itps-base-700 #C4CCD4` `--itps-base-800 #EDF0F2` `--itps-base-900 #F9FAFB` `--itps-base-950 #FFFFFF`

### Primary — Coral

Identidade Sinapse e feedback destrutivo no Figma. Ações primárias, ênfase, links.

50100200300400500600700800900950

Claro `--itps-primary-50 #FDF7F7` `--itps-primary-100 #FBEFEE` `--itps-primary-200 #FBDCDB` `--itps-primary-300 #F8C6C4` `--itps-primary-400 #F7BEBB` `--itps-primary-500 #F5B0AD` `--itps-primary-600 #F39F9B` `--itps-primary-700 #F0857F` `--itps-primary-800 #EE736D` `--itps-primary-900 #EB5E57` `--itps-primary-950 #D3242D`

Escuro `--itps-primary-50 #2D131F` `--itps-primary-100 #311F28` `--itps-primary-200 #32232C` `--itps-primary-300 #4A323A` `--itps-primary-400 #63494F` `--itps-primary-500 #7C6064` `--itps-primary-600 #95787B` `--itps-primary-700 #AE8F92` `--itps-primary-800 #C9B3B5` `--itps-primary-900 #FF4C43` `--itps-primary-950 #D3242D`

### Secondary — Azul institucional

Tom institucional. Fundos sutis, links secundários, informação.

2550100200300400500600700800900950

Claro `--itps-secondary-25 #FBFCFD` `--itps-secondary-50 #F8FAFC` `--itps-secondary-100 #E6EDF4` `--itps-secondary-200 #D8E3EE` `--itps-secondary-300 #BAD0E6` `--itps-secondary-400 #88B1DD` `--itps-secondary-500 #6C9FD5` `--itps-secondary-600 #4D8ACC` `--itps-secondary-700 #397DC6` `--itps-secondary-800 #326EAF` `--itps-secondary-900 #1961AC` `--itps-secondary-950 #14508F`

Escuro `--itps-secondary-25 #021427` `--itps-secondary-50 #051F3B` `--itps-secondary-100 #0A2643` `--itps-secondary-200 #0E3762` `--itps-secondary-300 #1D4672` `--itps-secondary-400 #2D5886` `--itps-secondary-500 #406996` `--itps-secondary-600 #678AAD` `--itps-secondary-700 #8DA3BA` `--itps-secondary-800 #B1C1D1` `--itps-secondary-900 #4797EB` `--itps-secondary-950 #1961AC`

### Terciária — Neutro esverdeado

Acentos sutis e fundos hover. Escala parcial no DS atual.

50100300500

Claro `--itps-terciary-50 #F6F8F8` `--itps-terciary-100 #DFE7E7` `--itps-terciary-300 #D3DFDD` `--itps-terciary-500 #C4CECA`

Escuro `--itps-terciary-50 #16222D` `--itps-terciary-100 #18242F` `--itps-terciary-300 #31393F` `--itps-terciary-500 #55595E`

### Feedback · Alert — Amarelo

Atenção e alertas não críticos. Namespace feedback/alert. Etapas 950 e 1000 indicam limites WCAG sobre branco.

1002006008009009501000

Claro `--itps-alert-100 #FEFAF1` `--itps-alert-200 #FBF1D5` `--itps-alert-600 #F7E0A1` `--itps-alert-800 #F4D37C` `--itps-alert-900 #F0C653` `--itps-alert-950 #B78E1D` `--itps-alert-1000 #986F00`

Escuro `--itps-alert-100 #302C14` `--itps-alert-200 #39351C` `--itps-alert-600 #917D3D` `--itps-alert-800 #C3AC69` `--itps-alert-900 #F0C653` `--itps-alert-950 #F0C653` `--itps-alert-1000 #F0C653`

### Success — Verde

Estados positivos, confirmação, indicadores OK.

100200600800900950

Claro `--itps-success-100 #F4FBF8` `--itps-success-200 #D1F0E3` `--itps-success-600 #79D2AF` `--itps-success-800 #09AA69` `--itps-success-900 #00804D` `--itps-success-950 #007848`

Escuro `--itps-success-100 #022626` `--itps-success-200 #023C2F` `--itps-success-600 #076C4A` `--itps-success-800 #61AB92` `--itps-success-900 #089B61` `--itps-success-950 #09AA69`

## Tokens semânticos

Camada canônica do projeto, compatível com shadcn. Use sempre via utilitário Tailwind: `bg-primary`, `text-foreground`, `border-border`. A coluna Primitiva mostra a origem do valor, não a API de uso em componentes.

| Token CSS | Utilitário | Primitiva | Claro | Escuro | Uso |  |
| --- | --- | --- | --- | --- | --- | --- |
| `--background` | `bg-background` | `--itps-base-0` | `#FFFFFF` | `#030F1C` | Canvas principal da aplicação |  |
| `--foreground` | `bg-foreground` | `--itps-base-950` | `#030F1C` | `#FFFFFF` | Texto principal |  |
| `--card` | `bg-card` | `--itps-base-50` | `#F9FAFB` | `#0C1E31` | Superfície elevada: cards e painéis |  |
| `--card-foreground` | `bg-card-foreground` | `--itps-base-950` | `#030F1C` | `#FFFFFF` | Texto sobre card |  |
| `--popover` | `bg-popover` | `--itps-base-0` | `#FFFFFF` | `#030F1C` | Menus, dropdowns e tooltips |  |
| `--popover-foreground` | `bg-popover-foreground` | `--itps-base-950` | `#030F1C` | `#FFFFFF` | Texto sobre popover |  |
| `--muted` | `bg-muted` | `--itps-base-100` | `#EDF0F2` | `#243242` | Áreas sutis: hover, disabled e badges |  |
| `--muted-foreground` | `bg-muted-foreground` | `--itps-base-800` | `#243242` | `#EDF0F2` | Texto secundário com contraste preservado |  |
| `--primary` | `bg-primary` | `--itps-secondary-900` | `#1961AC` | `#4797EB` | Ações principais em bibliotecas compatíveis com shadcn |  |
| `--primary-foreground` | `bg-primary-foreground` | `--itps-base-0` | `#FFFFFF` | `#030F1C` | Texto sobre bg-primary |  |
| `--secondary` | `bg-secondary` | `--itps-secondary-50` | `#F8FAFC` | `#021427` | Superfície azul institucional |  |
| `--secondary-foreground` | `bg-secondary-foreground` | `--itps-secondary-900` | `#1961AC` | `#4797EB` | Texto sobre bg-secondary |  |
| `--accent` | `bg-accent` | `--itps-terciary-100` | `#DFE7E7` | `#18242F` | Destaques sutis: hover e item selecionado |  |
| `--accent-foreground` | `bg-accent-foreground` | `--itps-base-950` | `#030F1C` | `#FFFFFF` | Texto sobre bg-accent |  |
| `--border` | `bg-border` | `--itps-base-100` | `#EDF0F2` | `#243242` | Bordas padrão |  |
| `--input` | `bg-input` | `--itps-base-200` | `#C4CCD4` | `#394C60` | Borda de campos de formulário |  |
| `--ring` | `bg-ring` | `--itps-secondary-900` | `#1961AC` | `#4797EB` | Anel de foco |  |
| `--destructive` | `bg-destructive` | `--itps-primary-900` | `#EB5E57` | `#FF4C43` | Ações destrutivas quando acompanhadas de texto/estado explícito |  |
| `--destructive-foreground` | `bg-destructive-foreground` | `--itps-base-950` | `#030F1C` | `#030F1C` | Texto sobre bg-destructive |  |
| `--success` | `bg-success` | `--itps-success-900` | `#00804D` | `#089B61` | Estado de sucesso |  |
| `--success-foreground` | `bg-success-foreground` | `--itps-base-0` | `#FFFFFF` | `#030F1C` | Texto sobre bg-success |  |
| `--warning` | `bg-warning` | `--itps-alert-900` | `#F0C653` | `#F0C653` | Atenção não crítica |  |
| `--warning-foreground` | `bg-warning-foreground` | `--itps-base-950` | `#030F1C` | `#030F1C` | Texto sobre bg-warning |  |
| `--info` | `bg-info` | `--itps-secondary-900` | `#1961AC` | `#4797EB` | Mensagens informativas |  |
| `--info-foreground` | `bg-info-foreground` | `--itps-base-0` | `#FFFFFF` | `#030F1C` | Texto sobre bg-info |  |

## Semântica de uso

Tokens carregam intenção de interface. A mesma cor primitiva pode aparecer em mais de um token, mas o componente deve escolher pelo significado do estado.

Marca e ação

### Coral como ênfase

Use `brand` (coral) para borda, ícone e fundo: contorno do botão principal e detalhes Sinapse. Texto coral usa `brand-text` (#D3242D no tema claro, 5,17:1), porque o coral #EB5E57 fica em 3,35:1 como texto. `primary` é o azul institucional das ações principais em componentes shadcn. Para botões, mantenha texto e borda com contraste AA.

Risco e destruição

### Cor nunca deve ser o único sinal

`destructive` pode apontar para a mesma família coral, mas deve aparecer com texto explícito, ícone, estado ou confirmação.

## Contraste · WCAG

Combinações testadas. Use estes pares como referência ao introduzir uma nova combinação.

| Exemplo | Texto | Fundo | Contraste | Nível |
| --- | --- | --- | --- | --- |
| Texto principal | `foreground` | `background` | 19.28:1 | AAA |
| Texto secundário | `muted-foreground` | `background` | 13.04:1 | AAA |
| Primário padrão | `info` | `secondary` | 6.00:1 | AA |
| Primário hover | `brand-hover-foreground` | `brand-hover` | 5.17:1 | AA |
| Link editorial | `brand-text` | `background` | 5.17:1 | AA |
| Mensagem de erro | `destructive-text` | `background` | 5.17:1 | AA |
| Aviso | `warning-foreground` | `warning` | 11.85:1 | AAA |
| Confirmação | `success-foreground` | `success` | 5.01:1 | AA |
| Concluído | `success-text` | `success/15` | 4.52:1 | AA |

## Tailwind v4

Tokens são expostos via `@theme inline`. Cada token semântico vira uma classe utilitária com suporte a opacidade.

Fundo

-   `bg-background`
-   `bg-card`
-   `bg-muted`
-   `bg-primary`
-   `bg-secondary`
-   `bg-destructive/15` (15%)

Texto

-   `text-foreground`
-   `text-muted-foreground`
-   `text-primary`
-   `text-primary-foreground`
-   `text-brand-text`
-   `text-destructive-text`
-   `text-success-text`

Borda

-   `border-border`
-   `border-input`
-   `border-primary`
-   `ring-ring`
-   `border-success/30` (30%)

Clique para copiar

Copiado