rik-python/apple-style-design

Apple Style Design

Ein vollständiges Designsystem, das aus dem Dribbble-Tag apple-style (64 Shots, Oktober 2026) reverse-engineered und mit Apples eigenen HIG-Konventionen abgeglichen wurde. Es umfasst Tokens, Komponenten, Materialien, Bewegung, Layout, Text und plattformspezifische Rezepte.

Der Look in einem Satz: ruhige neutrale Leinwand, ein selbstbewusster Akzent, Inhalt als Held, sanfte Tiefe statt Linien und Bewegung, die sich physisch anfühlt.

So verwenden Sie dieses Skill

1. Identifizieren Sie den Ausgabetyp (Webseite, App-Bildschirm, Widget, Plugin-Panel, Icon, Poster, Animation). Wählen Sie das passende Rezept in references/layouts.md.
2. Wählen Sie einen Modus: Hell (Standard für Marketing, Produktivität, Gesundheit), Dunkel (Medien, Profi-Tools, Finanzen, Gaming, VFX) oder Glas-über-Bild (visionOS, Hero-Bereiche, Player). Siehe „Modus-Auswahl“ unten.
3. Laden Sie die Tokens. Für Web: Kopieren Sie assets/apple-style.css in das Projekt (oder binden Sie es inline ein) und bauen Sie mit den Variablen und .as-*-Klassen. Für andere Plattformen lesen Sie references/platforms.md (Qt/PySide QSS für Nuke, ComfyUI-Frontend, Tailwind, SwiftUI, Figma, Folien, Remotion).
4. Setzen Sie Komponenten aus references/components.md ein. Erfinden Sie keine neuen Stile für einen Button oder eine Listenzeile; die Rezepte enthalten bereits die feinen Details.
5. Fügen Sie Materialien und Bewegung zuletzt hinzu: references/materials.md (Liquid Glass, Mattglas, Mesh-Verläufe, Körnung) und references/motion.md (Federn, Enthüllungen, Druckzustände).
6. Führen Sie die QA-Checkliste am Ende durch, bevor Sie das Ergebnis zeigen.

Benötigen Sie einen Nachweis für ein Muster oder eine visuelle Referenz? references/shot-catalog.md listet jeden analysierten Shot auf und zeigt, was er lehrt. assets/demo.html ist eine funktionierende Galerie jeder Komponente, die mit dem Stylesheet erstellt wurde: Öffnen Sie es, um die angestrebte Qualität zu sehen.

Die 12 Gesetze (warum es wie „Apple“ aussieht)

Dies sind die Muster, die in fast jedem starken Shot auftauchten. Jedes hat einen Grund; behalten Sie den Grund im Hinterkopf, wenn ein Fall nicht abgedeckt ist.

1. Neutrale Leinwand, farbiger Inhalt. Hintergründe sind Off-White #F5F5F7 / Gruppiert-Grau #F2F2F7 oder Fast-Schwarz #000/#1C1C1E. Farbe ist für Daten, Zustände und eine primäre Aktion reserviert. Grund: Die Leinwand tritt zurück, sodass Inhalt und Akzent die gesamte Bedeutung tragen.
2. Ein Akzent pro Bildschirm. Systemblau #007AFF als Standard; Violett #5E5CE6, Pink, Orange oder Grün, wenn das Produkt eine eigene Identität hat. Ein zweiter Akzent nur für Datenreihen (z.B. wechselnde orange/pinke Balken). Grund: Ein einzelner Akzent macht die primäre Aktion ohne Beschriftung offensichtlich.
3. Tiefe durch Höhe, nicht durch Ränder. Karten schweben auf weichen, breiten, deckungsarmen Schatten; Trennlinien sind 0,5px Haarfeinlinien, die vom linken Rand eingerückt sind. Schwere 1px graue Ränder wirken wie „Webformular“, nicht wie Apple.
4. Durchgehende Ecken überall. Squircle-ähnliche Radien: 10 (Bedienelemente), 14 (Felder), 20 (Listengruppen, Karten), 28 (Widgets, Sheets), 38+ (Gerät/Fenster), 999 (Pillen). Verschachtelter Radius = äußerer Radius minus Abstand.
5. Typografie macht die Hierarchie. SF Pro / Inter, enge negative Laufweite bei Anzeigegrößen, fette große Titel, grauer Sekundärtext statt kleinerer Größen. Zahlen sind Helden: 12,203 groß und fett mit einer kleinen grauen Einheit daneben auf derselben Grundlinie.
6. Grau ist eine Skala, keine Farbe. Beschriftungsdeckungen: primär 100 %, sekundär 74 % hell / 60 % dunkel (Apple liefert 60 % im Hellen, was nur 3,44:1 auf Weiß ergibt), tertiär 30 %, quartär 18 %. Erfinden Sie niemals ein zufälliges #999.
7. Pillen und Kreise für Aktionen. Primäre Buttons sind volle Pillen; Symbolaktionen sind 44px Kreise; FABs sind gefüllte Akzentkreise mit einem weißen SF-Symbol und einem weichen farbigen Schatten.
8. Materialien statt flacher Füllungen. Overlays, Werkzeugleisten, Docks, Seitenleisten und Player verwenden transluzentes, unscharfes Material (Liquid Glass), sodass der Kontext durchscheint.
9. Großzügiger, rhythmischer Weißraum. 4pt-Raster; 16/20 Innenabstand; Abschnitte atmen (96-160px auf dem Desktop). Wenn es sich etwas leer anfühlt, ist es wahrscheinlich richtig.
10. Bewegung ist physisch. Federn, keine linearen Tweens. Drücken = Skalierung 0,97, Loslassen = Zurückfedern. Enthüllungen verblassen + heben sich 8-24px + entschärfen. Nichts springt mehr als einmal.
11. Text ist kurz und selbstbewusst. Satzfall, Punkte bei Slogans („Klang. Verfeinert.“, „Demnächst verfügbar.“), zweifarbige Überschriften mit einem grauen oder akzentfarbenen Satzteil, kleingeschriebene Widget-Titel erlaubt („schritte gegangen“).
12. Handwerk in den Mikrodetails. Chevrons in tertiärem Grau, tabellarische Ziffern für Daten, Tastaturhinweise (esc, return), Statuspunkte, 0,5px Haarfeinlinien, innere obere Lichthöfe auf Glas, farbiges Leuchten unter Diagrammen. Diese Details machen den Unterschied zwischen „sauber“ und „Apple“.

