liquid-glass: Apple Liquid Glass auf jedem Stack

Apple Liquid Glass – die Designsprache, plattformübergreifend

Geltungsbereich: Jede Oberfläche, die Apples Liquid Glass-Look tragen soll – eine Webseite, eine Web-App, eine Electron- oder Tauri-Desktop-App, eine Android- oder Flutter-App oder eine native Apple-App. Die folgenden Designregeln gelten überall gleichermaßen; nur die Art, wie Sie den Hintergrund, die Unschärfe und die Biegung umsetzen, unterscheidet sich. Wählen Sie zuerst den Weg:

Zielplattform	Weg
Web, Electron, Tauri, WebView	assets/tokens.css + assets/refraction.js (diese Datei und die Referenzen)
iOS, iPadOS, macOS 26+ nativ	das System-Material: SwiftUI glassEffect, UIKit UIGlassEffect – niemals eine Nachbildung
Android (Compose)	Haze haze-glass-Rezept
Flutter	BackdropFilter + ImageFilter.shader
Windows / Linux nativ	zeichnen Sie es innerhalb der App; Fenstermaterialien (Mica, Acrylic) sind kein Liquid Glass

Plattformspezifischer Code, Versionsbeschränkungen und Rückfallebenen: references/platforms.md. Für App-Abläufe, Navigation und Bildschirmspezifikationen verwenden Sie mobile-ux-designer.

Dieses Skill existiert, damit Sie Apples Designsprache nie wieder von Grund auf neu herleiten müssen. Alles hier wurde aus Apples eigenen Human Interface Guidelines und deren Abbildungen entnommen, nicht aus dem Gedächtnis oder aus Blogbeiträgen über Apple. Wo Apple tatsächlich nichts explizit angibt, sagt das Skill dies, anstatt eine Regel zu erfinden – diese Ehrlichkeit ist der Punkt, denn die meisten „Apple-artigen“ Arbeiten scheitern, weil sie selbstbewusst selbst erfundene Regeln anwenden.

Die eine Idee, von der alles andere abhängt

Apples Oberfläche besteht aus zwei Schichten, und die gesamte Sprache dreht sich darum, sie getrennt zu halten:

• Die Inhaltsschicht – worum es in der App eigentlich geht. Undurchsichtig. Feste Oberflächen, echte Schatten, kein Glas. Text lebt hier und darf niemals auf einem sich bewegenden Hintergrund liegen.
• Die Funktionsebene – Symbolleisten, Seitenleisten, Tab-Leisten, Popovers, Menüs, schwebende Steuerelemente. Hier lebt Liquid Glass. Es schwebt über dem Inhalt, bricht ihn und konkurriert nie mit ihm.

Apple sagt dies direkt: „Verwenden Sie Liquid Glass nicht in der Inhaltsschicht… Die Einbeziehung in die Inhaltsschicht kann zu unnötiger Komplexität und einer verwirrenden visuellen Hierarchie führen.“

Wenn Sie eines mitnehmen: Glas auf Chrome, niemals auf Karten. Der häufigste Fehler bei „Apple-artigen“ Arbeiten ist, alles mit einer Frostschicht zu überziehen, was die Hierarchie zerstört, die das Material schaffen soll.

Ausgabe

Geben Sie dem Benutzer, worum er gebeten hat – eine fertige Seite, eine Diagnose, eine Komponente – im geforderten Umfang und im geforderten Format. Stoppen Sie eine Korrektur nicht mit einem unerbetenen Design-Philosophie-Aufsatz auf, und lassen Sie keine echten Anforderungen aus, um kurz zu bleiben: Überprüfen Sie Kontrast, Antippzielgröße und die unten genannten Rückfallebenen auch dann, wenn nicht danach gefragt wurde, denn ein Ergebnis, das richtig aussieht, aber diese Anforderungen verfehlt, ist genau das „falsche Apple“-Ergebnis, das dieses Skill verhindern soll.

