Módulo 2.1 · Design system completo

📐 Anatomia do DESIGN.md — as 7 seções canônicas

📐 Anatomia do DESIGN.md

O DESIGN.md não é um README elaborado — é um contrato. Claude segue à risca. Se está lá, sai no design. Se não está, Claude improvisa (e cai no viés newspaper).

Estrutura mínima

# [Marca]
## Brand
- Tom: [confiante / casual / técnico]
- Não-negociáveis: [sem gradientes, sem emojis...]

## Colors
- Primary: #XXXXXX (oklch 0.65 0.12 250)
- Neutral scale: #f8fafc → #0f172a

## Typography
- Headline: "Newsreader", serif
- Body: "Inter Tight", sans

## Spacing
- 4/8/12/16/24/32/48/64

## Radii
- card: 12px · button: 6px

## Components
- Button primary: bg primary, text white, radius 6, padding 12/24

## Voice
- Say: "Veja como", "Você pode"
- Avoid: "Revolucione", "Desbloqueie", "Transform"

🔗 Conectar repo + Figma + guideline

As três fontes da marca: código real (tokens exatos), design visual (Figma, screenshots), regras escritas (guideline PDF). Cada uma traz info que a outra não traz.

REPO

Hex exatos, font stacks, spacing scale implementada. Fonte da verdade técnica.

FIGMA

Componentes visuais, variantes, estados hover/active. Fonte da verdade visual.

GUIDELINE

Tom, don'ts, exemplos antes/depois, princípios. Fonte da verdade filosófica.

🎨 Paleta: OKLCH salva quando marca aperta

System prompt fala explicitamente: "Se o design system é restritivo demais, use oklch para definir cores harmônicas que combinem com a paleta existente."

Exemplo: marca só dá 2 cores

/* Marca: primary #2563eb, dark #0f172a */
/* Claude deriva harmônicas via OKLCH */
--primary: oklch(55% 0.22 258);   /* azul marca */
--primary-muted: oklch(55% 0.10 258);  /* sem saturação */
--accent: oklch(55% 0.22 288);    /* violeta complementar */
--success: oklch(55% 0.18 160);   /* verde equivalente */
--danger: oklch(55% 0.22 25);     /* vermelho equivalente */

Mesma luminosidade e saturação → harmonia visual automática.

🔤 Fugir de Inter/Roboto

O system prompt lista Inter, Roboto, Arial e Fraunces como "overused" — pede pra evitar se você quer design distintivo. Alternativas que aparecem em design premium em 2026:

HEADLINE SANS

Inter Tight, Geist, Manrope, Söhne, Neue Haas Grotesk, Space Grotesk

HEADLINE SERIF

Newsreader, Reckless, Instrument Serif, Tiempos, Canela, Söhne Schmal

BODY

Geist, Söhne, Basis Grotesque, GT Walsheim. Evite Inter se possível.

MONO

Geist Mono, JetBrains Mono, Berkeley Mono, Söhne Mono

📏 Spacing, radii, shadows — os tokens invisíveis

Spacing consistente é o que diferencia "design" de "coisas arrumadas". 4/8/12/16/24/32/48/64 é uma scale madura e comum.

💡 Regra do "30%"

Se spacing + radii + shadows estão consistentes, você já tem 30% do feeling premium resolvido. Os outros 70% são paleta, tipo e copy.

🗣️ Tom de voz é parte do design

Copy genérico AI ("Revolucione seu workflow", "Desbloqueie o potencial") é o sintoma #1 de "sem DESIGN.md". Claude inventa — e inventa ruim.

✍️ Comparativo: mesma mensagem, tons diferentes

✅ Resumo do Módulo

✓

DESIGN.md em 7 seções — brand, colors, typography, spacing, radii, components, voice.

✓

3 fontes da marca — repo (técnica), Figma (visual), guideline (filosófica).

✓

OKLCH para derivar — quando marca só dá 2 cores, derive harmônicas via mesma L/C.

✓

Fuja de Inter/Roboto — system prompt explicitamente flagra. Use Geist, Söhne, Newsreader.

✓

30% do feeling vem de tokens invisíveis — spacing + radii + shadows consistentes.

✓

Voice é design — sem DS do, Claude inventa copy genérico AI.

Próximo Módulo:

2.2 — 📚 Context stacking

← Trilha 2 Módulo 2.2 →