luukalleman/premium-design-skill

Design Premium — Kinetic Luxe

Uma skill orientada a catálogo para criar interfaces premium, editoriais e de alto padrão. Distinta da skill genérica design: esta tem opiniões fortes sobre tipografia, movimento e moderação.

---

Filosofia de design — as cinco regras

1. A tipografia é a protagonista

Os títulos de destaque (headlines) usam uma serifa ou uma sans-serif display distinta. O corpo usa uma sans-serif refinada (Inter, Geist, Satoshi). Os títulos são grandes — na faixa text-[clamp(2.5rem,8vw,10rem)]. O espaçamento entre letras é ajustado para display (tracking-tight ou mais fechado). A altura da linha é generosa no display (leading-[0.9] ou leading-none), mais compacta no corpo (leading-[1.45]).

Pares de fontes que funcionam:

• Fraunces (display) + Inter (corpo) — estilo revista editorial
• Canela (display) + Geist (corpo) — contemporâneo luxuoso
• Migra (display) + Manrope (corpo) — editorial afiado
• Reckless (display) + Inter (corpo) — calor editorial suave

A fonte é carregada via <link> no index.html ou CSS @import. Nunca use fontes do sistema para display.

2. Movimento é intencional, nunca decorativo

Sem molas saltitantes. Sem fades rápidos ease-out-200ms. Movimento premium usa:

• Durações longas: 800–1800ms para revelações
• Facilitação (easing) refinada: cubic-bezier(0.16, 1, 0.3, 1) (easeOutExpo), cubic-bezier(0.22, 1, 0.36, 1) (easeOutQuint) ou curvas personalizadas
• Movimento guiado pelo scroll em vez de carregamento de página: use useScroll + useTransform do framer-motion para que o movimento esteja atrelado à ação do usuário
• Um movimento principal por seção: não empilhe 5 animações em um hero. Escolha aquele que amplifica o conteúdo.

Se uma animação não serve ao conteúdo, remova-a.

3. Profundidade através de camadas, não de sombras

A profundidade premium é criada empilhando camadas sutis:

• Base: sobreposição de textura de ruído (CSS ou SVG)
• Abaixo do conteúdo: lavagem gradiente quente/fria (muito sutil, 5-15% de opacidade)
• Camada intermediária: elemento decorativo (um caractere display grande, uma fotografia desbotada, uma grade)
• Primeiro plano: conteúdo

Evite shadow-lg / shadow-2xl — elas parecem genéricas. Use shadow-[0_1px_0_rgba(255,255,255,0.05)] ou bordas gradientes.

4. Moderação na cor, confiança na composição

A paleta é tipicamente:

• Fundo: um off-white ou off-black quente ou frio (nunca #000 ou #fff puros). Exemplos: #0A0908 (preto quente), #F7F5F1 (off-white quente), #0F1117 (preto frio).
• Texto: alto contraste com o fundo, mas suavizado. Exemplos: #F7F5F1 sobre #0A0908, #1A1A1A sobre #F7F5F1.
• Destaque: UMA cor, usada com moderação. Exemplos: #C8522C (terracota), #4C3F2F (expresso), #B8A978 (latão), #D9C2A4 (champanhe).

Sem gradientes arco-íris. Sem vibes de startup de tecnologia em verde/roxo.

5. A composição quebra a grade intencionalmente

Grades padrão de 3 colunas parecem genéricas. Layouts premium usam:

• Assimetria: 2 colunas onde uma coluna tem o dobro do tamanho da outra, ou grades de 7 colunas com conteúdo abrangendo 3+4
• Espaço em branco intencional: uma seção com 60% de espaço em branco, conteúdo em um canto
• Contraste de escala: rótulo minúsculo ao lado de título enorme
• Sobreposição: elementos que saem dos limites do contêiner

Na dúvida, remova uma coluna ou adicione mais espaço em branco.

---

Para que esta skill NÃO serve

Se o usuário desejar:

• Página de destino B2B SaaS padrão (bolhas de chat, maquetes de produto, grades de recursos) → use design
• Dashboard administrativo / interface densa em dados → use design
• Landing page de aplicativo móvel com maquete de telefone → use design
• Site corporativo com herói de foto de stock → use design

Esta skill é para: marcas de moda, produtos de luxo, agências de design, portfólios criativos, escritórios de arquitetura, publicações editoriais, posicionamento premium de SaaS com foco em design.

---

Fluxo de trabalho — PASSO 0: LEIA O CATÁLOGO

Antes de escrever qualquer página, LEIA:

1. references/design-tokens.md — cores, escala tipográfica, espaçamento
2. references/motion-principles.md — facilitação (easing), temporização, filosofia de movimento
3. O arquivo .md da categoria correspondente em references/catalog/ — variantes disponíveis

Em seguida, escolha uma variante e leia o .tsx correspondente em references/catalog/components/.

Mapeamento Página → Arquivo do Catálogo:

Tipo de página	Arquivo(s) do catálogo
Landing / Home	hero.md + features.md + testimonials.md + cta-sections.md + footers.md
Preços	pricing.md
Sobre / Estúdio / Manifesto	about.md
Contato	contact.md
Portfólio / Trabalhos	gallery.md
FAQ / Observações	faq.md
Navegação (todas as páginas)	navigation.md

Inventário atual do catálogo — 11 componentes, todos genuinamente originais:

• navigation.md — 1 variante (Masthead Editorial)
• hero.md — 1 variante (Hero Cinético com Máscara)
• features.md — 1 variante (Índice Editorial)
• stats.md — 1 variante (Números Editoriais)
• logos.md — 1 variante (Registro de Clientes Editorial)
• gallery.md — 1 variante (Índice de Trabalhos Editorial)
• about.md — 1 variante (História Editorial / Manifesto)
• testimonials.md — 1 variante (Citação em Destaque Editorial)
• pricing.md — 1 variante (Assimétrico Editorial)
• faq.md — 1 variante (FAQ Editorial / Observações)
• cta-sections.md — 1 variante (CTA Momento)
• contact.md — 1 variante (Formulário de Contato Editorial)
• footers.md — 1 variante (Rodapé Manifesto Editorial)

---

Lista de verificação inegociável

Antes de reportar como concluído:

1. Leitura da base: design-tokens.md + motion-principles.md foram lidos ANTES de qualquer código ser escrito.
2. Catálogo consultado: Uma variante específica foi escolhida do catálogo. Nomeie-a.
3. Fontes carregadas: As fontes display e corpo necessárias foram carregadas via <link> no index.html OU CSS @import. Fontes do sistema quebram a sensação premium.
4. Cor de destaque única: O design usa UMA cor de destaque (mais neutros). Sem paletas arco-íris.
5. Temporização do movimento: Pelo menos uma seção usa movimento guiado pelo scroll (não apenas fades no carregamento da página). A facilitação (easing) é easeOutExpo ou similar — não o padrão easeOut.
6. Quebra de composição: Pelo menos uma seção usa layout assimétrico, espaço em branco intencional ou contraste de escala. Nem todas as grades de colunas iguais.
7. Mobile: Testado em 375px. O tipo display reduz de tamanho, mas mantém o caráter (maior que o H1 padrão para mobile).