rik-python/apple-style-design

Design Estilo Apple

Uma linguagem de design completa, reversamente engenheirada a partir da tag apple-style do Dribbble (64 shots, Out 2026) e verificada em relação às convenções HIG da Apple. Ela cobre tokens, componentes, materiais, motion, layout, texto e receitas por plataforma.

A aparência em uma frase: tela neutra e calma, um acento confiante, conteúdo como herói, profundidade suave em vez de linhas, e movimento que parece físico.

Como usar esta skill

1. Identifique o tipo de saída (página web, tela de app, widget, painel de plugin, ícone, pôster, motion). Escolha a receita correspondente em references/layouts.md.
2. Escolha um modo: Claro (padrão para marketing, produtividade, saúde), Escuro (mídia, ferramentas profissionais, finanças, jogos, VFX) ou Vidro sobre imagem (visionOS, seções hero, players). Veja "Selecionador de modo" abaixo.
3. Carregue os tokens. Para web, copie assets/apple-style.css para o projeto (ou inline) e construa com suas variáveis e classes .as-*. Para outras plataformas, leia references/platforms.md (Qt/PySide QSS para Nuke, frontend ComfyUI, Tailwind, SwiftUI, Figma, slides, Remotion).
4. Componha com componentes de references/components.md. Não invente novos estilos para um botão ou linha de lista; as receitas já codificam os micro detalhes.
5. Adicione materiais e motion por último: references/materials.md (Vidro Líquido, fosco, gradientes mesh, granulado) e references/motion.md (molas, revelações, estados de pressionar).
6. Execute a checklist de QA no final antes de mostrar o resultado.

Precisa de prova de um padrão ou referência visual? references/shot-catalog.md lista cada shot analisado e o que ele ensina. assets/demo.html é uma galeria funcional de todos os componentes construídos com a folha de estilo: abra-a para ver o nível de qualidade alvo.

As 12 leis (por que parece "Apple")

Estes são os padrões que apareceram em quase todos os shots fortes. Cada um tem uma razão; mantenha a razão em mente quando um caso não estiver coberto.

1. Tela neutra, conteúdo colorido. Fundos são off-white #F5F5F7 / cinza agrupado #F2F2F7 ou preto próximo #000/#1C1C1E. Cor é reservada para dados, estado e uma ação primária. Razão: a tela recua para que o conteúdo e o acento carreguem todo o significado.
2. Um acento por tela. Azul do sistema #007AFF por padrão; violeta #5E5CE6, rosa, laranja ou verde quando o produto tem sua própria identidade. Um segundo acento apenas para séries de dados (ex.: barras alternadas laranja/rosa). Razão: um único acento torna a ação primária óbvia com zero rótulos.
3. Profundidade por elevação, não bordas. Cartões flutuam em sombras suaves, largas e de baixa opacidade; separadores são hairlines de 0,5px recuados da borda esquerda. Bordas pesadas de 1px cinza parecem "formulário web", não Apple.
4. Cantos contínuos em todo lugar. Raios tipo squircle: 10 (controles), 14 (campos), 20 (grupos de lista, cartões), 28 (widgets, sheets), 38+ (dispositivo/janela), 999 (pílulas). Raio aninhado = raio externo menos o padding.
5. Tipografia faz a hierarquia. SF Pro / Inter, tracking negativo apertado em tamanhos de exibição, títulos grandes e negrito, texto secundário cinza em vez de tamanhos menores. Números são heróis: 12.203 grande e negrito com uma pequena unidade cinza ao lado na mesma linha de base.
6. Cinza é uma escala, não uma cor. Opacidades de rótulo: primário 100%, secundário 74% claro / 60% escuro (a Apple usa 60% no claro, que é apenas 3.44:1 no branco), terciário 30%, quaternário 18%. Nunca invente um #999 aleatório.
7. Pílulas e círculos para ações. Botões primários são pílulas completas; ações de ícone são círculos de 44px; FABs são círculos preenchidos com o acento, um glifo estilo SF branco e uma sombra colorida suave.
8. Materiais sobre preenchimentos sólidos. Sobreposições, barras de ferramentas, docks, barras laterais e players usam material translúcido desfocado (Vidro Líquido) para que o contexto apareça.
9. Espaço em branco generoso e rítmico. Grade de 4px; padding interno de 16/20; seções respiram (96-160px no desktop). Se parecer um pouco vazio, provavelmente está certo.
10. Movimento é físico. Molas, não tweens lineares. Pressionar = escala 0.97, soltar = volta com mola. Revelações desbotam + sobem 8-24px + desfocam. Nada quica mais de uma vez.
11. Texto é curto e confiante. Frase com inicial maiúscula, pontos em taglines ("Som. Refinado.", "Em Breve."), manchetes de dois tons com uma frase cinza ou acento, títulos de widget em minúsculas permitidos ("passos dados").
12. Artesanato nos micro detalhes. Chevrons em cinza terciário, numerais tabulares para dados, dicas de tecla (esc, return), pontos de status, hairlines de 0,5px, realces internos superiores em vidro, brilho colorido sob gráficos. Esses detalhes são a diferença entre "limpo" e "Apple".

Selecionador de modo

O produto parece com	Modo	Tela	Superfície	Ideia de acento
Saúde, produtividade, comércio, docs, marketing SaaS	Claro	#F5F5F7 / #F2F2F7	#FFFFFF	Azul #007AFF
Player de mídia, música, tickers financeiros, ferramentas pro/VFX, jogos	Escuro	#000000	#1C1C1E / #2C2C2E	Rosa #FF375F, verde #30D158, violeta #5E5CE6
Hero sobre foto/vídeo, visionOS, players, toggles	Vidro	imagem ou gradiente mesh	Vidro Líquido	Branco primário, acento secundário
Marca/pôster/lançamento	Gradiente	gradiente mesh + granulado	vidro ou nenhum	Cor do produto

