Protótipo Web — Minimalismo Editorial

Um protótipo web de página única com o formato de um site de marketing do Notion/Linear ou uma superfície de documentação premium. Use quando o briefing pedir "limpo", "editorial", "SaaS premium", "documentação" ou "produto de conhecimento".

Fonte

Destilado de Leonxlnx/taste-skill — skills/minimalist-skill/SKILL.md e as regras de ritmo espacial em skills/taste-skill/SKILL.md. Veja example.html neste diretório para um template totalmente realizado.

Regras rígidas

• Tela: off-white quente (#FBFBFA ou #F7F6F3), nunca branco puro.
• Primeiro plano: off-black #111111, texto secundário #787774. Nunca #000000.
• Bordas: 1px solid #EAEAEA apenas. Sem sombras projetadas acima de 0 1px 2px rgba(0,0,0,0.04).
• Combinação de tipografia: display em serifada editorial (Instrument Serif / Newsreader / Lyon), corpo em grotesca (Geist / Switzer / SF Pro), monoespaçada para meta/atalhos (Geist Mono / JetBrains Mono).
• Espaçamento do display: letter-spacing: -0.025em, line-height: 1.05.
• Apenas pastéis: fundos suaves (#FDEBEC, #E1F3FE, #EDF3EC, #FBF3DB) para tags/selos. Nunca como fundos de seção.
• Contêineres: border-radius: 8–12px no máximo. Sem contêineres em pílula, sem rounded-full em cartões.
• Preenchimento da seção: py-24 mínimo, py-32 para o herói.

Banidos

• Inter, Roboto, Open Sans (use Geist / Switzer / SF Pro).
• Ícones genéricos Lucide de traço fino (use Phosphor Bold ou Radix).
• Gradientes, neon, glassmorphism além de um leve desfoque na barra de navegação.
• Sombras projetadas acima de shadow-sm. Sem brilhos.
• Nomes genéricos de placeholder (John Doe / Acme / Lorem). Use conteúdo contextual específico.
• Clichês de cópia de IA: "Eleve", "Perfeito", "Desbloqueie", "Próxima Geração".
• Preto puro #000000.
• H1 do herói centralizado sobre uma imagem escura.

Componentes obrigatórios

• Barra de navegação em pílula fixa (off-white translúcido, backdrop-blur-md, borda fina).
• Herói assimétrico: display serifado alinhado à esquerda, tag de "sobrancelha" acima, parágrafo de introdução em max-w-[52ch].
• Grade de recursos Bento com alturas de linha desiguais e divisores de 1px visíveis — nunca 3 cartões iguais.
• Um bloco "o que não é" ou de contraste separado apenas por border-t, sem cartão.
• Faixa de preços ou inscrição com um CTA de destaque.
• Rodapé: metadados monoespaçados, linha fina única acima.

Movimento (sutil apenas)

• Entrada por rolagem: translateY(12px) → 0 + opacity 0 → 1 sobre 600ms cubic-bezier(0.16, 1, 0.3, 1). IntersectionObserver apenas.
• Elevação ao passar o mouse sobre cartões: box-shadow de 0 0 0 para 0 2px 8px rgba(0,0,0,0.04) sobre 200ms.
• Listas escalonadas por --index * 80ms.
• Animar apenas transform e opacity.

Pré-verificação

• Combinação de display serifado + corpo grotesco presente
• Tela é off-white quente, primeiro plano é off-black
• Todos os cartões/divisores usam 1px solid #EAEAEA
• Pelo menos um layout assimétrico (dividido, tag de sobrancelha, bento desigual)
• Pastéis usados apenas para tags, nunca como fundos de bloco
• Preenchimento da seção ≥ py-24
• Sem emojis, sem fontes banidas, sem clichês de IA