Modus-Auswahl

Produkt wirkt wie	Modus	Leinwand	Oberfläche	Akzentidee
Gesundheit, Produktivität, Handel, Dokumente, SaaS-Marketing	Hell	#F5F5F7 / #F2F2F7	#FFFFFF	Blau #007AFF
Media-Player, Musik, Finanz-Ticker, Profi-/VFX-Tools, Gaming	Dunkel	#000000	#1C1C1E / #2C2C2E	Pink #FF375F, Grün #30D158, Violett #5E5CE6
Held über Foto/Video, visionOS, Player, Kippschalter	Glas	Bild oder Mesh-Verlauf	Liquid Glass	Weiß primär, Akzent sekundär
Marke/Poster/Launch	Verlauf	Mesh-Verlauf + Körnung	Glas oder keins	Produktfarbe

Kern-Tokens (Zusammenfassung)

Vollständige Tabellen mit Dunkelwerten und Begründung: references/tokens.md. Implementiert in assets/apple-style.css.

• Schriftart-Stapel: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif. Laden Sie Inter (400/500/600/700) von Google Fonts als plattformübergreifenden Fallback. Mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace.
• Schriftskala (App): Large Title 34/41 700 (-0,022em) · Title1 28/34 700 · Title2 22/28 700 · Title3 20/25 600 · Headline 17/22 600 · Body 17/22 400 · Callout 16/21 · Subhead 15/20 · Footnote 13/18 · Caption 12/16 · Caption2 11/13.
• Schriftskala (Marketing): Hero 64-96px 700, Zeilenhöhe 1,04, Laufweite -0,035em · Section 40-56px 600 -0,028em · Lead 21-24px 400 Sekundärfarbe · Eyebrow 14-17px 600 in Akzentfarbe.
• Abstände: 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160.
• Radius: 6 (Tags), 10 (Buttons/Bedienelemente), 14 (Felder), 20 (Karten/Listen), 28 (Widgets/Sheets), 38 (Fenster/Geräte), 999 (Pillen).
• Schatten (Hell): 0 1px 2px rgb(0 0 0/.04), 0 4px 12px rgb(0 0 0/.05), 0 16px 40px rgb(0 0 0/.08). Schwebend: 0 32px 80px rgb(0 0 0/.12) hinzufügen.
• Easing: Standard cubic-bezier(.25,.1,.25,1), betont aus cubic-bezier(.32,.72,0,1), Feder linear()-Kurve in motion.md. Dauern 150 (Drücken), 250 (Zustand), 400 (Eintritt), 600-900 (Helden-Enthüllungen).

Anti-Patterns (im Scrape gesehen, nicht kopieren)

Der Tag enthielt auch Stile, die nicht zum Stil passen. Sie lehren, was zu vermeiden ist:

