Apple-Web-Design

Was macht Apple-Web-Design?

Eine Designsprache für Web-Apps, die sich wie eine native iPhone-App oder eine Apple.com-Produktseite anfühlen sollen. Sie wurde entwickelt, auf echten iPhones getestet und Bildschirm für Bildschirm in einer ausgelieferten Meal-Planner-App verfeinert (deren einheitliches index.html die Referenzimplementierung war). Alles hier ist reines CSS und Vanilla JS, kein Framework oder Bibliothek, sodass es in jedes Projekt eingefügt werden kann.

Das Ziel ist ein ruhiges, durchgängiges Produkt: hellgraue Seite, weiße Kacheln, ein blauer Akzent, großer selbstbewusster Text und jede Berührung wird mit einer Bewegung an Ort und Stelle beantwortet. Nichts springt, nichts rendert den gesamten Bildschirm neu, getippter Text und Scrollposition gehen nie verloren.

So verwenden Sie dieses Skill

1. Neues UI: Fügen Sie zuerst references/tokens.css in die Seite ein. Bauen Sie dann Bildschirme aus den Komponenten-Rezepten in references/components.md auf. Fügen Sie assets/morph.js und die Bewegungen aus references/motion.md hinzu, wenn das UI aus dem Status neu rendert.
2. Bestehendes UI: Behalten Sie die Struktur und Daten des Projekts. Ersetzen Sie Farben, Schrift und Formen durch die Tokens, konvertieren Sie dann Komponenten einzeln. Umschreiben Sie keine Logik, um es umzustilieren.
3. Glas: Lesen Sie references/liquid-glass.md nur, wenn der Benutzer Liquid Glass / iOS 26 Glas wünscht (Tab-Leiste, schwebende Buttons, Toasts, Sheet-Buttons).
4. Dunkle Showcase-Bildschirme (ein Startbildschirm, ein Modus wie Party oder Fokus): references/keynote.md.
5. Bevor Sie es als fertig bezeichnen: Führen Sie references/checklist.md aus – Screenshots in hell und dunkel bei 390×844.
6. Wenn die App verkauft wird (App Store oder kommerziell): Lesen Sie zuerst references/commercial.md. Einige der am meisten Apple-ähnlichen Details sind genau die, die Apple beanstandet.

Lesen Sie nur die Referenzen, die Sie benötigen; jede ist in sich abgeschlossen.

Die Kernregeln (warum sie wichtig sind)

Farbe: ein Akzent, sparsam verwendet. Seite #f5f5f7, Kacheln #fff, Tinte #1d1d1f, sekundär #6e6e73, Aktionsblau #0071e3 (dunkel: #000 / #1d1d1f / #f5f5f7 / #86868b / #2997ff). Blau bedeutet „hier können Sie handeln“, daher erscheint es auf primären Schaltflächen, Links, dem ausgewählten Tab und Fortschritt – nirgendwo dekorativ. Statusfarben (--ok grün, --warn bernsteinfarben, --bad rot) tragen nur dann Bedeutung, wenn sie eine Art von Daten konsistent überall, wo sie erscheinen, kennzeichnen. Ein Markenverlauf, sofern vorhanden, gehört nur zu einem speziellen Bildschirm.

Dunkelmodus folgt dem Telefon. Jede Farbe ist eine CSS-Variable, die unter prefers-color-scheme: dark neu definiert wird. Dunkel sind echte schwarze Seiten mit #1d1d1f-Kacheln, und Schatten werden ausgeschaltet (--shadow:none), weil sie auf Schwarz wie Schmutz aussehen.

Schrift führt die Hierarchie, nicht Boxen. System-Schriftstack (-apple-system, BlinkMacSystemFont, system-ui, sans-serif, der auf Apple-Geräten SF liefert), 17 px Textkörper, enge negative Laufweite bei allem Großen:

• Seitentitel 40–48 px fett, −0,035em, mit einem abschließenden Punkt: „Rezepte.“ – die Apple.com-Überschrift-Stimme.
• Zweifarbige Abschnittsüberschriften, 24 px fett: der erste Teil in Tinte, der Rest grau: „Einkäufe. 15 Produkte fehlen.“. Beide Teile enden mit einem Punkt.
• Große Zahlen sind dünn (Gewicht 200–300) und riesig (38–72 px) mit font-variant-numeric: tabular-nums, damit Ziffern beim Ändern nicht zittern. Kleinere Statistikzahlen (Spezifikationszeilen) sind 600.
• Bildunterschriften 13–14 px grau. Gehen Sie nicht unter 12 px.