Tokens principais (resumo)

Tabelas completas com valores escuros e justificativa: references/tokens.md. Implementado em assets/apple-style.css.

• Pilha de fontes: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif. Carregue Inter (400/500/600/700) do Google Fonts como fallback multiplataforma. Mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace.
• Escala tipográfica (app): Large Title 34/41 700 (-0.022em) · Title1 28/34 700 · Title2 22/28 700 · Title3 20/25 600 · Headline 17/22 600 · Body 17/22 400 · Callout 16/21 · Subhead 15/20 · Footnote 13/18 · Caption 12/16 · Caption2 11/13.
• Escala tipográfica (marketing): Hero 64-96px 700, line-height 1.04, tracking -0.035em · Section 40-56px 600 -0.028em · Lead 21-24px 400 cor secundária · Eyebrow 14-17px 600 na cor de acento.
• Espaçamento: 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160.
• Raio: 6 (tags), 10 (botões/controles), 14 (campos), 20 (cartões/listas), 28 (widgets/sheets), 38 (janelas/dispositivos), 999 (pílulas).
• Sombra (claro): 0 1px 2px rgb(0 0 0/.04), 0 4px 12px rgb(0 0 0/.05), 0 16px 40px rgb(0 0 0/.08). Flutuante: adicione 0 32px 80px rgb(0 0 0/.12).
• Easing: padrão cubic-bezier(.25,.1,.25,1), enfatizado cubic-bezier(.32,.72,0,1), mola linear() curva em motion.md. Durações 150 (pressionar), 250 (estado), 400 (entrar), 600-900 (revelações hero).

Anti-padrões (vistos na coleta, não copie)

A tag também continha shots fora do estilo. Eles ensinam o que evitar:

• Brilho esqueuomórfico de 2012: inputs com relevo, botões "Login" chanfrados, texturas de linho (shot da loja de apps OTAir).
• Mascotes de desenho animado, contornos de adesivo e contornos pesados (Taco, Buzz Addiction).
• Páginas "tech brutalista" em maiúsculas e monoespaçadas (MEMBRAN): um estilo válido, mas não Apple.
• Botões neon com múltiplos gradientes em cada elemento, e mais de um gradiente por cartão.
• Sombras pretas duras deslocadas para um lado (as molduras de dispositivo "Astro" usam uma sombra deslocada brutalista: errada para o estilo Apple).
• Bordas padrão de 1px #ddd em cada cartão, texto #999, azul Bootstrap #0d6efd.
• Animações com overshoot saltitante, spinners girando em tudo, parallax que luta contra a rolagem.
• Usar o logotipo ou marcas registradas da Apple no produto do usuário. Use o estilo, nunca a marca.

Contrato de saída

Quando esta skill produz um design:

• Entregue código funcional, não uma descrição. Web: HTML semântico + o CSS de tokens (inline ou linkado) + JS mínimo para motion. Outros destinos: a receita da plataforma.
• Sempre suporte claro e escuro, a menos que o selecionador de modo diga apenas escuro, e respeite prefers-reduced-motion.
• Acessibilidade é parte da aparência: contraste de texto 4.5:1 (label-2 é ajustado para passar no branco, tela e cinza agrupado; label-3 é apenas para placeholders, chevrons e estados desabilitados, nunca para texto que as pessoas precisam ler), alvos de toque 44x44, anel de foco visível (3px accent-text outline, offset 2px: um outline, nunca um box-shadow, para que sombras de componentes não possam escondê-lo), rótulos em botões de ícone.
• Acentos brutos do sistema falham contraste como preenchimentos de botão e como texto pequeno (branco em #007AFF = 4.02:1, em #0A84FF = 3.65:1). Preencha botões com accent-fill, colore texto com accent-text, mantenha accent bruto para brilhos, toggles, ícones e formas grandes. Tons seguros por matiz: references/tokens.md 3a.
• Indique o modo, o acento e os 2-3 detalhes característicos usados em uma linha curta após entregar, para que o usuário possa direcionar.

Checklist de QA (execute antes de mostrar)

• A tela é neutra; apenas uma cor de acento conduz as ações.
• O acento passa no contraste: preenchimentos de botão usam accent-fill, texto de acento usa accent-text (tokens.md 3a); um matiz personalizado teve suas proporções calculadas.
• Sem bordas duras em cartões; separadores são hairlines, recuados e mais claros em 1x DPR.
• Grupos de rádio com rótulos longos ou dicas são listas de escolha única com uma marca de verificação, não controles segmentados apertados.
• Controles compactos de desktop crescem para 44px sob pointer: coarse.
• Raios seguem a escala e raios aninhados são concêntricos.
• Texto de exibição tem tracking negativo; texto secundário usa a escala de cinza, não tamanho.
• Números/títulos hero são grandes; unidades/rótulos pequenos e cinza na mesma linha de base.
• Ação primária é uma pílula (ou FAB com acento); botões de ícone são círculos de 44px.
• Sobreposições/barras de ferramentas usam desfoque de material com realce interno, não cinza sólido.
• Sombras são suaves e em camadas; nada parece colado.
• Estados de pressionar, hover e foco existem; motion usa molas/ease-out; movimento reduzido respeitado.
• Modo escuro usa cinzas em camadas (#1C1C1E / #2C2C2E / #3A3A3C), não superfícies pretas puras sobre preto.
• Texto é curto, com inicial maiúscula, confiante; nenhum lorem ipsum no trabalho entregue.
• Largura mobile funciona com gutters de 16-20px e sem rolagem horizontal.