Design System
O sistema de interface da Fenice Lab — fundamentos, componentes e diretrizes sobre a paleta terrosa. Vermelho + neutros quentes, um acento (terracota), zero azul e zero dourado.
Cor
Tokens semânticos primeiro — pense em papel, não em matiz. As escalas existem para hover/borda/fundo. Estados funcionais usam tons terrosos.
Tipografia
Fraunces para display/títulos, Inter para corpo e UI. Escala modular com line-height confortável.
Espaçamento
Escala base 4pt. Use múltiplos consistentes para padding, gap e margens.
Raios & Elevação
Cantos arredondados suaves e sombras quentes (baseadas em Caffè, não preto puro).
Grid & Layout
Grid de 12 colunas, gutter 24px, container máx 1200px. Mobile colapsa para 4 colunas.
Iconografia
Traço 1.6px, cantos arredondados, grade 24px. Estilo linear, coerente com a leveza do wordmark.
Botões
Cinco variantes. primary (gradiente fogo) para a ação principal — só uma por tela.
Formulários
Campos com foco em terracota suave. Erro em Terra Fenice. Alvos mínimos de 44px.
Feedback
Alertas, badges e progresso com cores funcionais terrosas.
Exibição de dados
| Cliente | Status | Automações |
|---|---|---|
| A Arena Gourmet | Ativo | 14 |
| S Suprema Pizza | Em setup | 6 |
Overlays
Acessibilidade
Contraste mínimo AA. Focus ring sempre visível (anel terracota). Alvos de toque ≥ 44px.
Tokens de referência
Disponíveis em tailwind.config.ts, fenice-theme.css (v4), fenice-tokens.css e fenice-tokens.json.
| Token | Valor | Uso |
|---|---|---|
--primary | #B23A2E | Ação principal, marca |
--accent | #CC7A4D | Destaque pontual |
--surface | #F3ECE2 | Fundo base |
--text | #2A211C | Texto corpo |
--border | #E6DAC8 | Bordas, divisores |
--r-md | 12px | Raio padrão |
--sh-md | 0 6px 18px | Elevação de cards |