Formen: randlose Kacheln, Pillen, großzügiger Raum. Radien 8 / 14 / 22 / 28 px; Kacheln haben keine Ränder und einen sehr weichen Schatten (0 4px 18px rgba(0,0,0,.06)). Zeilen innerhalb einer Kachel sind durch einen Haarstrich getrennt, der am Text beginnt, nicht am Rand (iOS Inset Separator). Schaltflächen sind Pillen (border-radius: 999px): primär durchgehend blau mit weißem Text, sekundär grau gefüllt mit blauem Text, destruktiv grau gefüllt mit rotem Text. Fotos laufen randlos innerhalb ihrer Kachel.

Layout: eine Spalte, Telefon zuerst. max-width: 720px zentriert, 16 px Seitenabstände, Safe-Area-Inserts an jeder fixierten Kante (env(safe-area-inset-*)), 110 px unterer Innenabstand, damit der Inhalt die Tab-Leiste freigibt. Touch-Ziele ≥ 44 px.

Bewegung: alles bewegt sich an Ort und Stelle. Rendern Sie mit einem DOM-Morph anstelle von innerHTML, damit Knoten erhalten bleiben; neue Zeilen wachsen ein, entnommene Zeilen verschwinden als verblassender Geist, verschobene Zeilen gleiten (FLIP), geänderte Zahlen rollen, Pillen gleiten, Sheets springen auf, Buttons drücken ein (scale .96, spring curve). Zwei Kurven decken fast alles ab: --spring: cubic-bezier(.3,1.4,.5,1) (Drücke, kleine Pops) und --ease: cubic-bezier(.2,.8,.2,1) (Fade, Balken); iOS-eigene cubic-bezier(.32,.72,0,1) (kein Überschwingen) für Sheets und große Bewegungen. Alles wird unter prefers-reduced-motion: reduce ausgeschaltet – prüfen Sie es, gehen Sie nicht davon aus.

Text: kurz, menschlich, Apple-Stimme. Titel mit Punkten, Verben auf Schaltflächen („Gekocht“, „Hinzufügen“), Zahlen entsprechend dem Gebietsschema formatiert (toLocaleString(sprache); Litauisch verwendet Leerzeichen bei Tausendern und ein Dezimalkomma), keine Ausrufezeichen, kein Emoji in der Chrome (Emojis sind als Inhalts-Icons in Ordnung, z. B. 🍸 für einen Getränkeeintrag). Fehlertext sagt, was als Nächstes zu tun ist.

Bereits getroffene Entscheidungen (nicht erneut diskutieren)

Diese stammen aus echtem Feedback beim Bau der Referenz-App:

• Die primäre blaue Aktion bleibt durchgehend blau auch innerhalb von Glas-UIs – getönte Glasblaue Buttons wurden getestet und abgelehnt.
• Liquid Glass ist standardmäßig eingeschaltet, aber vom Benutzer umschaltbar, mit einem Stärkeregler; Inhaltskarten bleiben solide, damit Text lesbar bleibt. Glas ist nur für schwebende Chrome-Elemente.
• Rezept-/Produktfotos sind die Bildsprache; keine Illustrationen oder Stock-ähnlichen Dekorationen.
• iOS 26-Verhalten gewinnt im Zweifelsfall: Tab-Leiste schwebt als Kapsel und versteckt sich beim Scrollen in eine kleine Schaltfläche; Glas schwillt (scale up) unter dem Finger an, anstatt einzusinken.
• Jeder Tab merkt sich seine eigene Scrollposition; Tippen auf den aktiven Tab scrollt nach oben.
• Ein Toast kann durch Wischen nach oben verworfen werden und verfügt über eine Rückgängig-Aktion für jede destruktive oder datenändernde Berührung.

Dateien

• references/tokens.css – der vollständige Token-Block (hell + dunkel, Radien, Schatten, Kurven). Einfach einfügen.
• references/components.md – Copy-Paste HTML + CSS für jede Komponente mit Hinweisen zum Verhalten.
• references/motion.md – der Animations-Helper, Morph-Hooks, FLIP, Zahlenrollen, Tab-Umschaltung, Sheets, Wisch- und Halte-Gesten, haptisches Ticken, reduzierte Bewegung.
• references/liquid-glass.md – das iOS 26 Glas-Material, die Chromium-Refraktion-Linse, die einklappende Tab-Leiste.
• references/keynote.md – der schwarze „Keynote“-Stil für einen speziellen Bildschirm.
• references/checklist.md – Überprüfungsliste und ein Screenshot-Skript.
• references/commercial.md – was geändert werden muss, bevor eine App in diesem Stil verkauft wird.
• assets/morph.js – der 70-zeilige DOM-Morph (keyed Zeilen, fokus- und schreibsicher, fällt auf innerHTML zurück).