liquid-glass: chrome Liquid Glass de Apple en cualquier stack

Apple Liquid Glass: el lenguaje de diseño, en cualquier plataforma

Alcance: cualquier interfaz que deba adoptar el aspecto de Liquid Glass de Apple — una página web, una aplicación web, una aplicación de escritorio con Electron o Tauri, una aplicación Android o Flutter, o una aplicación nativa de Apple. Las reglas de diseño que se indican a continuación son las mismas en todas partes; solo cambia la forma de obtener el fondo, el desenfoque y la curvatura. Elige primero la ruta:

Para qué se construye	Ruta
Web, Electron, Tauri, WebView	assets/tokens.css + assets/refraction.js (este archivo y las referencias)
iOS, iPadOS, macOS 26+ nativo	el material del sistema: glassEffect de SwiftUI, UIGlassEffect de UIKit — nunca un simulacro
Android (Compose)	receta Haze haze-glass
Flutter	BackdropFilter + ImageFilter.shader
Windows / Linux nativo	dibujarlo en la aplicación; los materiales de ventana (Mica, Acrílico) no son Liquid Glass

Código por plataforma, límites de versión y alternativas: references/platforms.md. Para flujos de aplicación, navegación y especificaciones de pantalla, usa mobile-ux-designer.

Esta habilidad existe para que nunca tengas que derivar el lenguaje de diseño de Apple desde cero. Todo lo que aquí se incluye se ha extraído de las propias Guías de Interfaz Humana de Apple y sus figuras, no de la memoria ni de publicaciones de blogs sobre Apple. Cuando Apple no afirma algo explícitamente, esta habilidad lo dice en lugar de inventar una regla; esa honestidad es el punto, porque la mayoría de los trabajos "estilo Apple" fallan al aplicar con confianza reglas inventadas.

La idea única de la que todo lo demás se deriva

La interfaz de Apple tiene dos capas, y todo el lenguaje consiste en mantenerlas diferenciadas:

• La capa de contenido: de lo que realmente trata la aplicación. Opaca. Superficies sólidas, sombras reales, sin cristal. El texto vive aquí y nunca debe colocarse sobre un fondo en movimiento.
• La capa funcional: barras de herramientas, barras laterales, barras de pestañas, popovers, menús, controles flotantes. Aquí es donde vive Liquid Glass. Flota sobre el contenido, lo refracta y nunca compite con él.

Apple lo afirma directamente: "No uses Liquid Glass en la capa de contenido… incluirlo en la capa de contenido puede resultar en una complejidad innecesaria y una jerarquía visual confusa."

Si hay que quedarse con algo: cristal en los elementos cromados, nunca en las tarjetas. El fallo más común del trabajo "estilo Apple" es escarchar todo, lo que destruye la jerarquía que el material existe para crear.

Resultado

Proporciona al usuario lo que ha pedido — una página fija, un diagnóstico, un componente — en la extensión y el formato que ha solicitado. No alargues una corrección con un escrito no solicitado sobre filosofía de diseño, y no omitas requisitos reales para ser breve: verifica el contraste, el tamaño del objetivo táctil y las alternativas que se indican a continuación, incluso cuando no te lo pidan, porque un resultado que tiene buen aspecto pero no los cumple es exactamente el resultado "Apple falso" que esta habilidad existe para prevenir.

El refinamiento de 2026 también importa. La página de macOS 27 Golden Gate de Apple (apple.com/os/macos, consultada el 27-09-2026): "Las actualizaciones de Liquid Glass garantizan una legibilidad excepcional con una refracción más uniforme y un contraste mejorado." También enumera barras de herramientas uniformes, barras laterales de borde a borde y formas de ventana actualizadas. Por lo tanto: tinte más intenso, borde de refracción visible, una barra continua en lugar de islas flotantes. Si construyes el cristal fino y apenas visible de la primera versión, estás construyendo la versión que Apple ya corrigió.

Empieza por los tokens (web)

