DNAi — Design System

01 — Foundation

Princípios de design

O sistema visual da DNAi nasce da dupla hélice: duas forças em tensão produtiva. Inteligência humana e execução em IA. Rigor editorial e impacto visual. Cada decisão serve à clareza — não ao efeito.

Clareza antes de efeito

Motion, glow e textura existem para comunicar hierarquia — nunca como decoração. Se remover não quebra o entendimento, remove.

Grid é lei

Espaçamento em múltiplos de 8px em toda a interface. White space generoso é decisão criativa, não descuido.

Tipografia como arquitetura

Hierarquia forte. Contraste dramático entre display e corpo. Tamanhos construídos com clamp() — fluido entre breakpoints.

Dark como postura

Fundo grafite-azul profundo não é trend — é a postura de um studio global. Glows e glassmorphism: sparingly, com propósito de hierarquia.

Acessibilidade inegociável

WCAG 2.1 AA mínimo. Contraste 4.5:1 em texto principal. prefers-reduced-motion respeitado. Focus visible. Alt em toda imagem.

A hélice como identidade

DNAi = DNA + AI. A dupla hélice recriada em SVG/CSS — azul elétrico com traços dourados de circuito — é a assinatura visual que aparece em hero, divisores e texturas.

02 — Color

Paleta de cores

Cinco papéis. Hex exatos. Contraste WCAG 2.1 AA confirmado em todas as combinações de texto.

Backgrounds

--ds-bg #070B14 Base background

--ds-bg-1 #0D1424 Section alt background

--ds-surface #131D2E Cards, panels

--ds-surface-2 #1A2540 Elevated surface

Brand Primary — Electric Blue

--ds-blue #1E7BFF Primary action, links, helix vs #070B14 — 8.1:1 AAA

--ds-blue-2 #0055CC Hover state, pressed

--ds-blue-dim rgba(30,123,255,0.12) Tag backgrounds, tints

Brand Accent — Amber Gold

--ds-gold #F0A832 Circuit traces, accent, helix vs #070B14 — 7.4:1 AAA

--ds-gold-2 #C8861A Gold hover, darker

--ds-gold-dim rgba(240,168,50,0.10) Gold tint, subtle bg

Text

--ds-text #E8EDF5 Primary text · 15.8:1 AAA

--ds-text-2 #8FA3C0 Secondary · 6.1:1 AA

--ds-text-3 #4A6080 Disabled, captions only

Uso correto

Do

Texto principal em #E8EDF5

Texto secundário em #8FA3C0

Link em #1E7BFF →

Texto sempre em camadas de texto definidas. Links sempre em azul elétrico.

Don't

Texto em --ds-text-3 como corpo

Gold como texto longo

--ds-text-3 falha AA em parágrafo. Gold é acento — nunca texto corrido.

03 — Typography

Tipografia

Fraunces Variable para display — serifa editorial dramática com optical size axis. Inter Variable para interface — máxima legibilidade digital. JetBrains Mono para labels técnicos.

Fraunces · Display · 300 weight · optical size 9–144

Creative
Intelligence

Escala tipográfica

--ds-t-hero clamp(3.5rem, 8vw+2rem, 9rem) Hero headline

Hero

--ds-t-4xl clamp(3rem, 5vw+1.8rem, 5.5rem) Section title display

Section

--ds-t-3xl clamp(2.25rem, 3.5vw+1.5rem, 3.5rem) H2, section heading

Heading

--ds-t-2xl clamp(1.75rem, 2.2vw+1.2rem, 2.5rem) H3, card title

Subheading

--ds-t-xl clamp(1.375rem, 1.5vw+1rem, 1.75rem) Lead paragraph, quote

Lead text

--ds-t-base clamp(1rem, 0.9vw+0.8rem, 1.125rem) Body, UI labels

Body copy

--ds-t-sm clamp(0.875rem, 0.7vw+0.7rem, 1rem) Captions, form labels

Caption

--ds-t-xs (mono) clamp(0.75rem, 0.6vw+0.6rem, 0.875rem) Tags, badges, overlines

LABEL

Regras de uso

Line height

Display: 1.0–1.1
Headings: 1.1–1.2
Body: 1.65–1.75
Mono/labels: 1.4

Letter spacing

Display: −0.02em a −0.04em
Headings: −0.01em
Body: 0 (default)
Labels/mono: +0.08em a +0.18em

Peso máximo por contexto

Display: 200–400 (dramático via leveza)
Headings: 400–600
Body: 400 regular
Labels: 500–600

04 — Spacing & Grid

Espaçamento e grid

Sistema 8pt puro. Todos os espaçamentos são múltiplos de 8px. Grid de 12 colunas com gutters de 24px. Breakpoints Mobile/Tablet/Desktop/Wide.

Escala de espaçamento

sp-14px

sp-28px

sp-312px

sp-416px

sp-624px

sp-832px

sp-1248px

sp-1664px

sp-2080px

sp-2496px

sp-32128px

Breakpoints

Mobile

375px

1 col · padding 24px

Tablet

768px

6 col · padding 40px

Desktop

1280px

12 col · padding 80px

Wide

1440px+

max 1280px centered

Demonstração — 12 colunas

