Innova

02 · Marca

Sistema de cores

A camada técnica das cores: sete escalas 50 → 950, tokens semânticos e dois temas (light/dark) derivados da paleta institucional. primary.500 é exatamente Brasa (#E75B10) — todas as demais escalas são funcionais.

As sete cores institucionais resolvem identidade, logotipo e materiais impressos — mas não cobrem o que uma UI precisa: hierarquia de superfícies, estados interativos, feedback de sucesso/erro, modo escuro. Este sistema estende a paleta:

  • Escalas 50 → 950 dão profundidade para construir hierarquia (bg-neutral-50 em fundos, bg-neutral-900 em superfícies escuras).
  • Tokens semânticos nomeiam as cores pelo papel (surface.card, text.primary) e mudam de valor conforme o tema ativo.
  • Dois temas daisyUI — innova (light) e innova-dark — alternam todos os tokens com um único atributo no <html>.

Uso rápido

Os utilitários mais comuns no dia a dia. Combine com modificadores de opacidade (/60, /40) para hierarquia tipográfica.

Botão primário

btn btn-primary

Texto principal

text-base-content

Texto auxiliar

text-base-content/60

Card / superfície

bg-base-100 + border-base-300

Acento de marca

text-primary · bg-primary

Badge soft

badge badge-soft badge-primary

Escalas

Convenção Tailwind: 50 mais clara, 950 mais escura. Cada escala é um utilitário direto — bg-primary-500, text-neutral-700, border-warm-200. Clique em um tom para copiar o hex.

Neutral

neutral-50 → neutral-950

Texto, superfícies e bordas. Base de toda a UI.

Warm

warm-50 → warm-950

Variante quente para seções editoriais e materiais de marketing.

Primary (laranja)

primary-50 → primary-950

Escala derivada da cor de marca. Use 500 (light) e 400 (dark) como cor primária de UI.

Success

success-50 → success-950

Confirmações, estados positivos.

Warning

warning-50 → warning-950

Avisos, estados de atenção.

Danger

danger-50 → danger-950

Erros, ações destrutivas.

Info

info-50 → info-950

Informativos, dicas, links neutros.

Tokens semânticos

Nomes pelo papel que cumprem na UI. Cada token tem dois valores (light e dark) e referencia uma posição da escala. Esta é a camada que você consome no código. Ao trocar o tema (atributo data-theme), os valores mudam mas o nome permanece.

Superfícies

Token Light Dark Referência Uso
surface.page
#F8F8FA
#0F1014
neutral.50 / neutral.950 Fundo principal da página
surface.card
#FFFFFF
#1A1B22
white / neutral.900 Cards, modais, painéis
surface.elevated
#FFFFFF
#272831
white / neutral.800 Popovers, dropdowns, tooltips
surface.sunken
#F1F1F4
#15161D
neutral.100 / literal Inputs, code blocks, áreas rebaixadas
surface.warm
#FAF8F6
#211E1A
warm.50 / warm.900 Seções editoriais, materiais de marketing dentro do app

Texto

Token Light Dark Referência Uso
text.primary
#0F1014
#F8F8FA
neutral.950 / neutral.50 Títulos, conteúdo principal
text.secondary
#5C5F6A
#898C97
neutral.500 / neutral.400 Descrições, labels, metadados
text.tertiary
#898C97
#5C5F6A
neutral.400 / neutral.500 Placeholders, texto auxiliar
text.disabled
#C2C4CB
#43454F
neutral.300 / neutral.600 Estados desabilitados
text.inverse
#FFFFFF
#0F1014
white / neutral.950 Texto em superfícies de cor (botões primários, badges escuras)

Bordas

Token Light Dark Referência Uso
border.subtle
#E0E1E6
#32343C
neutral.200 / neutral.700 Divisores leves, bordas de card
border.default
#C2C4CB
#43454F
neutral.300 / neutral.600 Inputs, separadores fortes
border.strong
#898C97
#5C5F6A
neutral.400 / neutral.500 Bordas de hover, foco em estados secundários

Interativos

Token Light Dark Referência Uso
interactive.primary
#E75B10
#EE8240
primary.500 / primary.400 Cor de marca · monograma · ícones · links
interactive.primary-hover
#C94A0A
#E75B10
primary.600 / primary.500 Estado hover de botões e links primários
interactive.primary-active
#A33A07
#C94A0A
primary.700 / primary.600 Estado pressed/active
interactive.primary-bg
#FCE5D5
#5E2103
primary.100 / primary.900 Fundo de badges, alertas e cards de destaque
interactive.primary-bg-hover
#F8C9A3
#7E2D05
primary.200 / primary.800 Hover em fundos primary-bg
interactive.primary-text
#7E2D05
#F8C9A3
primary.800 / primary.200 Texto sobre primary-bg (passa AA com folga)

Feedback

Token Light Dark Referência Uso
feedback.success
#16A34A
#22C55E
success.600 / success.500
feedback.success-bg
#DCFCE7
#14532D
success.100 / success.900
feedback.success-text
#14532D
#BBF7D0
success.900 / success.200
feedback.warning
#CA8A04
#FACC15
warning.600 / warning.400
feedback.warning-bg
#FEF9C3
#713F12
warning.100 / warning.900
feedback.warning-text
#713F12
#FEF08A
warning.900 / warning.200
feedback.danger
#DC2626
#EF4444
danger.600 / danger.500
feedback.danger-bg
#FEE2E2
#7F1D1D
danger.100 / danger.900
feedback.danger-text
#7F1D1D
#FECACA
danger.900 / danger.200
feedback.info
#0284C7
#38BDF8
info.600 / info.400
feedback.info-bg
#E0F2FE
#0C4A6E
info.100 / info.900
feedback.info-text
#0C4A6E
#BAE6FD
info.900 / info.200

Foco

Token Light Dark Referência Uso
focus.ring
#E75B10
#EE8240
primary.500 / primary.400 Outline em foco de teclado

Overlay

Token Light Dark Referência Uso
overlay.scrim
rgba(15, 16, 20, 0.5)
rgba(0, 0, 0, 0.7)
— Fundo de modais e drawers

Temas daisyUI

Dois temas estão definidos em src/styles/global.css. O atributo data-theme no <html> controla qual aplica:

  • innova (light, default) — usa primary.500 no acento.
  • innova-dark — alterna automaticamente via prefers-color-scheme: dark; usa primary.400 para preservar contraste em fundos escuros.

Hoje a página força data-theme="innova" — o tema escuro está definido mas ainda não é alternado. Isso muda quando o controle de tema for adicionado à navbar.

Acessibilidade

Combinações texto/fundo devem atingir WCAG AA (4.5:1) para texto corrido e 3:1 para títulos grandes. Os pares semânticos já passam AA por construção:

  • text.primary sobre surface.page ou surface.card.
  • primary-text sobre primary-bg (e demais pares de feedback — success-text sobre success-bg, etc.).
  • Texto branco sobre interactive.primary (Brasa) — passa AA em tamanhos a partir de 16 px / bold.

Quando precisar de uma combinação fora desses pares, valide em WebAIM Contrast Checker antes de aprovar.