liquid-glass: chrome Liquid Glass da Apple em qualquer stack

Apple Liquid Glass — a linguagem de design, em qualquer plataforma

Escopo: qualquer interface que deva carregar o visual Liquid Glass da Apple — uma página web, um aplicativo web, um aplicativo desktop Electron ou Tauri, um aplicativo Android ou Flutter, ou um aplicativo Apple nativo. As regras de design abaixo são as mesmas em todos os lugares; apenas a forma de obter o fundo, o desfoque e a curvatura difere. Escolha a rota primeiro:

Construindo para	Rota
Web, Electron, Tauri, WebView	assets/tokens.css + assets/refraction.js (este arquivo e as referências)
iOS, iPadOS, macOS 26+ nativo	o material do sistema: SwiftUI glassEffect, UIKit UIGlassEffect — nunca uma imitação
Android (Compose)	Receita Haze haze-glass
Flutter	BackdropFilter + ImageFilter.shader
Windows / Linux nativo	desenhe no aplicativo; materiais de janela (Mica, Acrílico) não são Liquid Glass

Código por plataforma, limites de versão e fallbacks: references/platforms.md. Para fluxos de aplicativo, navegação e especificações de tela, use mobile-ux-designer.

Esta skill existe para que você nunca precise derivar a linguagem de design da Apple do zero. Tudo aqui foi lido das próprias Diretrizes de Interface Humana da Apple e suas figuras, não de memória ou de posts de blog sobre a Apple. Onde a Apple não declara algo, esta skill diz isso em vez de inventar uma regra — essa honestidade é o ponto, porque a maioria dos trabalhos "no estilo Apple" falha ao aplicar confiantemente regras inventadas.

A ideia central da qual tudo mais deriva

A interface da Apple tem duas camadas, e toda a linguagem consiste em mantê-las distintas:

• A camada de conteúdo — sobre o que o aplicativo realmente é. Opaca. Superfícies sólidas, sombras reais, sem vidro. O texto vive aqui e nunca deve ficar sobre um fundo em movimento.
• A camada funcional — barras de ferramentas, barras laterais, barras de abas, popovers, menus, controles flutuantes. É aqui que o Liquid Glass vive. Ele flutua sobre o conteúdo, o refrata e nunca compete com ele.

A Apple declara isso diretamente: "Não use Liquid Glass na camada de conteúdo… incluí-lo na camada de conteúdo pode resultar em complexidade desnecessária e uma hierarquia visual confusa."

Se você levar uma coisa: vidro no chrome, nunca em cards. A falha mais comum do trabalho "no estilo Apple" é congelar tudo, o que destrói a hierarquia que o material existe para criar.

Saída

Forneça ao usuário o que ele pediu — uma página fixa, um diagnóstico, um componente — no comprimento e formato que ele pediu. Não acrescente uma redação não solicitada de filosofia de design a uma correção, e não pule requisitos reais para ser breve: verifique contraste, tamanho do alvo de toque e os fallbacks abaixo, mesmo quando não solicitado, porque um resultado que parece certo, mas falha nesses pontos, é exatamente o resultado "Apple falsa" que esta skill existe para prevenir.

O refinamento de 2026 também importa. A página do macOS 27 Golden Gate da Apple (apple.com/os/macos, verificada em 27/09/2026): "Atualizações no Liquid Glass garantem legibilidade excepcional com refração mais uniforme e contraste melhorado." Ela também lista barras de ferramentas uniformes, barras laterais de ponta a ponta e formatos de janela atualizados. Portanto: tonalidade mais intensa, borda de refração visível, uma barra contínua em vez de ilhas flutuantes. Se você construir o vidro fino e quase imperceptível da primeira versão, está construindo a versão que a Apple já corrigiu.

Comece pelos tokens (web)