Span 8 — main content

Span 4 — sidebar

05 — Components

Componentes ao vivo

Todos os estados. Todos os tamanhos. Acessíveis por padrão.

Botões

Sizes: SM · MD (default) · LG. Touch target mínimo: 44×44px

Badges & Tags

AI Motion Premium Live Draft Strategy Craft

Links

A DNAi cria experiências visuais com direção humana e execução em IA. Cada projeto começa com um ponto de vista — nunca com um template.

Formulário

Nome completo

E-mail

Mensagem

Case cards

View case →

Brand Identity 2026

SalesHelix AI Platform

DNAi Global AI Studio

View case →

Digital Experience 2025

TZIELD Healthcare Campaign

Sanofi · Reeve Studio

06 — Motion

Princípios de motion

Easing exponencial. Nunca bounce, nunca elastic. Motion serve o conteúdo — se remover sem perder clareza, remove.

Curvas de easing

ease-out-quart

cubic-bezier(0.16, 1, 0.3, 1)

Entrada de elementos, reveal

Clique para demonstrar

ease-in-out

cubic-bezier(0.4, 0, 0.2, 1)

Transição entre estados

Clique para demonstrar

ease-out (rápido)

cubic-bezier(0, 0, 0.2, 1) · 180ms

Hover, micro-interações

Clique para demonstrar

Escala de duração

180ms

Fast

Hover, focus, micro-states

320ms

Base

Component reveal, cards

600ms

Slow

Page transitions, hero

1200ms+

Ambient

Helix, particles, loops

Nunca usar

bounce elastic spring(overshoot) ease-in (entrada) animation-delay > 600ms sem motivo

prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

07 — Helix

A hélice como identidade

DNAi = DNA + AI. A dupla hélice recriada em SVG animado: azul elétrico como fio principal, traços dourados como circuitos internos. Elemento de marca — não decoração.

Dupla hélice de DNA tecnológica

Criada inteiramente em canvas 2D. Sem imagem externa. Dois filamentos sinusoidais em azul elétrico (#1E7BFF). Barras de conexão ("rungs") em dourado/âmbar (#F0A832) com opacidade variável — simulando traços de circuito. Partículas subtis completam o ambiente.

Filamentos: #1E7BFF Electric Blue

Circuitos: #F0A832 Amber Gold

Glow: rgba(30,123,255,0.35)

Usos corretos da hélice

Do

Hero em tela cheia — hélice centralizada em canvas full-width com opacidade 40–60%.
Divisor de seção — versão horizontal fina, opacidade 20–30%.
Background de card com glassmorphism — hélice como textura, opacidade 8–15%.

Cuidado

Não sobrepor a hélice sobre texto de corpo — reduz legibilidade.
Não usar em tamanhos menores que 120px de altura — detalhe se perde.
Não usar com velocidade alta — movimento lento é elegância.

Don't

Não usar em contextos de terceiros (clientes) — é assinatura DNAi.
Não alterar as cores para outras paletas de cor.
Não usar imagem rasterizada — sempre SVG/canvas gerado em código.

08 — Iconography & Logo

Ícones e logo

Ícones: Phosphor Icons (linha, 1.5px stroke). Logo: master em SVG/PNG 4K. Versão horizontal para hero. Versão 2 linhas para headers pequenos e favicons.

Uso do logo

Fundo escuro · Logo 2 linhas (padrão)

Usar em fundos #070B14 a #131D2E

Fundo claro · Variante

Usar apenas em contextos muito específicos

Regras de uso

→ Respiro mínimo: 1× a altura do logotipo em todos os lados
→ Tamanho mínimo digital: 80px de largura
→ Sempre usar arquivo PNG 4K do master — nunca screenshots
→ Versão 1 linha para hero e casos com espaço horizontal

Proibido

× Esticar ou distorcer proporção
× Sobrepor sobre fotos sem contraste suficiente
× Usar JPEG enviado por Telegram como master
× Recolorir manualmente — só versões aprovadas

Ícones Phosphor — exemplos

Globe

User

TrendUp

Bookmark

Clock

ScanPlus

1.5px stroke · 24px base · color: currentColor · Phosphor Icons OSS

09 — Voice & Tone

Tom de voz para UI

Sofisticado · Direto · Seguro · Estratégico · Premium.
Nunca startup hype, nunca cyberpunk gratuito, nunca infantil.

CTAs aprovados

Usar

"Start a project" Específico, ação clara, premium

"See the work" Direto, sem exclamação

"Get in touch" Humano, profissional

"View case study" Descritivo, sem hype

Banido

"Saiba mais" Genérico, informa nada

"Clique aqui!" Imperativo ingênuo + exclamação

"Revolucione seu negócio" "Revolucione" — banida

"IA mágica que resolve tudo" Hype, impreciso, sem credibilidade

Headline em ação

Aprovado — padrão DNAi

Creative intelligence
for modern brands.

Transformando visão humana em IA criativa.

Palavras banidas

revolucionário disruptivo transformação digital sinergia guru hack growth ninja viralizar IA mágica robozinho utilizar inovador

Tagline núcleo

"Transformando visão humana em IA criativa."

EN: "Where human vision becomes creative AI."