Die Verfeinerung von 2026 ist ebenfalls wichtig. Apples macOS 27 Golden Gate-Seite (apple.com/os/macos, geprüft am 27.09.2026): „Aktualisierungen an Liquid Glass gewährleisten eine außergewöhnliche Lesbarkeit mit gleichmäßigerer Brechung und verbessertem Kontrast.“ Sie listet auch gleichmäßige Symbolleisten, randlose Seitenleisten und aktualisierte Fensterformen auf. Also: stärkere Tönung, sichtbarer Brechungsrand, eine durchgehende Leiste statt schwebender Inseln. Wenn Sie das dünne, kaum sichtbare Glas der ersten Version bauen, bauen Sie die Version, die Apple bereits korrigiert hat.

Von den Tokens ausgehen (Web)

assets/tokens.css ist eine funktionierende Token-Schicht – helle und dunkle Paletten, das Glas-Primitiv mit seinem Brechungsrand, der Bildlaufkanten-Effekt und Rückfallebenen für reduzierte Transparenz, reduzierte Bewegung und überhaupt keine backdrop-filter- Unterstützung. Gehen Sie davon aus, anstatt Werte von Hand zu stricken, aber überprüfen Sie es gegen die tatsächliche Aufgabenstellung, anstatt es ungelesen einzufügen: Überprüfen Sie, ob es in Ihrem Kontext noch die Kontrast- und Antippzielregeln unten erfüllt, und passen Sie Werte an (insbesondere Farben – Apple betont, dass sie diese von Version zu Version ändern können), anstatt die Datei als unbestreitbare Grundwahrheit zu zitieren.

Zwei Dinge darin sind es wert, verstanden zu werden, nicht nur verwendet:

Das Glas-Primitiv ist ein getönter, durchscheinender Hintergrund + backdrop-filter: saturate(180%) blur(28px) + eine innenliegende obere Hervorhebung. Die Hervorhebung ist das, was als gebogenes Licht gelesen wird; ohne sie sieht die Oberfläche aus wie einfache Transparenz, was das Erkennungszeichen von nachgeahmtem Glas morphismus ist. Apples eigene Materialabbildungen zeigen einen deutlichen hellen Rand, der der Kante folgt.

Der Rand (.glass::before) ist ein 1px starker Farbverlaufsring, am hellsten oben links, schwach an den Seiten, unten rechts wieder heller. Eine gleichmäßige weiße Umrandung liest sich wie ein Aufkleber; der ungleichmäßige Rand liest sich wie eine dicke Fase, die Licht einfängt.

Der Umgebungshintergrund. Glas braucht etwas dahinter, das es bricht, sonst rendert es als flaches Grau. Ein subtiler mehrstufiger Farbverlauf auf dem Seitenhintergrund gibt dem Material etwas zu tun. Apple bekommt dies kostenlos von Hintergrundbildern und Fotos; im Web müssen Sie es bereitstellen.

Brechung: der Teil, den Weichzeichnung nicht vortäuschen kann

Apple: „Dieses durchscheinende Material reflektiert und bricht seine Umgebung.“ Wenn Sie in Apples eigene Bilder hineinzoomen, sehen Sie, dass Text oder Formen, die den Rand eines Glas-Steuerelements erreichen, sich entlang seiner Kontur biegen und strecken, während die Mitte klar bleibt. Dies unterscheidet Liquid Glass vom Glas morphismus der 2020er-Ära, und es ist das Erste, was Benutzer vermissen, wenn es fehlt. Bauen Sie es standardmäßig für Glas-Steuerelemente ein; warten Sie nicht, bis Sie danach gefragt werden.