assets/tokens.css é uma camada de tokens funcional — paletas clara e escura, o primitivo de vidro com sua borda de refração, o efeito de borda de rolagem e fallbacks para transparência reduzida, movimento reduzido e nenhum suporte a backdrop-filter. Comece por ele em vez de criar valores manualmente, mas verifique-o em relação ao briefing real em vez de colá-lo sem ler: verifique se ainda atende às regras de contraste e alvo de toque abaixo no seu contexto e adapte os valores (cores especialmente — a Apple reitera que pode alterá-las de versão para versão) em vez de citar o arquivo como verdade absoluta incontestável.

Duas coisas nele valem a pena entender em vez de apenas usar:

O primitivo de vidro é um fundo translúcido matizado + backdrop-filter: saturate(180%) blur(28px) + um destaque superior interno (inset). O destaque é o que parece luz curvada; sem ele, a superfície parece transparência simples, que é a marca da imitação de glassmorfismo. As próprias figuras de material da Apple mostram uma borda brilhante distinta traçando a borda.

A borda (.glass::before) é um anel gradiente de 1px, mais brilhante no canto superior esquerdo, fraco nas laterais, mais brilhante novamente no canto inferior direito. Uma borda branca uniforme parece um adesivo; a borda irregular parece um bisel grosso capturando luz.

O fundo ambiente. O vidro precisa de algo atrás para refratar, senão ele renderiza como cinza chato. Um gradiente sutil de múltiplas paradas no fundo da página dá ao material algo para fazer. A Apple obtém isso gratuitamente com papéis de parede e fotos; na web, você precisa fornecê-lo.

Refração: a parte que o desfoque não pode imitar

Apple: "Este material translúcido reflete e refrata seu entorno." Aumente o zoom em qualquer imagem da Apple e o texto ou formas que atingem a borda de um controle de vidro curvam e esticam ao longo de seu contorno, enquanto o meio permanece claro. Isso é o que separa o Liquid Glass do glassmorfismo da era de 2020, e é a primeira coisa que os usuários sentem falta quando está ausente. Construa-o por padrão para controles de vidro; não espere ser solicitado.

• Mecanismo (todas as plataformas): dentro de uma faixa de borda, mostre o conteúdo de mais para dentro, mais forte no contorno, seguindo a forma real (pontas de cápsula, cantos arredondados).
• Web: adicione data-refract a um elemento de vidro e carregue assets/refraction.js. Em mecanismos Chromium (Chrome, Edge, Android WebView, Electron, Tauri no Windows) ele curva o fundo ao vivo. Safari e Firefox não podem executar filtros url() em backdrop-filter, então, para vidro sobre uma área conhecida, adicione data-refract-source="#id": o script curva uma cópia dessa área em vez disso, em todos os navegadores. Vidro sem nenhum dos dois mantém desfoque simples. Sempre forneça uma fonte para vidro hero e de demonstração, ou a maioria dos visitantes (Safari, Firefox) não verá nenhuma curvatura.
• Vidro claro é onde o texto visivelmente curva (pouco desfoque); no vidro normal, a curvatura aparece nas formas da imagem desfocada e nas bordas das cores.
• O vidro curvo recebe uma tonalidade mais clara (--glass-refract) para que a curvatura apareça. O vidro que contém palavras — menus, popovers, folhas, barras laterais — adiciona .glass-text para manter a tonalidade total; caso contrário, seus rótulos podem cair abaixo do contraste em conteúdo brilhante.
• Desligado com Reduzir Transparência, nunca animado com Reduzir Movimento.
• Verifique: coloque o controle sobre uma linha de texto e faça uma captura de tela. As letras na borda curvam e esticam; o meio permanece legível.

Valores, tabela de ajuste e método de teste: references/materials.md ("Refração e a borda"). Rotas Android, Flutter e nativas: references/platforms.md.

Inegociáveis

Estas são as regras que, quando quebradas, fazem o resultado parecer não-Apple.

