Claude Design

Tenho os arquivos do meu design system pessoal nesta pasta. Leia com atenção:
- docs/design-system/tokens.md (tokens completos: cores, tipografia, espaços, radius, sombras)
- docs/design-system/design-system.css (CSS custom properties)
- docs/brand-brief.md (personalidade, adjetivos, referência visual, tom de voz)

Com base nesses arquivos, crie um KV (key visual) sofisticado que vai além de um style guide básico.
O objetivo é um sistema visual com caráter — não uma paleta genérica.

═══════════════════════════════
01 — FUNDAÇÃO VISUAL
═══════════════════════════════

PALETA
- Swatches da cor primária em 5 variações de luminosidade (100 → 900)
- Gradiente de assinatura da marca: linear de 135° entre a primária e uma versão mais quente/fria
- Cor de destaque secundária derivada da referência visual do brief
- Neutros completos: preto, superfície, borda, texto muted, branco

TEXTURA DE FUNDO (efeito noise / grain)
- Crie um SVG de ruído sutil (feTurbulence baseFrequency="0.65" numOctaves="3")
- Use como overlay no fundo escuro com opacidade 3-5% — dá profundidade sem peso
- Aplique também em uma variação de card como background-image

TIPOGRAFIA COM CARÁTER
- Fonte primária dos tokens em tamanhos xs → 4xl com preview de texto real
- Fonte de display/heading em peso 800-900 se a personalidade for mais ousada,
  ou 300 light italic se for mais sofisticada — derive dos adjetivos do brief
- Pair tipográfico: mostre heading + body juntos num bloco de texto real
- Letter-spacing variável: tracking tight no heading, normal no body
- Preview de número/stat em tamanho 4xl com a cor primária (ex: "12+", "100%")

═══════════════════════════════
02 — COMPONENTES COM VIDA
═══════════════════════════════

BOTÃO PRIMÁRIO — 3 estados + variações
- Default: background gradiente da assinatura (não cor sólida), border-radius dos tokens
- Hover: shift de 8° no gradiente + translateY(-2px) + shadow elevada
- Disabled: 40% opacidade, cursor not-allowed
- Variação ghost: border 1.5px solid primária, background transparente
- Variação destructive: cor --color-error com mesmo tratamento de gradiente

CARD — sistema de elevação
- Nível 0 (flat): border sutil, sem shadow
- Nível 1 (raised): shadow-sm, hover → shadow-md + translateY(-4px)
- Nível 2 (floating): shadow-lg, efeito de glow com box-shadow duplo (shadow + glow primário)
- Card com accent bar: 3px solid primária no lado esquerdo
- Micro-animação de entrada: fade-in + slide-up (0.3s ease-out)

INPUT DE TEXTO — estados completos
- Default: border var(--color-border), background var(--color-surface)
- Focus: border var(--color-primary) + box-shadow glow (0 0 0 3px rgba(primária, 0.2))
- Error: border var(--color-error) + mensagem de erro abaixo
- Success: border var(--color-success) + ícone checkmark

BADGE — com dot animado
- Default, Success, Warning, Error com cores semânticas
- Variação "live": dot verde pulsante (animation: pulse 2s infinite) para status ao vivo
- Variação com ícone à esquerda

AVATAR / INICIAIS
- Círculo com gradiente da assinatura, iniciais do nome em branco
- Variação com ring de borda na cor primária

═══════════════════════════════
03 — EFEITOS DE IDENTIDADE
═══════════════════════════════

HERO MOCK (bloco de demonstração)
- Simule um recorte de hero: heading grande em peso máximo, subtítulo muted, botão primário
- Aplique o gradiente de assinatura como overlay sutil no fundo
- Mostre como a tipografia, cor e espaçamento funcionam juntos em contexto real

MOTION TOKENS (especificação de animação)
- --ease-out: cubic-bezier(0.16, 1, 0.3, 1) — entrada rápida, saída suave
- --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1) — transições simétricas
- --duration-fast: 150ms | --duration-base: 250ms | --duration-slow: 400ms
- Demonstre cada easing com um elemento se movendo

DARK / LIGHT SURFACE CONTRAST
- Mostre o mesmo card em fundo escuro (var(--color-bg)) e fundo claro (var(--color-surface))
- O sistema deve funcionar nos dois contextos

═══════════════════════════════
04 — REGRAS DO SISTEMA
═══════════════════════════════

SPACING RHYTHM
- Demonstre a grade de espaçamento com blocos visuais (--space-1 até --space-16)
- Mostre combinações válidas (padding interno de card, gap entre elementos)

DO / DON'T
- 2 exemplos de uso correto com ✓ em verde
- 2 exemplos de uso incorreto com ✗ em vermelho
- Foco em: combinação de cores, hierarquia tipográfica

Mantenha consistência total com os adjetivos de personalidade do brief.
O KV deve sentir-se como a marca — não como um template genérico.

Com base nos adjetivos de personalidade do brief (docs/brand-brief.md), refine o sistema visual:

1. TIPOGRAFIA: o heading está com o peso e tracking certos para a personalidade?
   Se a marca é ousada → weight 800+, tracking tight
   Se a marca é sofisticada → weight 300 light italic, tracking wide
   Se a marca é técnica → monospace para labels e badges

2. BOTÃO: o gradiente de assinatura captura a energia da marca?
   Ajuste o ângulo (90°, 135°, 180°) e a segunda cor até sentir certo.

3. CARD: o nível de elevação (sombra, border, glow) está alinhado com a seriedade da marca?
   Marca minimalista → só border, sem glow
   Marca expressiva → glow na cor primária + shadow dupla

4. NOISE TEXTURE: o ruído de fundo está sutil o suficiente (2-4% opacidade)?

5. HERO MOCK: o bloco de demonstração já parece um site real desta pessoa?

Aplique os ajustes e mostre as versões antes/depois dos componentes modificados.

O KV no Claude Design está pronto. Registre na smart-memory do projeto:

1. Atualize docs/smart-memory/shared-context.md:
   - KV visual criado no Claude Design: paleta, tipografia, botão, card, input, badge
   - Próxima ação: gerar URL de handoff → Claude Code → [[project/components]]

2. Crie docs/smart-memory/project/kv-design.md:

---
title: KV Design System Visual
tipo: referência
status: aprovado
ferramenta: Claude Design
---

# KV Design System — [nome]

## Componentes criados
- **Paleta:** swatches com hex e nomes semânticos
- **Tipografia:** escala xs → 4xl com preview real
- **Botão primário:** default · hover · disabled
- **Card:** título + descrição + CTA
- **Input:** label + placeholder + estados
- **Badge:** default · success · warning · error

## Decisões de refinamento
[anote aqui os ajustes feitos ao botão/card antes do handoff]

## Próximo passo
Gerar URL de handoff via Share → Handoff to Claude Code.
O Claude Code vai implementar esses componentes automaticamente.

→ Tokens base: [[brand-tokens]] · Implementação: [[components]] · LP V2: [[lp-v2]]