AERO Design System
O guia oficial de estilo e biblioteca de componentes do AERO. Construído dark-first, combina densidade de informação com interfaces limpas para planejar na velocidade do pensamento. Esta página é renderizada com os próprios tokens --color-* do projeto — tudo aqui é fonte da verdade.
Introdução ao Estilo
A identidade do AERO é fundamentada em produtividade sem fricção: um tema escuro permanente que reduz fadiga visual, combinado com uma tipografia geométrica neutra. No produto, isso se reflete em:
Dark-First
Superfícies em camadas — de primary (#24262F) ao profundo background (#0E1015) — criam hierarquia sem bordas duras. A cor de ação brand (#388CFA) guia o olhar apenas para o que é interativo.
Densidade com Respiro
Inter em pesos 400–700 para texto corrido e títulos, espaçamento em múltiplos de 4px e radius suave (rounded-md–2xl) equilibram a densidade de informação de boards, tabelas e timelines.
Cores
Fonte da verdade: app/globals.css · DESIGN_SYSTEM.md §1
Paleta semântica definida como variáveis CSS em :root e exposta ao Tailwind via @theme inline. Componentes consomem estes tokens — nunca valores arbitrários.
Marca e Estrutura 7 tokens · superfícies e ação
Primary
bg-primary · #24262F
Fundo principal da aplicação (Body).
Primary 10
bg-primary-10 · #1D1F26
Painéis (Sidebar), cards primários.
Primary 20
bg-primary-20 · #17181D
Inputs, dropdowns.
Primary 30
bg-primary-30 · #101115
Sombras profundas, bordas sutis.
Brand (Info)
bg-brand · #388CFA
Ação principal (links, botões primários).
Background
bg-background · #0E1015
Fundo alternativo profundo.
Card
bg-card · #1A1C23
Superfícies elevadas.
Texto e Conteúdo (Neutral) 5 tokens · hierarquia de leitura
Neutral
text-neutral · #FFFFFF
Títulos, texto de alto contraste.
Neutral 10
text-neutral-10 · #F5F5F5
Texto do corpo principal.
Neutral 20
text-neutral-20 · #D4D4D4
Legendas, descrições secundárias.
Neutral 30
text-neutral-30 · #A3A3A3
Placeholders, ícones inativos.
Neutral 40
text-neutral-40 · #737373
Bordas desabilitadas.
Feedback e Status 5 tokens · estados semânticos
Success
bg-success · #18821C
Concluído, seguro, positivo.
Warning
bg-warning · #A35A01
Atenção, pendente, cuidado.
Danger
bg-danger · #911756
Erro, falha, ação destrutiva.
Info
bg-info · #008E8E
Informativo, neutro.
Accent
bg-accent · #535C91
Destaque secundário, badges, tags.
Tipografia
Fonte da verdade: DESIGN_SYSTEM.md §2
Família
Inter
Google Fonts · pesos 300, 400, 500, 600, 700
Aa Bb Cc — 0123
Display H1
36px / 2.25rem · peso 700 · lh 1.2
text-4xl font-bold
Planeje na velocidade do pensamento
H1 (Page Title)
30px / 1.875rem · peso 600 · lh 1.3
text-3xl font-semibold
Dashboard do Projeto
H2 (Section)
24px / 1.5rem · peso 600 · lh 1.3
text-2xl font-semibold
Sprint Atual
H3 (Card Title)
20px / 1.25rem · peso 600 · lh 1.4
text-xl font-semibold
Atividade Recente
Body (Default)
16px / 1rem · peso 400 · lh 1.5
text-base
Gerencie tarefas, ciclos e módulos do seu projeto em um só lugar.
Small
14px / 0.875rem · peso 400 · lh 1.5
text-sm
Última atualização há 2 horas
Tiny / Label
12px / 0.75rem · peso 500 · lh 1.2
text-xs font-medium
EM PROGRESSO
Espaçamento
Fonte da verdade: DESIGN_SYSTEM.md §3
Baseado na escala de 4px do Tailwind. Use sempre múltiplos de 4.
2px
0.125rem · p-0.5
4px
0.25rem · p-1
8px
0.5rem · p-2
12px
0.75rem · p-3
16px
1rem · p-4
24px
1.5rem · p-6
32px
2rem · p-8
64px
4rem · p-16
Shape (Radius + Bordas)
Fonte da verdade: DESIGN_SYSTEM.md §4
radius.sm
0.125rem · rounded-sm
Badges, checkboxes.
radius.md
0.375rem · rounded-md
Botões, inputs.
radius.lg
0.5rem · rounded-lg
Cards, modais pequenos.
radius.xl
0.75rem · rounded-xl
Modais principais.
radius.2xl
1rem · rounded-2xl
Painéis flutuantes.
Bordas (Strokes)
Padrão:border-primary-30 — separadores e divisórias sutis.
Ativa:border-brand ou neutral-40 — foco e estados ativos.
Sombras / Elevação
Em tema escuro, elevação é comunicada principalmente por superfícies mais claras; sombras reforçam camadas flutuantes.
shadow-sm
Elevação discreta, hover em itens.
shadow-md
Cards de conteúdo, dropdowns.
shadow-lg
Popovers, menus flutuantes.
shadow-xl
Modais, command palette.
Iconografia
Fonte da verdade: DESIGN_SYSTEM.md §5
Biblioteca: Lucide React · estilo Line (outline), stroke 2px (1.5px para ícones grandes). Ícones herdam currentColor e usam text-neutral-30 quando inativos.
16px · w-4 h-4
20px · w-5 h-5
24px · w-6 h-6
inativo
Efeitos Especiais
Fonte da verdade: app/globals.css · DESIGN_SYSTEM.md §6
Aurora Background
.aurora-bg — gradiente animado de 15s para áreas de destaque.
.focus-ring — outline brand 2px, offset 2px, respeita focus-visible.
Scrollbar customizada — 8px, track primary-20, thumb #2C2F47 com radius 4px.
Showcase: Botões
Fonte da verdade: components/ui/button.tsx
Variantes
default usa bg-brand · destructive usa bg-danger · foco com ring brand 2px em todas.
Tamanhos
Estados
Disabled aplica opacity-50 e pointer-events-none.
Showcase: Badges
Fonte da verdade: components/ui/badge.tsx
Radius pill (rounded-full), texto text-xs font-semibold, mapeados para os tokens de feedback.
Showcase: Inputs
Fonte da verdade: components/ui/input.tsx
Placeholder em neutral-30.
O preenchimento deste campo é obrigatório.
Outros Componentes
Fonte da verdade: components/ui/
Checkbox
Avatar
Fallback com iniciais quando não há imagem.
Tooltip
Skeleton
Estado de carregamento que preserva o layout.
Governança
Fonte da verdade: DESIGN_SYSTEM.md §7
- Qualquer nova cor deve ser adicionada às variáveis CSS em
app/globals.cssantes de ser usada. Evite valores arbitrários (ex.:bg-[#123456]). - Use os tokens semânticos (
bg-card,text-neutral-20, …) sempre que possível para facilitar manutenção de temas futuros. - Componentes novos nascem em
components/ui/com variantes viacvae devem ser exibidos nesta página.