Pular para o conteúdo
Sinapse Sinapse

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 dois níveis. Componentes consomem só a camada semântica — trocando o ponteiro lá, o produto inteiro segue.

1. Primitivas

Paletas base

Escalas baseadas no Figma, com valores para claro e escuro. Use como referência de paleta; componentes devem consumir a camada semântica.

2. Semânticos

Tokens canônicos

--background, --primary, --destructive etc. É o que se escreve em produção: bg-background, text-foreground.

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
Escuro

Primary — Coral

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

50100200300400500600700800900950
Claro
Escuro

Secondary — Azul institucional

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

2550100200300400500600700800900950
Claro
Escuro

Terciária — Neutro esverdeado

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

50100300500
Claro
Escuro

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
Escuro

Success — Verde

Estados positivos, confirmação, indicadores OK.

100200600800900950
Claro
Escuro

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
--background bg-background --itps-base-0 #FFFFFF #030F1C
--foreground bg-foreground --itps-base-950 #030F1C #FFFFFF
--card bg-card --itps-base-50 #F9FAFB #0C1E31
--card-foreground bg-card-foreground --itps-base-950 #030F1C #FFFFFF
--popover bg-popover --itps-base-0 #FFFFFF #030F1C
--popover-foreground bg-popover-foreground --itps-base-950 #030F1C #FFFFFF
--muted bg-muted --itps-base-100 #EDF0F2 #243242
--muted-foreground bg-muted-foreground --itps-base-800 #243242 #EDF0F2
--primary bg-primary --itps-secondary-900 #1961AC #4797EB
--primary-foreground bg-primary-foreground --itps-base-0 #FFFFFF #030F1C
--secondary bg-secondary --itps-secondary-50 #F8FAFC #021427
--secondary-foreground bg-secondary-foreground --itps-secondary-900 #1961AC #4797EB
--accent bg-accent --itps-terciary-100 #DFE7E7 #18242F
--accent-foreground bg-accent-foreground --itps-base-950 #030F1C #FFFFFF
--border bg-border --itps-base-100 #EDF0F2 #243242
--input bg-input --itps-base-200 #C4CCD4 #394C60
--ring bg-ring --itps-secondary-900 #1961AC #4797EB
--destructive bg-destructive --itps-primary-900 #EB5E57 #FF4C43
--destructive-foreground bg-destructive-foreground --itps-base-950 #030F1C #030F1C
--success bg-success --itps-success-900 #00804D #089B61
--success-foreground bg-success-foreground --itps-base-0 #FFFFFF #030F1C
--warning bg-warning --itps-alert-900 #F0C653 #F0C653
--warning-foreground bg-warning-foreground --itps-base-950 #030F1C #030F1C
--info bg-info --itps-secondary-900 #1961AC #4797EB
--info-foreground bg-info-foreground --itps-base-0 #FFFFFF #030F1C

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 primary para ação principal, foco de marca e estados ativos. 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 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 texto primário invertido primary hover 5.17:1 AA
Aviso warning-foreground warning 11.85:1 AAA
Confirmação success-foreground success 5.01: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-destructive

Borda

  • border-border
  • border-input
  • border-primary
  • ring-ring
  • border-success/30 (30%)
Copiado