Apple
Um quarto branco com um único interruptor azul.
O design da Apple é um modelo de contenção: uma tela quase branca, amplo espaço em branco e um único e vibrante toque de azul que faz com que cada ação pareça intencional. O foco principal é a tipografia — SF Pro, com espaçamento negativo entre letras que diminui com o aumento do tamanho, conferindo aos títulos uma clareza arquitetônica sem serem excessivamente pesados. O produto É o design: grandes fotos de produtos e imagens de estilo de vida dominam, enquanto elementos cromados recuam para molduras finas, navegação translúcida e linhas sutis. Seções se alternam em um fundo cinza claro com blocos coloridos para materiais promocionais, criando ritmo por meio de mudanças de escala em vez de elementos decorativos.
O layout da página é de largura total, sem largura máxima fixa para os contêineres — as seções se estendem de ponta a ponta, com os blocos de texto centralizados em aproximadamente 980px. A navegação consiste em uma única barra global fixa, com uma subpasta adicional para cada produto que aparece ao rolar a página. O layout principal é sempre centralizado: um nome de produto grande, um slogan de uma linha, dois botões de menu e, em seguida, uma imagem do produto que preenche o restante da área visível. As seções são empilhadas verticalmente com um espaçamento vertical generoso (mais de 64px entre as seções), alternando entre fundos #f5f5f7 e coloridos. A parte inferior da página consiste em uma única linha horizontal de cartões de serviço de largura total (Apple TV+, Fitness+, Música, Arcade), cada um com um bloco de foto, texto sobreposto e um botão de menu. Sem barras laterais, sem layouts de conteúdo com várias colunas, sem composições assimétricas — tudo é centralizado, empilhado e simétrico.
A fotografia é a linguagem visual dominante. As fotos de produtos são tiradas contra um fundo branco puro ou cinza claro, sem qualquer contexto — o dispositivo É a estrela, isolado e iluminado. As fotos de estilo de vida são exibidas em banners de largura total, frequentemente com objetos recortados de forma precisa. Gradientes de cores (azul pastel, rosa, verde) servem como pano de fundo para as seções de produtos, não como decoração. A iconografia é minimalista e baseada em linhas, com 1 a 2 pixels de espessura, na mesma escala de cinza do texto. Sem ilustrações, sem gráficos abstratos, sem renderizações 3D, exceto pelas próprias fotos dos produtos.
Paleta
Marca
- Apple Blue
#0071e3— Botões de ação preenchidos, estados selecionados - a única cor cromática interativa usada com parcimônia para dar significado a cada aparição. - Link Blue
#0066cc— Bordas de ação destacadas, links incorporados - uma cor mais saturada do que o Azul Apple é usada onde um tablet totalmente preenchido seria muito chamativo. - Signal Blue
#2997ff— Molduras decorativas, contornos de imagens, bordas de ícones - a cor azul mais clara do sistema, usada para criar atmosfera em vez de para interação com o usuário.
Neutro
- Carbon
#1d1d1f— O texto principal, as margens dos títulos, as linhas de navegação e as bordas dos cartões têm como cor predominante o preto, com um ligeiro toque de cor quente. - Frost
#f5f5f7— A tela da página, o fundo do texto principal e a superfície do rodapé são em um tom de cinza claro característico da Apple, um pouco mais frio que o branco puro. - Ice
#f4f8fb— Preenchimentos expressivos na superfície, tonalidades sutis, texto em botões sobre um fundo escuro — um tom azul discreto que anima a seção sem torná-la chamativa. - Smoke
#333333— Texto secundário, preenchimento de navegação, bordas de botões - Uma cor neutra e versátil para bordas e ícones que precisam de mais destaque do que um cinza médio. - Graphite
#474747— Texto de navegação, bordas de navegação, bordas de links - ocupa uma posição intermediária entre Carbono e Fumaça na hierarquia de elementos. - Ash
#707070— Texto do rodapé, bordas da lista, bordas da navegação, texto do corpo em tom discreto - Um cinza médio para conteúdo que precisa estar presente, mas não em destaque.
Tipografia
de 12 a 56px · 8 etapas
- SF Pro Display — substituição: Inter · esboços 400, 600, 700 · Títulos e textos grandes — tamanhos acima de 40px usam um formato de exibição com abertura menor e espaçamento negativo mais acentuado; 700px é reservado para layouts de publicidade e 400px para nomes de produtos em conteúdo editorial.
- SF Pro Text — substituição: Inter · esboços 300, 400, 600 · Texto principal, navegação, botões, subtítulos — fonte de trabalho; 400 para texto principal, 300 para subtítulos e rótulos qualificados, 600 para elementos de navegação e texto de botões; o espaçamento entre letras negativas diminui proporcionalmente ao tamanho (de -0,022em a 12px para -0,01em a 44px).
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | média |
| Passo básico | 12px |
| Raio do botão | 980px |
| Raio do cartão | 8px |
| Sombras | não - bordas em vez de sombras |
| Entre seções | 64px |
| Largura da página | 1440px |
A IA criará seu site no estilo Apple e o preencherá.
- Compartilhe produtos e publicações através dos links - Instagram, TikTok, Facebook.
- Transfira o conteúdo do seu site antigo — basta especificar o endereço.
- Design moderno na melhor engine: React ( Next.js) com renderização no servidor e otimização de SEO integradas.
- Otimização de SEO totalmente automatizada para resultados de pesquisa e recomendações de redes neurais.
Estilos semelhantes
- Studio — Uma parede de galeria em movimento. Cada tela representa uma superfície de exposição silenciosa e cinzenta, onde materiais tipográficos e obras criativas sobrepostas competem pela atenção.
- Mollie — Um balcão de cashmere, um livro-razão escuro. Deixe bastante espaço em branco para o design editorial ao redor do texto preto e, em seguida, reforce os pontos relacionados ao produto com tons quentes de creme, marrom expresso e fotos táteis de métodos de pagamento reais.
- Basis Theory — Terminais de pagamento no estúdio de design. Papel técnico branco, camadas translúcidas sobrepostas para transações e um único elemento de controle turquesa definem a direção visual.
- CleanShot X — Um estúdio com uma área de trabalho iluminada em azul. Crie um espaço branco e tranquilo ao redor de um texto preto compacto e deixe que os controles em azul intenso e as imagens de produtos Mac sobrepostas sejam o destaque.
- Modern Treasury — Um livro-razão de tesouraria em papel quadriculado. Crie páginas que se assemelhem a uma planilha operacional branca e discreta, onde os fluxos de caixa são exibidos com linhas finas, nós rotulados e controles precisos e ocultos.
- Basha-Franklin — Uma galeria com grelha sob uma verga branca. Use um tom quente #f4ede6, uma estrutura preta subtil e colunas assimétricas baseadas em fotografias que lembram um portfólio de arquitetura impresso.
- Bajgart Office — Galeria editorial em parede. Utilize um amplo espaço em branco onde fontes serifadas sutis e fragmentos de portfólio tenham mais peso visual do que elementos de interface cromados.
- Heptabase — Uma mesa iluminada pelo sol. Superfícies quentes, semelhantes a papel, controles em tom carvão e janelas flutuantes para pesquisa criam a sensação de um espaço de trabalho organizado, em vez de um painel de controle de software.
- Bejamas — Pijamas — lima ácida através de vidro preto. Crie páginas editoriais calmas em tons de cinza claro, interrompidas por cativantes painéis pretos onde faixas de luz verde desfocadas cruzam a superfície.
- Baba — Anotações de cuidados sob a luz vermelha do sol. Crie amplas faixas narrativas vermelhas ao redor de superfícies informativas íntimas em branco, rosa e creme, usando fotografias de pessoas como o centro emocional.
- Grafana Labs — Sala de controle da Estação de Sinalização Sunrise. Um espaço de trabalho tranquilo em tons de cinza e branco se combina com um amplo gradiente de quatro cores no horizonte e sinais de interface azuis precisos.
- Kagi — Uma sala de leitura separada. Crie um espaço branco aberto em torno de um texto em grafite marcante, usando detalhes sutis em roxo e superfícies em tons pastel quentes para quebrar a tranquilidade.