Protótipo Web — Soft Premium

Para briefings que pedem um acabamento "estilo Apple", "linear-tier", "consumidor premium", "SaaS calmo" ou "agência de US$ 150 mil". A estética é suave, pesada e obcecada por arquitetura aninhada.

Fonte

Destilado de Leonxlnx/taste-skill — skills/soft-skill/SKILL.md ("Vanguard UI Architect") com a microestética háptica, arquitetura de moldura dupla e regras de coreografia de movimento. Veja example.html neste diretório para um template totalmente realizado.

Regras rígidas

• Tela: cinza-prata ou creme quente (#F2F2F0 ou #FDFBF7). Não branco puro.
• Combinação de tipografia: display em Geist / Plus Jakarta Sans / Cabinet Grotesk em peso pesado, corpo na mesma família, meta monospaced em Geist Mono.
• Display: clamp(48px, 7vw, 96px), letter-spacing: -0.035em, line-height: 0.96. Peso pesado (700+).
• Raios Squircle: border-radius: 28px–40px (rounded-[2rem] a rounded-[2.5rem]) em superfícies principais.
• Moldura dupla obrigatória: cada card importante é um wrapper (p-1.5, borda fina, sombra externa suave) contendo um núcleo interno com seu próprio fundo e um raio concêntrico menor (ex: externo 2rem, interno calc(2rem - 0.375rem)).
• CTA = botão dentro de botão: CTAs primários são "pills" completas (rounded-full px-6 py-3); a seta final vive dentro de seu próprio wrapper circular alinhado à direita.
• Profundidade ambiente: uma malha radial de "blob" flutuando lentamente atrás do herói, opacity ≤ 0.18, pointer-events: none, fixo.
• Tag "Eyebrow" acima de cada cabeçalho de seção: "pill", mono maiúsculo, letter-spacing: 0.2em, text-[10px].

Banidos

• Inter, Roboto, Helvetica, Open Sans.
• Bordas cinzas genéricas sólidas de 1px (use border-black/5 / ring-1 ring-black/5).
• shadow-md, shadow-lg, sombras projetadas duras. Apenas difusas, espalhadas, baixa opacidade (0 20px 40px -15px rgba(0,0,0,0.05)).
• Barras de navegação "sticky" de ponta a ponta coladas no topo. Use uma "pill" flutuante de vidro (mt-6 mx-auto w-max rounded-full).
• Transições lineares ou ease-in-out. Use cubic-bezier(0.32, 0.72, 0, 1) ou física de mola.
• h-screen (use min-h-[100dvh]).
• Animação de width / height / top / left. Apenas transform e opacity.
• Preto puro #000. Use Zinco-950 / Off-Black.

Componentes obrigatórios

• Barra de navegação "pill" flutuante com backdrop-blur-2xl.
• Herói assimétrico: display pesado massivo, tag "eyebrow", lede do corpo max-w-[52ch], dois CTAs (pill primário com seta de botão dentro de botão + fantasma).
• Grade Bento usando o padrão moldura dupla; pelo menos um card largo e um card alto.
• Linha de recursos com cascata no eixo Z ou módulo de imagem dividida.
• Faixa "Marquee" de logos de clientes, tradução infinita lenta (-100% / 20s), pausa ao passar o mouse.
• Banda de fechamento em uma superfície invertida suave (zinco profundo / espresso).
• Rodapé: meta monospaced, linha fina acima.

Movimento

• Todas as transições: transition: transform 700ms cubic-bezier(0.32,0.72,0,1) mínimo.
• Hover em CTAs: a "pill" externa escala 0.98 em :active, o círculo do ícone final interno se move (+1px, -1px) e scale(1.05).
• Entrada ao rolar: translateY(16px) blur(8px) opacity(0) → translateY(0) blur(0) opacity(1). Apenas IntersectionObserver.
• Marquee: transform: translateX(-50%) sobre 30s linear infinito, aplicado a uma trilha duplicada.
• Blob de malha do herói: deriva de keyframe de 24s+, apenas opacidade ou apenas transformação.

Pré-voo

• Barra de navegação "pill" flutuante com backdrop-blur + anel de linha fina
• Pelo menos um card usa a moldura dupla (casca externa + núcleo interno, raios concêntricos)
• CTA primário usa ícone final de botão dentro de botão
• Preenchimento da seção ≥ py-24
• Sem fontes banidas; peso do display ≥ 700
• Herói usa min-h-[100dvh], nunca 100vh
• Todas as transições usam cubic-bezier customizado ou mola; sem linear / ease-in-out
• Mobile: layout colapsa para coluna única abaixo de 768px, todas as rotações + sobreposições removidas