MD14_JUNNY_UI_UX_DESIGN_SYSTEM.md
Junny UI / UX
Identidade visual oficial: dark-first, minimalista e orientada a desenvolvedores — mais limpa que Postman, mais moderna que Bruno (objetivo estratégico).
Paleta (Tailwind + CSS variables)
junny-violet · primário
junny-blue · secundário
junny-bg · fundo
Aa
junny-text · primário
Secundário
junny-muted
Estados
SucessoAvisoErroInfo
Tailwind @theme: junny-success · junny-warning · junny-error · junny-info
Tipografia
H1 — destaque
H2 — secções principais
H3 — subsecções
Body — Inter (principal); alternativa planeada: Geist.
Espaçamento (px)
4
8
12
16
24
32
48
64
Raio & sombra
Padrão 12px · grande 16px · sombras suaves (sem visual pesado).
Inspirações oficiais
Linear · Raycast · Vercel · Supabase
Componentes (catálogo)
- Button
- Card
- Input
- Tabs
- Sidebar
- Navbar
Vários já existem na app (ex.: botão, badge, card na pasta shared); evolução para biblioteca Angular em packages/ui.
Princípios UX
- Developer-first
- Dark-first
- Less noise
Fora do âmbito inicial
- theme editor
- visual builder