• Mechanismus (alle Plattformen): Zeigen Sie innerhalb einer Randzone den Inhalt von weiter innen an, am stärksten an der Kontur, der tatsächlichen Form folgend (Kapselenden, abgerundete Ecken).
• Web: Fügen Sie data-refract zu einem Glas-Element hinzu und laden Sie assets/refraction.js. In Chromium-Engines (Chrome, Edge, Android WebView, Electron, Tauri unter Windows) verbiegt es den Live-Hintergrund. Safari und Firefox können url()-Filter in backdrop-filter nicht ausführen. Fügen Sie daher für Glas über einem bekannten Bereich data-refract-source="#id" hinzu: Das Skript verbiegt stattdessen eine Kopie dieses Bereichs, in jedem Browser. Glas ohne beides behält die einfache Unschärfe. Geben Sie Helden- und Demo-Glas immer eine Quelle, sonst sehen die meisten Besucher (Safari, Firefox) überhaupt keine Biegung.
• Klares Glas ist dort, wo Text sichtbar gekrümmt ist (wenig Unschärfe); bei normalem Glas zeigt sich die Biegung in den Formen und Farbkanten des unscharfen Bildes.
• Gebogenes Glas erhält eine hellere Tönung (--glass-refract), damit die Biegung sichtbar wird. Glas, das Wörter trägt – Menüs, Popovers, Blätter, Seitenleisten – erhält .glass-text, um die volle Tönung zu behalten; andernfalls kann seine Beschriftung über hellem Inhalt unter den Kontrast fallen.
• Aus unter „Transparenz reduzieren“, niemals animiert unter „Bewegung reduzieren“.
• Überprüfen Sie es: Platzieren Sie das Steuerelement über einer Textzeile und machen Sie einen Screenshot. Buchstaben am Rand krümmen und strecken sich; die Mitte bleibt lesbar.

Werte, Abstimmungstabelle und Testmethode: references/materials.md („Brechung und der Rand“). Android-, Flutter- und native Wege: references/platforms.md.

Nicht verhandelbar

Dies sind die Regeln, bei deren Bruch das Ergebnis als nicht von Apple wahrgenommen wird.