assets/tokens.css es una capa de tokens funcional: paletas clara y oscura, el primitivo de cristal con su borde de refracción, el efecto de borde de desplazamiento y alternativas para transparencia reducida, movimiento reducido y ausencia total de soporte para backdrop-filter. Empieza por él en lugar de improvisar valores, pero verifícalo con respecto a las especificaciones reales en lugar de pegarlo sin leerlo: comprueba que sigue cumpliendo las reglas de contraste y tamaño del objetivo táctil en tu contexto, y adapta los valores (especialmente los colores — Apple reitera que puede cambiarlos de una versión a otra) en lugar de citar el archivo como una verdad incuestionable.

Dos cosas que contiene merece la pena entender en lugar de usarlas sin más:

El primitivo de cristal es un fondo translúcido con tinte + backdrop-filter: saturate(180%) blur(28px) + un resalte superior interno. El resalte es lo que se percibe como luz curva; sin él, la superficie parece una transparencia plana, que es la señal del glassmorphism por imitación. Las figuras de material de Apple muestran un borde brillante distintivo que recorre el contorno.

El borde (.glass::before) es un anillo degradado de 1 píxel, más brillante en la parte superior izquierda, tenue en los lados, y de nuevo más brillante en la parte inferior derecha. Un borde blanco uniforme se lee como una pegatina; el borde desigual se lee como un bisel grueso que capta la luz.

El fondo ambiental. El cristal necesita algo detrás para refractar, o se renderiza como un gris plano. Un degradado sutil de varias paradas en el fondo de la página le da al material algo que hacer. Apple lo obtiene gratis de fondos de pantalla y fotos; en la web tienes que proporcionarlo.

Refracción: la parte que el desenfoque no puede simular

Apple: "Este material translúcido refleja y refracta su entorno." Acércate a cualquier imagen propia de Apple y verás que el texto o las formas que llegan al borde de un control de cristal se curvan y estiran a lo largo de su contorno, mientras que el centro permanece claro. Esto es lo que separa a Liquid Glass del glassmorphism de la era 2020, y es lo primero que los usuarios echan de menos cuando está ausente. Incorpóralo por defecto en los controles de cristal; no esperes a que te lo pidan.

• Mecanismo (todas las plataformas): dentro de una banda de borde, muestra el contenido desde más adentro, con mayor intensidad en el contorno, siguiendo la forma real (extremos de cápsula, esquinas redondeadas).
• Web: añade data-refract a un elemento de cristal y carga assets/refraction.js. En los motores Chromium (Chrome, Edge, Android WebView, Electron, Tauri en Windows) curva el fondo en vivo. Safari y Firefox no pueden ejecutar filtros url() en backdrop-filter, así que para cristal sobre un área conocida añade data-refract-source="#id": el script curva una copia de esa área en su lugar, en todos los navegadores. El cristal sin ninguna de las dos cosas mantiene un desenfoque simple. Proporciona siempre una fuente para el cristal principal y de demostración, o la mayoría de los visitantes (Safari, Firefox) no verán ninguna curvatura.
• El cristal claro es donde el texto se curva visiblemente (poco desenfoque); en el cristal normal, la curvatura se muestra en las formas y bordes de color de la imagen desenfocada.
• El cristal curvo obtiene un tinte más claro (--glass-refract) para que la curvatura sea visible. El cristal que contiene palabras — menús, popovers, hojas, barras laterales — añade .glass-text para mantener el tinte completo; de lo contrario, sus etiquetas pueden perder contraste sobre contenido brillante.
• Se desactiva con Reducir Transparencia, nunca se anima con Reducir Movimiento.
• Compruébalo: coloca el control sobre una línea de texto y haz una captura de pantalla. Las letras en el borde se curvan y estiran; el centro sigue siendo legible.

Valores, tabla de ajustes y método de prueba: references/materials.md ("Refracción y el borde"). Rutas para Android, Flutter y nativas: references/platforms.md.

No negociables

Estas son las reglas que, cuando se incumplen, hacen que el resultado no parezca de Apple.

