Design System
DNAi
v5
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
Base
#080C14
Fundo principal
Surface
#131D2E
Cards, painéis
Surface Raised
#1A2640
Hover states
Texto
Primary
#E8EDF5
13.8:1 (AAA)
Secondary
#A8B4C8
6.5:1 (AA)
Muted
#6B7896
large text only
Semânticas
04 — Components
Componentes ao vivo
Todos interativos. Hover e focus testados. WCAG AA em cada estado.
Botões
Beam Button (primário CTA)
Outline — Secondary CTA
Ghost — Tertiary / Low-emphasis
Amber Accent — Contextual CTA
States
Cards
AI Launch Film
Motion-led brand campaign. 2.4M impressions in 72h. Zero paid media.
Medical Content System
Scalable asset pipeline for Sanofi. 60+ pieces. 3-week delivery.
Brand Identity + Motion
Full identity system with animated assets. 4-week engagement.
Inputs
Badges & Tags
05 — Motion Demo
Work cards com motion
Hover com zoom parallax, reveal no scroll, overlay com slide-up. Padrão Studionuts adaptado à identidade DNAi.
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
Click to play
ease-power3-out
cubic-bezier(0.215, 0.61, 0.355, 1)
Slides de entrada
Click to play
ease-standard
cubic-bezier(0.25, 0.46, 0.45, 0.94)
Hover, UI geral
Click to play
Durações
Easings — IBM Carbon + DNAi
carbon-standard-productive
cubic-bezier(0.2, 0, 0.38, 0.9)
Ações produtivas, formulários, estado de sistema
Click to play
carbon-standard-expressive
cubic-bezier(0.4, 0.14, 0.3, 1)
Interfaces expressivas, hero, apresentações
Click to play
carbon-entrance-productive
cubic-bezier(0, 0, 0.38, 0.9)
Entrada de elementos UI, modais, drawers
Click to play
carbon-exit-productive
cubic-bezier(0.2, 0, 1, 0.9)
Saída de elementos, dismiss, fechar
Click to play
Arquitetura de tokens — 3 camadas
Primitivos nunca usados direto. Semânticos definem intenção. Componentes são escopados.
Primitivos
color-blue-500: #1E7BFF
color-amber-400: #C9A340
space-4: 16px
dur-300: 300ms
Valores brutos. Nunca referenciados diretamente em componentes.
Semânticos
--brand-electric → color-blue-500
--text-primary → color-neutral-95
--dur-base → dur-300
--ease-expo → bezier(0.19,1,0.22,1)
Definem intenção, não aparência. Habilitam theming.
Componentes
btn-glass-bg → brand-electric/0.06
btn-glass-border → brand-electric/0.35
card-surface → bg-surface
card-hover-shadow → glow-blue
Escopados ao componente. Referenciam semânticos.
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