Design System
DNAi
v6
Tokens. Componentes. Motion. Identidade visual que escala sem perder ponto de vista.
Assinatura Visual
A hélice de DNA.
Identidade que pulsa.
Azul elétrico. Circuitos dourados. A estrutura genética do studio — cada projeto é código, cada entrega é evolução.
01 — Foundation
Tokens de fundação
Grid 8pt. Raios de borda consistentes. Sombras com glow.
Espaçamento — escala 8pt
Border Radius
Sombras
02 — Typography
Escala tipográfica
Space Grotesk para headlines. Geist para corpo e UI. JetBrains Mono para código e dados.
Display / Headlines
Space Grotesk
Aa Bb Cc 0123
Body / UI
Geist
Aa Bb Cc 0123
Mono / Code
JetBrains Mono
Aa Bb 0123
Escala de tamanhos
03 — Color
Sistema de cores
Paleta de 5 cores. Fundos escuros com profundidade real. Azul elétrico e âmbar com glow.
Brand
Electric Blue
#1E7BFF
Accent primário
Electric Dim
#1560CC
Hover / Active
Amber
#C9A340
Accent secundário
Amber Bright
#F0A832
Ênfase máxima
Backgrounds
bg-base
#080C14
bg-surface
#131D2E
bg-raised
#1A2640
04 — Components
Componentes
Beam buttons com borda giratória. Cards com gradiente e glow. Tags, badges e inputs do sistema.
Beam Buttons
Standard Buttons
Cards com gradiente e profundidade
Visual Intelligence
AI Motion Studio
Experiências visuais com direção humana e execução em IA.
AI Automation
Automação inteligente
10–25h por semana devolvidas. Sistema que escala.
Design System
DNAi v6
Tokens. Motion. Identidade visual que não pede licença.
Tags e Badges
Inputs
05 — Motion Demo
Work cards com motion
Hover com zoom e parallax na imagem. Reveal bidirecional no scroll. Overlay com slide-up staggerado. Easing expo.out.
06 — Motion
Tokens de movimento
Easing exponencial. Durations calibradas. Nunca bounce, nunca elastic genérico.
ease-expo-out
cubic-bezier(0.19, 1, 0.22, 1)
Reveals, ScrollTrigger, Lenis
Click to play
ease-studionuts
cubic-bezier(0.16, 1, 0.3, 1)
Cards, hover, work grid
Click to play
ease-power3-out
cubic-bezier(0.215, 0.61, 0.355, 1)
Slides de entrada
Click to play
Durações
07 — Voice
Tom de voz
Direto. Confiante. Sofisticado sem ser arrogante. Studio global, não agência genérica.
- Concreta: "10h/semana presas em tarefas repetitivas"
- Curatorial: tem ponto de vista, não executa qualquer demanda
- Premium sem hype: qualidade se mostra, não se anuncia
- Direta: frase curta. Impacto visual antes de explicação
- revolucionário, disruptivo, transformação digital
- sinergia, guru, hack, growth ninja
- viralizar, IA mágica, robozinho
- startup hype, cyberpunk gratuito
CTAs padrão DNAi
Fórmula de headline
"Sua operação tem 10–25h por semana presas em tarefas repetitivas. A DNAi devolve esse tempo."
Fato concreto + resultado específico