apple-web-design

Apple web design

Uma linguagem de design para aplicativos web que devem parecer um aplicativo nativo do iPhone ou uma página de produto da Apple.com. Ela foi construída, testada em iPhones reais e refinada tela por tela em um aplicativo de planejamento de refeições já lançado, cujo único index.html era a implementação de referência). Tudo aqui é CSS puro e JavaScript vanilla, sem framework ou biblioteca, então pode ser incorporado em qualquer projeto.

O objetivo é um produto discreto, do início ao fim: página cinza claro, tiles brancos, um destaque azul, tipografia grande e confiante, e cada toque respondido com movimento no lugar. Nada pula, nada renderiza a tela inteira novamente, o texto digitado e a posição de rolagem nunca são perdidos.

Como usar este skill

1. Nova UI: cole references/tokens.css na página primeiro. Depois, construa as telas a partir das receitas de componentes em references/components.md. Adicione assets/morph.js e a camada de movimento de references/motion.md se a UI for renderizada novamente a partir do estado.
2. UI existente: mantenha a estrutura e os dados do projeto. Troque as cores, a tipografia e as formas pelos tokens, depois converta os componentes um por um. Não reescreva a lógica para reestilizar.
3. Vidro: leia references/liquid-glass.md somente quando o usuário quiser Liquid Glass / vidro do iOS 26 (tab bar, botões flutuantes, toasts, botões de sheet).
4. Telas de showcase escuras (uma tela de inicialização, um "modo" como festa ou foco): references/keynote.md.
5. Antes de considerar concluído: execute references/checklist.md — capturas de tela no modo claro e escuro em 390×844.
6. Se o aplicativo será vendido (App Store ou comercialmente): leia references/commercial.md primeiro. Alguns dos detalhes que mais parecem com a Apple são aqueles aos quais a Apple se opõe.

Leia apenas as referências necessárias; cada uma é independente.

As regras principais (por que elas são importantes)

Cor: um destaque, usado com moderação. Página #f5f5f7, tiles #fff, tinta #1d1d1f, secundário #6e6e73, ação azul #0071e3 (escuro: #000 / #1d1d1f / #f5f5f7 / #86868b / #2997ff). Azul significa "você pode agir aqui", então é usado em botões primários, links, a aba selecionada e progresso — em nenhum lugar decorativo. Cores de status (--ok verde, --warn âmbar, --bad vermelho) só carregam significado. Matizes extras (ciano água, laranja etapas) são permitidos quando rotulam um tipo de dados de forma consistente em todos os lugares onde aparecem. Um gradiente de marca, se houver, pertence a apenas uma tela especial.

Modo escuro segue o telefone. Cada cor é uma variável CSS redefinida sob prefers-color-scheme: dark. Escuro são páginas pretas verdadeiras com tiles #1d1d1f, e as sombras são desligadas (--shadow:none) porque parecem sujeira no preto.

A tipografia faz a hierarquia, não as caixas. Pilha de fontes do sistema (-apple-system, BlinkMacSystemFont, system-ui, sans-serif, que dá SF em dispositivos Apple), corpo 17 px, espaçamento negativo apertado entre letras em qualquer coisa grande:

• Títulos de página 40–48 px negrito, −0,035em, com um ponto final: "Receitas." — o tom de voz dos títulos da Apple.com.
• Cabeçalhos de seção em dois tons, 24 px negrito: a primeira frase em tinta, o resto em cinza: "Pirkiniai. Trūksta 15 produktų.". Ambas as partes terminam com ponto final.
• Números grandes são finos (peso 200–300) e enormes (38–72 px) com font-variant-numeric: tabular-nums para que os dígitos não tremam enquanto mudam. Números estatísticos menores (linhas de especificação) são 600.
• Legendas 13–14 px cinza. Não vá abaixo de 12 px.