1. Glas nur in der Funktionsebene. Inhaltskarten erhalten undurchsichtige Oberflächen und Schatten.
2. Farbe wird rationiert. Apple: „Verwenden Sie Farbe sparsam auf dem Liquid Glass-Material… reservieren Sie sie für Elemente, die wirklich von Hervorhebung profitieren, wie Statusanzeigen oder primäre Aktionen.“ Ihre Abbildung zeigt eine Symbolleiste mit drei eingefärbten Schaltflächen, die als falsch markiert ist, und die gleiche Symbolleiste mit nur der primären Aktion eingefärbt, die als richtig markiert ist. Ein gefärbtes Element pro Leiste.
3. Die Betonung liegt auf dem Hintergrund, nicht auf dem Symbol. „Um primäre Aktionen hervorzuheben, wenden Sie Farbe auf den Hintergrund an, nicht auf Symbole oder Text.“ Die Ausnahme ist ein ausgewählter Tab: Dort färbt Apple das Symbol und die Beschriftung und lässt die Leiste neutral.
4. Haarfeine Linien, keine Ränder. Trennlinien sind 0,5px bei ~12% Deckkraft, und in Listen rücken sie hinter das führende Symbol ein. Ein 1px durchgehender grauer Rand ist ein Web-Idiom, kein Apple-Idiom.
5. Keine leichten Schriftgewichte. Apple: „bevorzugen Sie Regular, Medium, Semibold oder Bold Schriftgewichte und vermeiden Sie Ultralight, Thin und Light.“
6. Satzfall, nicht Großbuchstaben mit Laufweite. Mikro-Beschriftungen in Großbuchstaben mit weiter Laufweite sind ein Dashboard/Redaktions-Idiom. Apples Abschnittsüberschriften sind im Satzfall und verlassen sich auf Gewicht und Farbe.
7. Hierarchie durch Größe, Gewicht und Farbe – niemals durch Linien und Kästen. Überschriften werden nicht unterstrichen und Abschnitte nicht eingerahmt. Apples eigene Mail-Abbildung baut vier Ebenen allein aus diesen drei Variablen auf.
8. Symbole sind innerhalb einer Gruppe alles oder nichts. Apples Menüregel: „entweder jedes Element in einer Gruppe hat ein Symbol, oder keines.“ Halb symbolisierte Listen wirken unfertig.
9. Jedes benutzerdefinierte Steuerelement benötigt einen Druckzustand. Apple weist explizit darauf hin – ohne ihn kann sich ein Steuerelement „unkommunikativ anfühlen“.
10. Inhalt erstreckt sich unter die Chromoberfläche. Verwenden Sie den Bildlaufkanten-Effekt, sodass der Inhalt beim Vorbeigleiten unter einer Leiste verschwindet, und erstrecken Sie den Hintergrund unter Seitenleisten (siehe unten). Inhalt, der an einer Seitenleistenkante abrupt endet, ist das, worum es in Apples eigenem Paar von falschen/richtigen Abbildungen geht.
11. Jede backdrop-filter-Verwendung benötigt einen @supports not (...) undurchsichtigen Rückfall, getrennt von der Medienabfrage für reduzierte Transparenz – eine behandelt fehlende Browserunterstützung, die andere eine Benutzereinstellung. Das Auslassen ist ein häufiger, leicht zu übersehender Fehler: Die Leiste rendert stillschweigend zu transparent ohne Unschärfe.
12. Glas biegt sich und hat einen Rand. Ein Glas-Steuerelement mit einem gleichmäßigen 1px weißen Rand und ohne Brechung ist Glas morphismus, nicht Liquid Glass. Verwenden Sie den Randverlauf und die Brechung, wo immer die Plattform es erlaubt, und einen sauberen Unschärfe-Rückfall, wo nicht.
13. Antippziele sind auf iOS mindestens 44×44pt (macOS ist dichter, benötigt aber dennoch ein bequemes Klickziel). Destruktive Aktionen (Löschen, Konto entfernen) erhalten die destruktive/rote Rolle, niemals eine neutrale.

Schrift

Apples Skala ist nicht dekorativ – sie ist eine feste Leiter, und darauf zu bleiben ist der Hauptgrund, warum sich Typografie nativ anfühlt. Der iOS-Standard (Groß) Stile:

Stil	Gewicht	Größe	Zeilenabstand
Großer Titel	Regular	34	41
Titel 1	Regular	28	34
Titel 2	Regular	22	28
Titel 3	Regular	20	25
Überschrift	Semibold	17	22
Fließtext	Regular	17	22
Hinweis	Regular	16	21
Unterüberschrift	Regular	15	20
Fußnote	Regular	13	18
Beschriftung 1	Regular	12	16
Beschriftung 2	Regular	11	13

macOS verwendet eine engere Leiter (Fließtext 13/16, Großer Titel 26/32) und seine Überschrift ist Bold statt Semibold. Ein Desktop-zuerst-Weblayout möchte normalerweise etwas zwischen beiden: iOS-Größen für Überschriften und Lesetext, macOS-Dichte für Seitenleisten und Metadaten.

Mindestgrößen sind real: iOS 11pt, macOS 10pt. Darunter betrachtet Apple Text als unleserlich, und Web-Pixel sind kleiner als Punkte, behandeln Sie also ~11px als Ihre Untergrenze.

Schriftstapel: -apple-system, BlinkMacSystemFont, 'SF Pro Text', … liefert echte SF auf Apple-Hardware. Überall sonst benötigen Sie einen Rückfall – Inter ist der nächstgelegene weit verbreitete Ersatz. Verlinken Sie SF niemals von einem CDN; es ist dafür nicht lizenziert.