1. Cristal solo en la capa funcional. Las tarjetas de contenido obtienen superficies opacas y sombras.
2. El color se dosifica. Apple: "Aplica color con moderación al material Liquid Glass… resérvalo para elementos que realmente se beneficien del énfasis, como indicadores de estado o acciones principales." Su figura muestra una barra de herramientas con tres botones teñidos marcados como incorrectos, y la misma barra de herramientas con solo la acción principal teñida marcada como correcta. Una cosa coloreada por barra.
3. El énfasis va en el fondo, no en el glifo. "Para enfatizar las acciones principales, aplica color al fondo en lugar de a los símbolos o al texto." La excepción es una pestaña seleccionada: ahí Apple colorea el icono y la etiqueta y deja la barra neutra.
4. Líneas finas, no bordes. Los separadores tienen 0.5 píxeles con una opacidad de ~12%, y en las listas se adentran más allá del icono principal. Un borde gris sólido de 1 píxel es un modismo web, no uno de Apple.
5. Sin pesos de fuente claros. Apple: "prefiere los pesos de fuente Regular, Medium, Semibold o Bold, y evita Ultralight, Thin y Light."
6. Minúscula con mayúscula inicial, no mayúsculas con tracking. Las microetiquetas en mayúsculas con un espaciado amplio entre letras son un modismo de paneles editoriales. Los encabezados de sección de Apple están en minúscula con mayúscula inicial y se basan en el peso y el color.
7. Jerarquía mediante tamaño, peso y color — nunca con reglas y recuadros. Los encabezados no están subrayados y las secciones no tienen bordes. La propia figura de la aplicación Mail de Apple construye cuatro niveles únicamente a partir de esas tres variables.
8. Los iconos son todo o nada dentro de un grupo. La regla de menú de Apple: "o todos los elementos de un grupo tienen icono, o ninguno." Las listas con iconos a medias parecen inacabadas.
9. Todo control personalizado necesita un estado de pulsación. Apple lo menciona explícitamente: sin él, un control "puede parecer que no responde".
10. El contenido se extiende debajo de los elementos cromados. Usa el efecto de borde de desplazamiento para que el contenido se disuelva al pasar por debajo de una barra, y extiende el fondo debajo de las barras laterales (ver más abajo). El contenido que se detiene en seco en el borde de una barra lateral es lo que el par de figuras correcto/incorrecto de Apple ilustra.
11. Cada uso de backdrop-filter necesita una alternativa opaca con @supports not (...), independiente de la consulta de medios de transparencia reducida: una maneja la falta de soporte del navegador, la otra una configuración del usuario. Omitirla es un error común y fácil de pasar por alto: la barra se renderiza silenciosamente demasiado transparente y sin desenfoque.
12. El cristal se curva y tiene un borde. Un control de cristal con un borde blanco uniforme de 1 píxel y sin refracción es glassmorphism, no Liquid Glass. Usa el degradado del borde y la refracción siempre que la plataforma lo permita, y un desenfoque limpio como alternativa cuando no sea posible.
13. Los objetivos táctiles tienen al menos 44×44pt en iOS (macOS es más denso pero sigue necesitando un objetivo de clic cómodo). Las acciones destructivas (eliminar, borrar cuenta) obtienen el rol destructivo/rojo, nunca uno neutro.

Tipografía

La escala de Apple no es decorativa: es una escalera fija, y mantenerse en ella es lo que hace que la tipografía parezca nativa. El valor por defecto de iOS (Grande) es:

Estilo	Peso	Tamaño	Interlineado
Título grande	Regular	34	41
Título 1	Regular	28	34
Título 2	Regular	22	28
Título 3	Regular	20	25
Encabezado	Seminegrita	17	22
Cuerpo	Regular	17	22
Comentario	Regular	16	21
Subtítulo	Regular	15	20
Nota al pie	Regular	13	18
Leyenda 1	Regular	12	16
Leyenda 2	Regular	11	13

macOS tiene una escalera más ajustada (Cuerpo 13/16, Título grande 26/32) y su Encabezado es Negrita en lugar de Seminegrita. Un diseño web orientado a escritorio suele querer algo intermedio: tamaños iOS para encabezados y texto de lectura, densidad macOS para barras laterales y metadatos.