• Skeuomorphe 2012-Glanzlichter: geprägte Eingabefelder, abgeschrägte „Login“-Buttons, Leinenstrukturen (OTAir App Store Shot).
• Cartoon-Maskottchen, Aufkleber-Konturen und schwere Umrisse (Taco, Buzz Addiction).
• komplett großgeschriebene Monospace-„Tech-Brutalist“-Seiten (MEMBRAN): ein gültiger Stil, aber nicht Apple.
• Neon-Mehrverlaufs-Buttons auf jedem Element und mehr als ein Verlauf pro Karte.
• Harte schwarze Schlagschatten, die zu einer Seite versetzt sind (die „Astro“-Geräterahmen verwenden einen brutalen versetzten Schatten: falsch für Apple-Stil).
• Standard 1px #ddd-Ränder auf jeder Karte, #999-Text, Bootstrap-Blau #0d6efd.
• Hüpfende Überschwing-Animationen, sich drehende Ladebalken auf allem, Parallax-Effekte, die gegen das Scrollen kämpfen.
• Verwendung von Apples Logo oder Marken im Produkt des Benutzers. Verwenden Sie den Stil, niemals die Marke.

Ausgabe-Vertrag

Wenn dieses Skill ein Design produziert:

• Liefern Sie funktionierenden Code, keine Beschreibung. Web: semantisches HTML + die Token-CSS (inline oder verlinkt) + minimales JS für Bewegung. Andere Ziele: das plattformspezifische Rezept.
• Unterstützen Sie immer Hell und Dunkel, es sei denn, der Modus-Auswahl sagt nur Dunkel, und respektieren Sie prefers-reduced-motion.
• Barrierefreiheit ist Teil des Looks: 4,5:1 Textkontrast (label-2 ist so eingestellt, dass es auf Weiß, Leinwand und gruppiertem Grau besteht; label-3 ist nur für Platzhalter, Chevrons und deaktivierte Zustände, niemals für Text, den Menschen lesen müssen), 44x44 Touch-Ziele, sichtbarer Fokusring (3px accent-text-Kontur, 2px Versatz: eine Kontur, niemals ein Box-Shadow, damit Komponentenschatten ihn nicht verstecken können), Beschriftungen auf Icon-Buttons.
• Rohe Systemakzente bestehen den Kontrast als Button-Füllungen und als kleiner Text nicht (Weiß auf #007AFF = 4,02:1, auf #0A84FF = 3,65:1). Füllen Sie Buttons mit accent-fill, färben Sie Text mit accent-text, behalten Sie rohe accent für Leuchten, Kippschalter, Icons und große Formen. Sichere Schattierungen pro Farbton: references/tokens.md 3a.
• Geben Sie nach der Auslieferung den Modus, den Akzent und die 2-3 markanten Details in einem kurzen Satz an, damit der Benutzer steuern kann.

QA-Checkliste (vor dem Zeigen durchführen)

• Leinwand ist neutral; nur eine Akzentfarbe treibt Aktionen an.
• Akzent besteht Kontrast: Button-Füllungen verwenden accent-fill, Akzenttext verwendet accent-text (tokens.md 3a); ein benutzerdefinierter Farbton hatte seine Verhältnisse berechnet.
• Keine harten Ränder auf Karten; Trennlinien sind Haarfeinlinien, eingerückt und bei 1x DPR heller.
• Optionsfeldgruppen mit langen Beschriftungen oder Hinweisen sind Single-Choice-Listen mit einem Häkchen, keine gequetschten Segmentsteuerungen.
• Kompakte Desktop-Bedienelemente wachsen unter pointer: coarse auf 44px.
• Radien folgen der Skala und verschachtelte Radien sind konzentrisch.
• Anzeigetext hat negative Laufweite; Sekundärtext verwendet die Grauskala, nicht die Größe.
• Heldenzahlen/-titel sind groß; Einheiten/Beschriftungen klein und grau auf derselben Grundlinie.
• Primäre Aktion ist eine Pille (oder Akzent-FAB); Symbol-Buttons sind 44px Kreise.
• Overlays/Werkzeugleisten verwenden Materialunschärfe mit innerem Licht, nicht flaches Grau.
• Schatten sind weich und geschichtet; nichts sieht aufgeklebt aus.
• Drücken, Hover, Fokus-Zustände existieren; Bewegung verwendet Federn/Ease-Out; reduzierte Bewegung respektiert.
• Dunkelmodus verwendet geschichtete Grautöne (#1C1C1E / #2C2C2E / #3A3A3C), keine rein schwarzen Oberflächen auf Schwarz.
• Text ist kurz, Satzfall, selbstbewusst; kein Lorem Ipsum in der gelieferten Arbeit.
• Mobile Breite funktioniert mit 16-20px Rändern und ohne horizontalen Scrollen.