Formas: tiles sem bordas, pílulas, espaço generoso. Raios 8 / 14 / 22 / 28 px; tiles não têm bordas e uma sombra muito suave (0 4px 18px rgba(0,0,0,.06)). Linhas dentro de um tile são separadas por uma linha fina que começa no texto, não na borda (separador inserido do iOS). Botões são pílulas (border-radius: 999px): primário azul sólido com texto branco, secundário preenchimento cinza com texto azul, destrutivo preenchimento cinza com texto vermelho. Fotos ocupam toda a largura dentro de seu tile.

Layout: uma coluna, primeiro o telefone. max-width: 720px centralizado, margens laterais de 16 px, recuos de área segura em cada borda fixa (env(safe-area-inset-*)), 110 px de padding inferior para que o conteúdo não fique atrás da tab bar. Alvos de toque ≥ 44 px.

Movimento: tudo se move no lugar. Renderize novamente com um morph do DOM em vez de innerHTML para que os nós sobrevivam; novas linhas surgem, linhas removidas saem como um fantasma desbotando, linhas movidas deslizam (FLIP), números alterados rolam, pílulas deslizam, sheets surgem com mola, botões pressionam (escala .96, curva de mola). Duas curvas cobrem quase tudo: --spring: cubic-bezier(.3,1.4,.5,1) (pressionamentos, pequenos pops) e --ease: cubic-bezier(.2,.8,.2,1) (fades, barras); a própria cubic-bezier(.32,.72,0,1) do iOS (sem overshoot) para sheets e grandes movimentos. Tudo é desligado sob prefers-reduced-motion: reduce — verifique, não assuma.

Texto: curto, humano, com a voz da Apple. Títulos com ponto final, verbos nos botões ("Pagaminau", "Pridėti"), números formatados para a localidade (toLocaleString(lang); lituano usa espaços nos milhares e vírgula decimal), sem pontos de exclamação, sem emoji no chrome (emoji são aceitáveis como ícones de conteúdo, ex. 🍸 para uma entrada de bebida). Texto de erro diz o que fazer em seguida.

Decisões já tomadas (não reabra)

Estas vieram de feedback real durante a construção do aplicativo de referência:

• A ação primária azul permanece azul sólido mesmo dentro de UIs de vidro — botões azuis com vidro tingido foram testados e rejeitados.
• O Liquid Glass está ligado por padrão, mas pode ser desligado pelo usuário, com um controle deslizante de intensidade; os cartões de conteúdo permanecem sólidos para que o texto permaneça legível. Vidro é apenas para chrome flutuante.
• Fotos de receitas/produtos são as imagens; sem ilustrações ou decorações de banco de imagens.
• O comportamento do iOS 26 vence em caso de dúvida: a tab bar flutua como uma cápsula e se recolhe em um pequeno botão ao rolar para baixo; o vidro incha (aumenta de escala) sob o dedo em vez de afundar.
• Cada aba lembra sua própria posição de rolagem; tocar na aba ativa rola para o topo.
• Um toast pode ser dispensado com um deslize para cima e tem uma ação "Cancelar" / "Atšaukti" para cada toque destrutivo ou que altere dados.

Arquivos

• references/tokens.css — o bloco de tokens completo (claro + escuro, raios, sombras, curvas). Cole como está.
• references/components.md — HTML + CSS prontos para copiar e colar para cada componente, com notas sobre comportamento.
• references/motion.md — o auxiliar de animação, hooks de morph, FLIP, rolagem de números, troca de aba, sheets, gestos de deslizar e segurar, clique tátil, movimento reduzido.
• references/liquid-glass.md — o material vidro do iOS 26, a lente de refração do Chromium, a tab bar que se recolhe.
• references/keynote.md — o estilo "keynote" preto para uma tela especial.
• references/checklist.md — lista de verificação de revisão e um script de captura de tela.
• references/commercial.md — o que mudar antes de vender um aplicativo neste estilo.
• assets/morph.js — o morph do DOM com 70 linhas (linhas com chave, seguro para foco e digitação, fallback para innerHTML).