Apples Laufweite wird optisch pro Größe kompensiert: locker unter 12pt, null bei genau 12pt, am engsten um 19–20pt (≈ −0,45pt), dann positiv ab etwa 24pt (+0,40pt bei 29–34pt), bevor sie bei Anzeigegrößen auf null abfällt. Die System-Schriftart wendet dies auf Apple-Hardware selbst an. Die Web-Werte in der Token-Datei (-0,022em Überschriften, -0,012em Fließtext, 0 Beschriftungen) sind eine Web-Konvention, die dafür sorgt, dass Rückfall-Schriftarten wie Inter nicht zu locker aussehen – keine Umrechnung von Apples Tabelle, also zitieren Sie sie nicht als Apple's.

Vollständige Tabellen, die Laufweiten-Kurve und SF Symbols-Gewichts/Skalierungs-Paarung: references/typography.md.

Farbe

Apple liefert exakte Werte, sagt aber auch „Vermeiden Sie das feste Codieren von Systemfarbwerten… Die tatsächlichen Farbwerte können von Version zu Version schwanken.“ Verwenden Sie sie also als Anker, nicht als Evangelium.

Das semantische Set ist nützlicher als die Palette: label /secondaryLabel / tertiaryLabel / quaternaryLabel für Text, separator für haarfeine Linien und zwei Hintergrundfamilien – system und grouped – jeweils mit primary / secondary / tertiary. Grouped ist das, zu dem Sie greifen, wenn Inhalt in Karten sitzt: Die Seite erhält den Grouped-Hintergrund (ein helles Grau) und die Karten erhalten Weiß. Diese Umkehrung des Web-Standards – graue Seite, weiße Karten – ist ein großer Grund, warum Apple-Layouts wie Apple aussehen.

Der dunkle Modus ist keine Invertierung. Apple verwendet Basis und erhöhte Oberflächen: fast schwarz für die zurückweichende unterste Schicht, ein deutlich helleres Holzkohlegrau für alles, das als erhöht gelesen werden soll. Alles in reinem Schwarz zu malen ist falsch, und Apples eigenes Abbildungspaar demonstriert es.

Kontrast-Minima, von Apple angegeben: 4,5:1 bis 17pt, 3:1 bei 18pt und darüber, 3:1 für fett in jeder Größe.

Exakte RGB-Werte für jede Systemfarbe in hell, dunkel und beiden Varianten mit erhöhtem Kontrast, plus die vollständige semantische Liste für iOS und macOS: references/color.md.

Material

Zwei Varianten, und die falsche Wahl ist sichtbar:

• Regular – verwischt und passt die Leuchtkraft dessen an, was dahinter ist. Fast alles verwendet dies. In Apples Abbildungen ist es nahezu undurchsichtig; der Hintergrund wird als weiche Farbe gelesen, nicht als Bild.
• Clear – hochtransparent, für Steuerelemente, die über Fotos und Video schweben, wo das Medium prominent bleiben muss. Wenn der dahinterliegende Inhalt hell ist, gibt Apple eine dunkle Abdunklungsschicht mit 35% Deckkraft darunter an, damit die Beschriftungen überleben.

Das Material passt sich auch an: Auf hellem Hintergrund wird das Glas und seine Symbole dunkel, auf dunklem Hintergrund werden sie hell. Im Web bedeutet das, dass Ihre Glas-Tokens für jedes Design wirklich unterschiedliche Werte benötigen, nicht einen Wert mit einer anderen Deckkraft.

Rezepte, die vier Standardmaterialien und Lebendigkeitsstufen: references/materials.md.

Komponenten

Komponentenformen tragen viel zum Gesamteindruck bei. Die Kurzfassung:

• Symbolleiste – eine einheitliche Leiste, monochrom, Aktionen als runde oder kapselförmige Chips, zusammengehörige Aktionen in einer gemeinsamen Kapsel gruppiert. Titel (und optionaler Untertitel) können darin leben.
• ** Seitenleiste ** – randlos, Glas, SF-Symbol-Symbole mit Akzentfarbe eingefärbt, abgerundete Auswahlfläche

...

[gekürzt zur Übersetzung]