Design System

DNAi
v5

Tokens. Componentes. Motion. Identidade visual que escala sem perder ponto de vista.

Explorar o sistema Ver motion
47 Design tokens
12 Componentes
WCAG AA certificado

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.

DNA helix com circuitos dourados — azul elétrico vertical
Electric Blue DNA
Hélice de DNA digital com traços de luz azul
Circuit Gold
Hélice de DNA sobre painel de circuitos
Tech Premium
DNA helix horizontal com glow azul
Horizon
Estrutura de DNA tridimensional com partículas azuis
Depth
DNA digital com luz âmbar
Amber Signal

01 — Foundation

Tokens de fundação

Grid 8pt. Raios de borda consistentes. Sombras com glow.

Espaçamento — escala 8pt

sp-1 / 4px
sp-2 / 8px
sp-3 / 12px
sp-4 / 16px
sp-6 / 24px
sp-8 / 32px
sp-12 / 48px
sp-16 / 64px
sp-24 / 96px

Border Radius

sm / 4px
md / 8px
lg / 16px
xl / 24px
full / pill

Sombras

shadow-sm
shadow-md
shadow-lg
glow-blue
glow-amber

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

Display / clamp(56–120px) Global AI Studio
H1 / clamp(40–80px) Human-led. AI-powered.
H2 / clamp(28–52px) Design tokens
H3 / clamp(20–32px) Motion cinematográfico
Body-lg / 18px Sua operação tem 10–25h por semana presas em tarefas repetitivas.
Body / 16px Tokens de cor, tipografia, espaçamento e motion — a constituição visual da DNAi.
Caption / 12px v5 · Design System · DNAi Global AI Studio · 2026
Mono / Label 01 — foundation

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

Success#22C55E
Warning#F59E0B
Error#EF4444
Info#38BDF8

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

Case Study

AI Launch Film

Motion-led brand campaign. 2.4M impressions in 72h. Zero paid media.

AI Motion View case
Healthcare

Medical Content System

Scalable asset pipeline for Sanofi. 60+ pieces. 3-week delivery.

Healthcare System View case
Premium

Brand Identity + Motion

Full identity system with animated assets. 4-week engagement.

Branding Start a project

Inputs

Badges & Tags

AI Premium Live Draft Healthcare Motion CGI Gold tier

05 — Motion Demo

Work cards com motion

Hover com zoom parallax, reveal no scroll, overlay com slide-up. Padrão Studionuts adaptado à identidade DNAi.

DNA helix close-up com circuitos dourados
01

AI Launch Film

Motion-led brand campaign

AIMotion
View case
DNA helix horizontal — glow azul elétrico
02

Medical Content System

Scalable healthcare asset pipeline

HealthcareSystem
View case
Estrutura 3D de DNA com partículas azuis
03

Brand Identity + Motion

Full identity with animated assets

BrandingCGI
View case
Hélice de DNA em azul elétrico com luz radiante
04

AI Social Sales CRM

SalesHelix — 360° SDR intelligence

SaaSAI
View case
DNA digital com acento em luz âmbar dourado
05

Autobless Brand Guide

Visual identity for premium mobility

PremiumBrand
View case

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

fast 150ms Hover states
base 300ms UI transitions
slow 600ms Scroll reveals
cinematic 1000ms Hero intro, page transitions

07 — Voice

Tom de voz

Direto. Confiante. Sofisticado sem ser arrogante. Studio global, não agência genérica.

DNAi É
  • 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
PALAVRAS BANIDAS
  • revolucionário, disruptivo, transformação digital
  • sinergia, guru, hack, growth ninja
  • viralizar, IA mágica, robozinho
  • startup hype, cyberpunk gratuito

CTAs padrão DNAi

Contato
Portfólio
Proposta
Demo

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