Innova

01 · Design System

Tokens de produto

Camada técnica do manual: tokens, escalas e classes utilitárias para construir interfaces digitais consistentes com a marca. Para diretrizes institucionais (logo, papelaria, materiais impressos), comece por o manual de marca.

Como o sistema se organiza

  1. Escalas — paleta numerada 50→950, definida em public/data/design-system.json e exposta como variáveis Tailwind (ex.: bg-primary-500).
  2. Tokens semânticos — nomes pelo papel (surface.card, text.primary, interactive.primary), com valor para light e dark.
  3. Tema daisyUI — dois temas (innova e innova-dark) que mapeiam --color-primary, --color-base-*, etc. para os tokens acima.
  4. Utilitários tipográficos — cinco classes em progressão Fibonacci + text-eyebrow, cada uma com tamanho, peso, line-height e letter-spacing calibrados em um único nome. Documentadas em Tipografia.

Áreas

Cores

Escalas 50–950 (neutral, warm, primary, success, warning, danger, info) e tokens semânticos com versões light e dark.

vive em Marca › Cores › Sistema

Abrir →

Tipografia

Régua Fibonacci com 5 classes (text-display, text-heading, text-title, text-body, text-small) + text-eyebrow, responsividade fluida via clamp() e cores via text-base-content + opacidade.

vive em Marca › Tipografia › Sistema

Abrir →

Espaçamento

Escala de espaçamento e raios de canto.

Abrir →

Arquivos-fonte

  • public/data/brand-colors.json — cores institucionais (HEX/RGB/CMYK).
  • public/data/design-system.json — escalas e tokens semânticos.
  • src/styles/global.css — temas daisyUI, variáveis Tailwind e utilitários tipográficos.
  • src/tokens/*.ts — wrappers TypeScript que carregam os JSONs e exportam para os componentes.