youssef-110/apple-web

Apple Web

Crie páginas de marketing de produto que leiam como apple.com: discretas, confiantes, focadas em tipografia, com movimento que serve ao produto. Cada valor nesta skill foi medido a partir de uma página de produto ao vivo da apple.com (Nov 2026) e está em reference/measured-tokens.md.

Este é um sistema de estilo, não um clone. Nunca copie o texto, nomes de produtos, logotipos, fotografias, ícones ou arquivos de fonte da Apple. Escreva conteúdo original para o produto do usuário.

Arquivos

Caminho	Uso
library/apple-web.css	Tokens, classes de tipo, layout, componentes. Vincule primeiro.
library/apple-web.js	Revelações de scroll, estado da navegação fixa, scrub de scroll, galerias, contagem. Sem dependências.
demo/index.html	Página completa em funcionamento usando todos os componentes. Copie como ponto de partida.
reference/measured-tokens.md	Medições brutas: escala tipográfica, cores, raios, easing, breakpoints.
reference/page-anatomy.md	Como uma página de produto da Apple é sequenciada, seção por seção.
reference/anti-slop.md	O que faz uma página parecer feita por IA e a correção no estilo Apple para cada um.

Fluxo de Trabalho

1. Copie library/ para o projeto. Vincule apple-web.css no <head> e apple-web.js com defer.
2. Comece a partir de demo/index.html. Mantenha a ordem das seções de reference/page-anatomy.md.
3. Escreva o texto primeiro. Os títulos têm de 2 a 5 palavras com ponto final ("Rápido. Muito rápido."). O corpo do texto é cinza com uma frase destacada em branco.
4. Escolha um tema por seção: theme-dark (preto) ou theme-light (#f5f5f7) ou theme-white. Alterne em execuções longas, nunca mais de três do mesmo tema consecutivamente.
5. Execute a lista de verificação abaixo antes de considerar concluído.

Regras que tornam Apple

Tipo

• Uma família. SF Pro do sistema em dispositivos Apple, Inter em outros lugares (a pilha no CSS lida com isso). Sem segunda fonte de exibição, sem acentos serifados.
• Peso 600 para cada título. 400 para corpo. Nunca 700–900, nunca 300.
• Tracking muda com o tamanho: negativo no corpo (17px → -0.022em) e no herói (64px+ → -0.009em), ligeiramente positivo entre 19–32px. Use as classes de tipo; nunca defina um letter-spacing em todos os lugares.
• Títulos são curtos e centralizados em seções de marketing; alinhados à esquerda em lockups ao lado de mídia.
• Corpo do texto em seções escuras é #86868b; enfatize uma frase com <strong> (renderiza #f5f5f7, mesmo peso). Sem negrito no corpo.

Cor

• Página em tons de cinza. Um acento: azul de link/ação #0071e3 (seções escuras usam #2997ff para links). A cor vem das imagens do produto, não da interface.
• Sem gradientes na interface ou texto, sem brilhos, sem sombras coloridas.

Layout

• Largura do conteúdo 980px para texto, 1260px para linhas de mídia, viewport máximo 1440px. Breakpoints 1068px / 734px.
• Padding da seção 120px superior / 120–176px inferior no desktop. Generoso, nunca apertado.
• Blocos arredondados: raio 28px em blocos grandes, 18px em cards pequenos. Botões são pílulas (raio 980px).

Movimento

• Easing cubic-bezier(0.4, 0, 0.6, 1) para estado da interface; durações 100ms (hover), 240ms (opacidade), 320ms (cor/navegação), até 1s para revelações de scroll.
• Revelações são opacidade + uma subida de 30–40px, uma vez, quando o elemento está ~15% na viewport. Intercale irmãos por 80–120ms.
• Momentos do produto usam scrub de scroll (progresso vinculado à posição de scroll), não reprodução automática.
• Hover em blocos: escala sutil 1.02 na mídia interna, nunca na sombra do card.
• prefers-reduced-motion: tudo se torna um fade instantâneo. A biblioteca faz isso.

Navegação

• Navegação global de 44px, depois uma navegação local fixa de 52px com nome do produto à esquerda, links + pílula azul pequena "Comprar" à direita. Ela se torna translúcida (blur(20px) saturate(180%)) uma vez que fixa.

Lista de Verificação (sem IA genérica)

• Sem emoji, sem grades de funcionalidades com ícone em círculo, sem "✨", sem gradientes roxo/verde-azulado.
• Títulos são declarações, não perguntas ou "Desbloqueie / Eleve / Perfeito / Revolucione".
• Cada número em uma estatística tem uma unidade e um marcador de nota de rodapé se for uma afirmação.
• No máximo um estilo de CTA por seção (pílula azul ou link de texto azul com ›), nunca ambos grandes.
• Mídia domina; o texto nunca fica em um card que flutua sobre um gradiente ocupado.
• Tracking definido por classe em cada elemento de texto; sem negrito padrão do navegador.
• Seção de notas de rodapé na parte inferior em 12px #86868b.
• Verificado nas larguras 1440, 1068, 734 e 375px, e com movimento reduzido ativado.

Consulte reference/anti-slop.md para a lista completa com correções.