1. Vidro apenas na camada funcional. Cards de conteúdo recebem superfícies opacas e sombras.
2. Cor é racionada. Apple: "Aplique cor com moderação ao material Liquid Glass… reserve-a para elementos que realmente se beneficiam de ênfase, como indicadores de status ou ações primárias." A figura deles mostra uma barra de ferramentas com três botões coloridos marcados como incorretos e a mesma barra de ferramentas com apenas a ação primária colorida marcada como correta. Uma coisa colorida por barra.
3. A ênfase vai para o fundo, não para o glifo. "Para enfatizar ações primárias, aplique cor ao fundo em vez de símbolos ou texto." A exceção é uma aba selecionada: lá, a Apple colore o ícone e o rótulo e deixa a barra neutra.
4. Linhas finas, não bordas. Os separadores têm 0,5px com ~12% de opacidade e, em listas, eles recuam além do ícone principal. Uma borda sólida cinza de 1px é um idioma da web, não um idioma Apple.
5. Sem pesos de fonte leves. Apple: "Prefira pesos Regular, Medium, Semibold ou Bold e evite Ultralight, Thin e Light."
6. Maiúsculas e minúsculas, não maiúsculas com tracking. Micro-rótulos em maiúsculas com espaçamento largo entre letras são um idioma de dashboard/editorial. Os cabeçalhos de seção da Apple estão em maiúsculas e minúsculas e dependem de peso e cor.
7. Hierarquia de tamanho, peso e cor — nunca de réguas e caixas. Os títulos não são sublinhados e as seções não são cercadas. A própria figura do Mail da Apple constrói quatro níveis apenas a partir dessas três variáveis.
8. Ícones são tudo ou nada dentro de um grupo. A regra de menu da Apple: "ou cada item em um grupo tem um ícone, ou nenhum tem." Listas com metade dos ícones parecem inacabadas.
9. Todo controle personalizado precisa de um estado de pressão. A Apple chama isso explicitamente — sem ele, um controle "pode parecer sem resposta".
10. O conteúdo se estende sob o chrome. Use o efeito de borda de rolagem para que o conteúdo se dissolva ao passar sob uma barra e estenda o fundo sob as barras laterais (veja abaixo). Conteúdo que para abruptamente na borda de uma barra lateral é sobre o que o próprio par de figuras correto/incorreto da Apple trata.
11. Cada uso de backdrop-filter precisa de um fallback opaco @supports not (... ), separado da consulta de mídia de transparência reduzida — um lida com falta de suporte do navegador, o outro com uma configuração do usuário. Ignorar isso é um bug comum e fácil de passar despercebido: a barra renderiza silenciosamente muito transparente sem desfoque.
12. O vidro curva e tem uma borda. Um controle de vidro com uma borda branca uniforme de 1px e sem refração é glassmorfismo, não Liquid Glass. Use o gradiente de borda e refração sempre que a plataforma permitir e um fallback de desfoque limpo onde não permitir.
13. Os alvos de toque têm pelo menos 44×44pt no iOS (o macOS é mais denso, mas ainda precisa de um alvo de clique confortável). Ações destrutivas (excluir, remover conta) recebem a função destrutiva/vermelha, nunca uma neutra.

Tipo

A escala da Apple não é decorativa — é uma escada fixa, e permanecer nela é a maior parte do que faz a tipografia parecer nativa. O padrão iOS (Grande) estilos:

Estilo	Peso	Tamanho	Entrelinha
Título Grande	Regular	34	41
Título 1	Regular	28	34
Título 2	Regular	22	28
Título 3	Regular	20	25
Manchete	Seminegrito	17	22
Corpo	Regular	17	22
Chamada	Regular	16	21
Subtítulo	Regular	15	20
Nota de rodapé	Regular	13	18
Legenda 1	Regular	12	16
Legenda 2	Regular	11	13

macOS executa uma escada mais apertada (Corpo 13/16, Título Grande 26/32) e sua Manchete é Negrito em vez de Seminegrito. Um layout web first-desktop geralmente quer algo entre os dois: tamanhos iOS para títulos e texto de leitura, densidade macOS para barras laterais e metadados.

