ITpS

Estilos

Cores

Sistema em duas camadas — primitives OKLCH e tokens semânticos shadcn. Clique em qualquer token para copiar.

Experimente o sistema

Toggle de modo light/dark. Componentes consomem semantic tokens, look-and-feel se adapta automático.

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. Primitives

Paleta crua

Escalas --itps-* em OKLCH. Não usar direto em componentes (exceção: brand colors específicas).

2. Semantic (shadcn)

Tokens canonical

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

Primitives

Sete escalas em OKLCH. Step 900 é o default de marca quando aplicável.

Base

--itps-base-*

Primary — Coral

--itps-primary-*

Secondary — Azul institucional

--itps-secondary-*

Terciary — Neutro esverdeado

--itps-terciary-*

Feedback · Alert — Amarelo

--itps-alert-*

Success — Verde

--itps-success-*

Tokens semânticos

Camada canonical do projeto — padrão shadcn. Use sempre via utilitário Tailwind: bg-primary, text-foreground, border-border.

Token Tailwind Aponta para Hex
--background bg-background --itps-base-0 #FFFFFF
--foreground bg-foreground --itps-base-950 #000000
--card bg-card --itps-base-50 #FAFAFA
--card-foreground bg-card-foreground --itps-base-950 #000000
--popover bg-popover --itps-base-0 #FFFFFF
--popover-foreground bg-popover-foreground --itps-base-950 #000000
--muted bg-muted --itps-base-100 #F0F0F0
--muted-foreground bg-muted-foreground --itps-base-600 #767676
--primary bg-primary --itps-primary-900 #EB5E57
--primary-foreground bg-primary-foreground --itps-base-0 #FFFFFF
--secondary bg-secondary --itps-secondary-100 #E6EDF4
--secondary-foreground bg-secondary-foreground --itps-secondary-950 #14508F
--accent bg-accent --itps-terciary-100 #DFE7E7
--accent-foreground bg-accent-foreground --itps-base-950 #000000
--border bg-border --itps-base-100 #F0F0F0
--input bg-input --itps-base-100 #F0F0F0
--ring bg-ring --itps-primary-900 #EB5E57
--destructive bg-destructive --itps-primary-900 #EB5E57
--destructive-foreground bg-destructive-foreground --itps-base-0 #FFFFFF
--success bg-success --itps-success-900 #00804D
--success-foreground bg-success-foreground --itps-base-0 #FFFFFF
--warning bg-warning --itps-alert-900 #F0C653
--warning-foreground bg-warning-foreground --itps-alert-1000 #986F00
--info bg-info --itps-secondary-900 #1961AC
--info-foreground bg-info-foreground --itps-base-0 #FFFFFF

Tailwind v4

Tokens são expostos via @theme inline. Cada semantic vira uma classe utilitária com suporte a opacity.

Background

  • bg-background
  • bg-card
  • bg-muted
  • bg-primary
  • bg-secondary
  • bg-destructive/15 (tinted)

Text

  • text-foreground
  • text-muted-foreground
  • text-primary
  • text-primary-foreground
  • text-destructive

Border

  • border-border
  • border-input
  • border-primary
  • ring-ring
  • border-success/30 (tinted)

Contraste · WCAG

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

Sample Foreground Background Ratio Grade
Texto principal foreground background 21.0:1 AAA
Texto subtle muted-foreground background 6.69:1 AA
Botão primário primary-foreground primary 6.27:1 AA
Botão secundário secondary-foreground secondary 7.20:1 AAA
Aviso warning-foreground warning 12.91:1 AAA
Confirmação success-foreground success 4.71:1 AA

Formato de cópia

Define o formato copiado quando você clica em qualquer token desta página.

Copiado