Sistema de Design
Linguagem visual glassmorphism, dark-first, extraída de um painel de casa inteligente. Acento azure sobre superfícies de vidro fosco, cantos generosamente arredondados e sombras suaves. Construído com Next.js, Tailwind v4 e shadcn/ui.
Cor primária
Azure #2E9DF4
Fonte
Inter
Raio base
1rem
Estilo
Glassmorphism
Cores
Tokens semânticos via variáveis CSS (globals.css). Use sempre as classes Tailwind (bg-primary, text-muted-foreground) — nunca cores hardcoded.
Superfícies & neutros
background
--background
foreground
--foreground
card
--card
popover
--popover
muted
--muted
muted-foreground
--muted-foreground
accent
--accent
secondary
--secondary
border
--border
input
--input
ring
--ring
Marca & semânticos
primary
bg-primary
secondary
bg-secondary
accent
bg-accent
destructive
bg-destructive
success
bg-success
warning
bg-warning
info
bg-info
Escala primária (azure) — 50 a 900
50
#EFF8FF
100
#DBEEFE
200
#BAE0FD
300
#8ECDFB
400
#57B2F7
500
#2E9DF4
600
#1B82DB
700
#186BB3
800
#195A91
900
#1A4C77
Escala neutra (cinza-frio) — 50 a 900
50
#F6F7F9
100
#ECEEF1
200
#D7DBE0
300
#B5BCC5
400
#8A929E
500
#646C78
600
#4A515B
700
#353A42
800
#23272D
900
#15181C
Tipografia
Inter — sans-serif neutra e geométrica. Pesos leves para números de display, médios para rótulos.
Raio de borda
Token base --radius: 1rem (16px). A escala deriva dele: sm, md, lg, xl, 2xl e pílula completa.
rounded-sm
rounded-md
rounded-lg
rounded-xl
rounded-2xl
rounded-full (pill)
FAB
Sombras
Sombras suaves e difusas. O efeito de vidro vem da combinação de superfície translúcida + backdrop-blur.
shadow-sm
shadow-md
shadow-lg
shadow-xl
Termostato
64°F
Vidro fosco · bg-card/60 + backdrop-blur-2xl
Componentes
Componentes shadcn/ui usando os tokens do sistema. Páginas dedicadas serão adicionadas no Prompt 2.
Button
Card
Badge
Alert
Radio Group
Estados financeiros
Badges e chips usados nas features de webhook, importação e caixa de revisão.