Os mínimos são reais: iOS 11pt, macOS 10pt. Abaixo disso, a Apple considera o texto ilegível, e os pixels da web são menores que pontos, então trate ~11px como seu piso.

Pilha de fontes: -apple-system, BlinkMacSystemFont, 'SF Pro Text', … fornece SF real em hardware Apple. Em todos os outros lugares, você precisa de um fallback — Inter é o substituto mais próximo amplamente disponível. Nunca vincule SF de uma CDN; ele não está licenciado para isso.

O tracking da Apple é opticamente compensado por tamanho: solto abaixo de 12pt, zero exatamente em 12pt, mais apertado em torno de 19–20pt (≈ −0,45pt), depois positivo a partir de cerca de 24pt (+0,40pt em 29–34pt) antes de decair para zero em tamanhos de exibição. A fonte do sistema aplica isso automaticamente em hardware Apple. Os valores da web no arquivo de tokens (-0.022em para títulos, -0.012em para corpo, 0 para legendas) são uma convenção da web que mantém fontes de fallback como Inter com aparência não solta — não uma conversão da tabela da Apple, portanto, não os cite como da Apple.

Tabelas completas, a curva de tracking e o emparelhamento peso/escala do SF Symbols: references/typography.md.

Cor

A Apple fornece valores exatos, mas também diz "Evite codificar valores de cores do sistema… Os valores reais de cores podem variar de versão para versão." Portanto, use-os como âncoras, não como evangelho.

O conjunto semântico é mais útil que a paleta: label / secondaryLabel / tertiaryLabel / quaternaryLabel para texto, separator para linhas finas e duas famílias de fundo — sistema e agrupado — cada uma com primário / secundário / terciário. Agrupado é o que deve ser usado quando o conteúdo está em cards: a página assume o fundo agrupado (um cinza claro) e os cards assumem branco. Essa inversão do padrão web — página cinza, cards brancos — é uma grande parte da razão pela qual os layouts da Apple parecem Apple.

O modo escuro não é uma inversão. A Apple usa superfícies base e elevadas: preto próximo para a camada mais recuada, um carvão distintamente mais claro para qualquer coisa que deva parecer elevada. Pintar tudo de preto puro está errado, e o próprio par de figuras da Apple demonstra isso.

Mínimos de contraste, declarados pela Apple: 4,5:1 até 17pt, 3:1 em 18pt e acima, 3:1 para negrito em qualquer tamanho.

Valores RGB exatos para cada cor do sistema nas variantes clara, escura e ambas de contraste aumentado, além da lista semântica completa para iOS e macOS: references/color.md.

Material

Duas variantes, e escolher errado é visível:

• Regular — desfoca e ajusta a luminosidade do que está atrás. Quase tudo usa isso. Nas figuras da Apple, é próximo do opaco; o fundo parece cor suave, não uma imagem.
• Claro — altamente translúcido, para controles flutuando sobre fotos e vídeos onde a mídia deve permanecer proeminente. Se o conteúdo atrás for brilhante, a Apple especifica uma camada de escurecimento escura com 35% de opacidade abaixo para que os rótulos sobrevivam.

O material também se adapta: em conteúdo claro, o vidro e seus símbolos ficam escuros; em conteúdo escuro, eles ficam claros. Na web, isso significa que seus tokens de vidro precisam de valores genuinamente diferentes por tema, não um único valor com opacidade diferente.

Receitas, os quatro materiais padrão e níveis de vibrancy: references/materials.md.

Componentes

As formas dos componentes carregam muito do sinal. A versão resumida:

• Barra de ferramentas — uma barra uniforme, monocromática, ações como chips circulares ou em forma de cápsula, ações relacionadas agrupadas em uma cápsula compartilhada. Título (e subtítulo opcional) podem viver nela.
• Barra lateral — de ponta a ponta, vidro, ícones SF-Symbol matizados com o acento, seleção arredondada