Los mínimos son reales: iOS 11pt, macOS 10pt. Por debajo de eso, Apple considera el texto ilegible, y los píxeles web son más pequeños que los puntos, así que trata ~11px como tu límite inferior.

Pila de fuentes: -apple-system, BlinkMacSystemFont, 'SF Pro Text', … proporciona la SF real en hardware Apple. En cualquier otro lugar necesitas una alternativa: Inter es el sustituto disponible más cercano. Nunca enlaces SF desde una CDN; no tiene licencia para ello.

El tracking de Apple se compensa ópticamente por tamaño: suelto por debajo de 12pt, cero exactamente en 12pt, más ajustado alrededor de 19-20pt (≈ −0.45pt), luego positivo a partir de aproximadamente 24pt (+0.40pt en 29-34pt) antes de decaer a cero en tamaños de pantalla. La fuente del sistema lo aplica automáticamente en hardware Apple. Los valores web en el archivo de tokens (-0.022em encabezados, -0.012em cuerpo, 0 leyendas) son una convención web que evita que las fuentes alternativas como Inter parezcan sueltas — no una conversión de la tabla de Apple, así que no los cites como de Apple.

Tablas completas, la curva de tracking y la combinación de peso/escala de SF Symbols: references/typography.md.

Color

Apple proporciona valores exactos, pero también dice "Evita codificar valores de color del sistema… Los valores de color reales pueden fluctuar de una versión a otra." Así que úsalos como anclas, no como dogma.

El conjunto semántico es más útil que la paleta: label / secondaryLabel / tertiaryLabel / quaternaryLabel para texto, separator para líneas finas, y dos familias de fondo — sistema y agrupado — cada una con primario / secundario / terciario. El agrupado es el que se debe usar cuando el contenido está en tarjetas: la página toma el fondo agrupado (un gris claro) y las tarjetas toman el blanco. Esa inversión del valor por defecto web — página gris, tarjetas blancas — es una gran parte de por qué los diseños de Apple se leen como de Apple.

El modo oscuro no es una inversión. Apple usa superficies base y elevada: casi negro para la capa más retraída del fondo, un carbón claramente más claro para cualquier cosa que deba leerse como elevada. Pintar todo de negro puro es incorrecto, y el propio par de figuras de Apple lo demuestra.

Mínimos de contraste, según Apple: 4.5:1 hasta 17pt, 3:1 a 18pt y más, 3:1 para negrita a cualquier tamaño.

Valores RGB exactos para cada color del sistema en las variantes clara, oscura y ambas de contraste aumentado, además de la lista semántica completa para iOS y macOS: references/color.md.

Material

Dos variantes, y elegir la incorrecta es visible:

• Regular: desenfoca y ajusta la luminosidad de lo que tiene detrás. Casi todo usa esta. En las figuras de Apple es casi opaca; el fondo se lee como un color suave, no como una imagen.
• Claro: muy translúcido, para controles que flotan sobre fotos y vídeos donde el contenido multimedia debe seguir siendo prominente. Si el contenido detrás es brillante, Apple especifica una capa de oscurecimiento oscura con un 35% de opacidad debajo para que las etiquetas sobrevivan.

El material también se adapta: sobre contenido claro, el cristal y sus símbolos se vuelven oscuros; sobre contenido oscuro, se vuelven claros. En la web, eso significa que tus tokens de cristal necesitan valores genuinamente diferentes por tema, no un valor con una opacidad diferente.

Recetas, los cuatro materiales estándar y los niveles de vibrancia: references/materials.md.

Componentes

Las formas de los componentes transmiten gran parte de la señal. La versión resumida:

• Barra de herramientas: una barra uniforme, monocromática, acciones como chips circulares o en forma de cápsula, acciones relacionadas agrupadas en una cápsula compartida. El título (y el subtítulo opcional) pueden vivir en ella.
• Barra lateral: de borde a borde, de cristal, iconos SF Symbol teñidos con el color de acento, selección redondeada

…

[truncado para traducción]