Design System
Diretrizes de marca, cores, tipografia e componentes para produtos ChronoKairo.
Logotipo
O logotipo combina dois losangos em silhueta de infinito: </> (código) e ampulheta (tempo).
currentColorFundo escuro · filter: invert(1)<img src="/logo.svg" alt="ChronoKairo" className="w-8 h-8" />
Cores
Paleta clara (warm off-white) e escura (deep black com verde). A cor muted-foreground muda de azul (#4a6fa5) para verde (#5dba7d) no dark mode.
Background
#faf9f5
#0a0a0a
Foreground
#0a0a0a
#fafafa
Primary
#0a0a0a
#fafafa
Secondary
#f2f1ed
#171717
Muted
#ece9e1
#141f1a
Muted Foreground
#4a6fa5
#5dba7d
Accent
#ece9e1
#141f1a
Border
#e2e0d8
#262626
Card
#faf9f5
#121212
Tipografia
Duas famílias principais: Newsreader (serifa, display) e Inter (sans-serif, corpo). Mono reservado para código e badges.
Display
Newsreader
Sans
Inter
Mono
ui-monospace
Espaçamento
Escala baseada em incrementos de 4px. Use gap, p-*, m-* e space-y-* do Tailwind.
Componentes
Componentes baseados em shadcn/ui com customizações de borda, glass e cores do tema.
Buttons
<Button className="rounded-full bg-foreground text-background">Primário</Button>
Badges
<Badge variant="outline" className="font-mono text-xs tracking-wider">Tag</Badge>
Glass / Acrylic
<div className="glass">Conteúdo</div> <div className="acrylic">Conteúdo</div>
Text Gradient
Tecnologia no tempo certo
<p className="text-gradient">Texto</p>
Iconografia
Ícones via lucide-react. Marca Kairos usa Hourglass, Chronos usa <code />.
Gradientes
Gradient sutil usado em backgrounds de seções. Varia entre light e dark mode.
Light Subtle
#faf9f5 → #ece9e1
Dark Subtle
#0a0a0a → #141f1a
Voz e Tom
Tom direto, técnico e confiante. Use português brasileiro. Prefira frases curtas. Sem jargão vazio.
✓ FAÇA
- • “Automação de processos com IA”
- • “Integramos com seu sistema legado”
- • “Tecnologia no tempo certo”
✗ EVITE
- • “Solução disruptiva 360°”
- • “Sinergia de plataforma omnichannel”
- • “Paradigma de transformação digital”