Design-System inspiriert von Apple

Category: Medien & Konsumgüter Unterhaltungselektronik. Premium-Weißraum, SF Pro, filmische Bildsprache.

1. Visuelles Thema & Atmosphäre

Apples Web-Sprache ist ein präzises redaktionelles System, das zwischen galerieartiger Ruhe und Informationsblöcken in Retail-Dichte wechselt. Der visuelle Ton bleibt zurückhaltend: weite neutrale Flächen, leises Chrome und Produktbilder, die nahezu das gesamte Ausdrucksgewicht tragen. Das Interface ist so konstruiert, dass es verschwindet, damit Hardware, Materialien und Oberflächen-Optionen zum erzählerischen Vordergrund werden.

Über die fünf analysierten Seiten hinweg ist der Rhythmus konsistent, aber nicht monolithisch. Marketing-Flächen (Startseite und Environment) nutzen filmische Schwarz-und-Licht-Kapitelung, während Commerce-Flächen (Store- und Shop-Flows) engere Abstände, mehr Utility-Steuerelemente und dichtere Card-Stapel einführen, ohne die grundlegende Markengrammatik zu durchbrechen. Das Ergebnis ist ein System mit zwei Gängen: Showcase-Modus und Transaktions-Modus.

Typografie ist der Stabilisator. SF Pro Display trägt die Hierarchie von Hero und Merchandising mit kompakten Zeilenhöhen und kontrolliertem Tracking, während SF Pro Text Produkt-Metadaten, Navigation, Filter und dichte Auswahl-UI übernimmt. Die Typografie bleibt dezent, doch der Skalenbereich ist breit genug, um sowohl plakative Hero-Botschaften als auch Mikro-Utility-Labels zu unterstützen.

Key Characteristics:

• Binärer Abschnittsrhythmus: tiefschwarze Szenen (#000000) im Wechsel mit blassen neutralen Feldern (#f5f5f7)
• Eine einzige blaue Akzentfamilie für Action- und Link-Semantik (#0071e3, #0066cc, #2997ff)
• Zwei Betriebsmodi in einem System: filmische Showcase-Module und dichte Commerce-Konfiguratoren
• Starke Abhängigkeit von Bildsprache und Materialoberflächen; das UI-Chrome bleibt visuell dünn
• Enge Headline-Maße (SF Pro Display, Semibold) gepaart mit kompakter Body-/Link-Typografie (SF Pro Text)
• Pillen- und Kapsel-Geometrie als prägende Action-Sprache (18px bis 980px und kreisförmige Steuerelemente)
• Tiefe sparsam eingesetzt; Kontrast und Flächentrennung übernehmen den Großteil der Schichtungsarbeit
• Mehrseitiger Farbblock-Rhythmus: schwarze Hero-Kapitel -> blasse neutrale Merchandising-Felder -> Utility-weiße Retail-Flächen -> dunkle Mikro-Flächen für Steuerelemente

2. Farbpalette & Rollen

Source Pages: https://www.apple.com/, https://www.apple.com/environment/, https://www.apple.com/store, https://www.apple.com/shop/buy-iphone/iphone-17-pro, https://www.apple.com/shop/accessories/all

Primär

• Absolutes Schwarz (#000000): Immersive Hero-Flächen, hochdramatische Produktkapitel, tiefe UI-Anker.
• Blasses Apple-Grau (#f5f5f7): Hauptsächliche helle Fläche für Feature-Bänder, Vergleichsblöcke und redaktionelle Übergänge.
• Fast-Schwarze Tinte (#1d1d1f): Primäre Textfarbe und Dark-Fill-Steuerfarbe auf hellen Flächen.

Sekundär & Akzent

• Apple Action-Blau (#0071e3): Primäre Action-Füllung und fokus-signalisierender Marken-Akzent.
• Body-Link-Blau (#0066cc): Inline-Linkfarbe, optimiert für die Lesbarkeit langer Texte.
• Hochleuchtdichtes Link-Blau (#2997ff): Helle Link-Behandlung auf dunkleren Szenen, wo stärkerer Kontrast erforderlich ist.

Oberfläche & Hintergrund

• Reinweiße Fläche (#ffffff): Retail-/Produktlisten-Hintergründe und dichte transaktionale Abschnitte.
• Graphit-Oberfläche A (#272729): Kontextschicht für dunkle Cards und Mediensteuerungen.
• Graphit-Oberfläche B (#262629): Etwas tiefere dunkle Utility-Schicht für Steuerelement-Gruppierungen.
• Graphit-Oberfläche C (#28282b): Erhöhte dunkle Hilfsflächen.
• Graphit-Oberfläche D (#2a2a2c): Dunkelste erhöhte Stufe, eingesetzt zur Trennung in reicheren dunklen Szenen.

Neutrale & Text

• Sekundäres Neutralgrau (#6e6e73): Sekundärer Fließtext, erläuternde Beschreibungen, tertiäre Metadaten.
• Sanftes Rahmengrau (#d2d2d7): Trennlinien, dezente Umrisse und gedämpfte Utility-Eingrenzung.
• Mittleres Rahmengrau (#86868b): Stärkere Feldumrisse in Produktkonfigurations- und Filter-Kontexten.
• Utility-Dunkelgrau (#424245): Dunkel-neutraler Text-/Flächen-Übergang in Store-Kontexten.

Semantisch & Akzent

• Auswahl-/Fokus-Signal (#0071e3): Geteiltes Fokus- und Auswahlzustand-Signal über Marketing- und Commerce-Kontexte hinweg.
• Fehler/Warnung/Erfolg: In der extrahierten Flächenmenge war keine eigenständige semantische Palette durchgängig sichtbar.

Gradienten-System

• Die extrahierten Seiten sind überwiegend von Vollfarb-Flächen geprägt. Visueller Reichtum entsteht durch Fotografie und Oberflächen-Rendering statt durch dauerhafte UI-Gradienten.

3. Typografie-Regeln

Schriftfamilie

• Display-Familie: SF Pro Display, Fallbacks SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
• Text-Familie: SF Pro Text, Fallbacks SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
• Aufteilung der Verwendung: Die Display-Familie übernimmt Hero-/Produkt-Headlines und Merchandising-Überschriften; die Text-Familie übernimmt Navigation, Steuerelemente, Labels und dichten Commerce-Text.

Hierarchie

Prinzipien

• Kontinuität über Seitentypen hinweg: Dieselbe typografische DNA spannt sich über filmische Launches und Produktkauf-Flows und verhindert so eine Markenspaltung zwischen Marketing und Commerce.
• Kompression im großen Maßstab: Display-Stufen nutzen engen Zeilenabstand und kontrolliertes Tracking, um maschinell und produktorientiert zu wirken.
• Lesbare Dichte in Retail-Tiefe: SF Pro Text balanciert Kompaktheit mit ausreichend vertikalem Rhythmus für lange Produktlisten und Optionsmatrizen.
• Abgestimmte Gewichtsleiter: 600 ist das dominante Hervorhebungsgewicht; 700 erscheint selektiv; 300 wird sparsam für Kontrast in größeren Zeilen eingesetzt.

Hinweis zu Schrift-Ersatz

• Nächstliegende frei verfügbare Ersatzschriften: Inter für textlastige Umsetzung und SF Pro Display-like Maße, angenähert mit Inter Tight für Überschriften.
• Bei Ersatz die Zeilenhöhe leicht erhöhen (+0.02 bis +0.06) bei Body-Größen und die Intensität des negativen Trackings reduzieren, um die Lesbarkeit zu erhalten.

4. Komponenten-Stylings

Buttons

• Primäre Füll-Action: #0071e3 Hintergrund, #ffffff Text, 8px Radius, kompaktes horizontales Padding (üblicherweise 8px 15px). Verwendet für entscheidende Kauf-/Fortschritts-Aktionen.
• Dunkle Füll-Action: #1d1d1f Hintergrund, #ffffff Text, 8px Radius. Verwendet, wenn helle Flächen ein zurückhaltendes, kontraststarkes Primärelement benötigen.
• Pillen-/Kapsel-Action-Familie: große Kapsel-Aktionen mit 18px-56px Radien und extreme Pillen-Links mit 980px. Etabliert Apples weiche, aber präzise Call-to-Action-Silhouette.
• Utility-Filter-/Button-Hüllen: helle Hüllen (#fafafc oder durchscheinendes Weiß) mit dezenten grauen Rändern (#d2d2d7 / #86868b) für dichte Konfigurationskontexte.
• Pressed-Verhalten: aktive Steuerelemente verringern üblicherweise die Skalierung oder verschieben die Füllung leicht, um die physische Druckbestätigung anzuzeigen.

Cards & Container

• Redaktionelle/Produkt-Cards: helle Cards auf #f5f5f7 oder weißen Feldern mit minimaler Rahmung und bildorientierter Komposition.
• Dunkle Utility-Cards: Graphit-Stufen (#272729 bis #2a2a2c), verwendet für Overlays, Mediensteuerungen und Dark-Context-Module.
• Konfigurator-Panels: abgerundete Container (oft 12px-18px) mit klarer, aber zurückhaltender Randdefinition.
• Carousel-/Spotlight-Module: größere abgerundete Hüllen (28px-36px) für hervorgehobene Inhaltsbahnen.

Eingaben & Formulare

• Retail-Eingabefelder: durchscheinende oder weiße Hintergründe, dunkler Text (#1d1d1f), rahmenbasierte Eingrenzung (#86868b).
• Auswahl-Steuerelemente: kreisförmige/toggle-artige Steuergeometrie tritt in Produktauswahl-Interfaces häufig auf.
• Dichte-Strategie: Formularfelder bleiben visuell ruhig, damit Gerätebilder und Preishierarchie dominant bleiben.

Navigation

• Globale Marketing-Nav: kompakte dunkle, durchscheinende Leiste mit Links in kleiner Schrift und zurückhaltender Ikonografie.
• Store-/Sub-Shop-Nav-Schichten: zusätzliche Utility-Leisten, Chips und segmentierte Steuerelemente zur Eingrenzung von Kategorie und Produkt.
• Link-Hierarchie: Link-Blautöne bleiben das primäre interaktive Signal, während neutraler Text dichte Navigationssets unterstützt.

Bildbehandlung

• Objekt-zuerst-Fotografie: Hardware und Zubehör werden auf kontrollierten Vollfarb-Flächen in den Vordergrund gerückt.
• Hochauflösendes Oberflächen-Rendering: reflektierende/materialbezogene Details sind zentral für die visuelle Überzeugungskraft.
• Gemischte Rahmung: randlose Hero-Szenen koexistieren mit abgerundeten Retail-Cards und eng beschnittenen Merchandising-Thumbnails.

Weitere markante Komponenten

• Produktkonfigurator-Matrix: Optionsstapel und Selektoren, die Chips, Radio-artige Steuerelemente und kontextbezogene Preis-/Zusammenfassungs-Blöcke kombinieren.
• Carousel-Steuerpunkte/-Pfeile: kreisförmige Steuervokabular in gedämpften Overlays zur Galerie-Progression.
• Environment-Story-Panels: narrative Kapitel, die redaktionelle Typografie mit filmischen Produkt-/Umwelt-Visuals verbinden.

5. Layout-Prinzipien

Abstandssystem

• Die Basiseinheit ist effektiv 8px, doch das System unterstützt dichte Mikro-Stufen für präzise Ausrichtung.
• Häufig wiederverwendete Abstandswerte über die Seiten hinweg: 2, 4, 6, 7, 8, 9, 10, 12, 14, 17, 20 px.
• Über Marketing- und Retail-Flows hinweg sichtbare universelle Rhythmus-Konstanten: 8px-Einheit als Gerüst mit 14-20px-Utility-Intervallen für Komponenten-Padding und Listenabstand.

Grid & Container

• Showcase-Seiten: große zentrale Spalten mit breitem horizontalem Atemraum und vollbreiten Farbkapiteln.
• Commerce-Seiten: engere mehrspaltige Produkt- und Steuer-Grids mit häufigem modularem Stapeln.
• Container-Verhalten: eingeschränkter, lesbarer Kern mit großzügigen Außenrändern bei Desktop-Breiten.

Whitespace-Philosophie

• Szenen-Taktung: große visuelle Kapitel nutzen breiten oberen/unteren Atemraum.
• Informationsverdichtung wo nötig: Retail-Seiten komprimieren Abstände bewusst, um pro Viewport mehr handlungsrelevante Informationen freizulegen.
• Kontrastgeführte Trennung: Abschnittsübergänge stützen sich mehr auf Flächenwechsel als auf dekorative Trenner.

Border-Radius-Skala

• 5px: winzige Utility-Links/-Tags und kleinere Mini-Hüllen.
• 8px-12px: Standard-Steuerelemente und kompakte Felder.
• 16px-18px: Cards, Modulrahmen und Commerce-Panels.
• 28px-36px: größere Modul- und Spotlight-Container.
• 56px / 100px / 980px: Kapseln, große Pillen und prägende langgestreckte CTA-Formen.
• 50%: kreisförmige Medien- und Auswahl-Steuerelemente.

6. Tiefe & Elevation

Tiefe ist bewusst zurückhaltend. Apple bevorzugt Tonalkontrast, Flächen-Staffelung und kompositorische Hierarchie gegenüber schweren Schattenstapeln.

Dekorative Tiefe

• Dekorative Tiefe entsteht primär durch fotografischen Realismus und Material-Rendering, nicht durch synthetische UI-Effekte.
• Durchscheinende Overlays und glasartige Utility-Leisten sorgen für eine milde atmosphärische Schichtung in Navigation und Steuerelementen.

7. Do’s und Don’ts

Do

• Nutze die neutrale Triade (#000000, #f5f5f7, #ffffff) als strukturelles Fundament.
• Reserviere blaue Akzente für echte Action- und Navigations-Semantik.
• Halte die Typografie eng und bewusst, besonders bei Display-Skalen.
• Erhalte die Kapsel-/Kreis-Geometriesprache für Steuerelemente und Schlüssel-Aktionen.
• Lass Produktbilder die visuelle Dramatik tragen; halte das Chrome dezent.
• Setze in dichten Retail-Kontexten rahmenbasierte Eingrenzung statt schwerer Card-Ornamentik ein.
• Bewahre eine klare Trennung zwischen Showcase-Modulen und transaktionalen Modulen, während Kern-Tokens geteilt bleiben.

Don’t

• Führe keine breiten sekundären Akzentpaletten ein, die mit dem Apple-Blau konkurrieren.
• Überstrapaziere keine Schatten, Glow-Effekte oder dekorative Gradienten im Kern-UI-Chrome.
• Mische keine unverwandten Schriftfamilien und lockere das Tracking nicht wahllos.
• Vereinheitliche nicht alle Ecken auf einen einzigen Radius; Apple nutzt zielgerichtete Radius-Stufen.
• Überlade Commerce-Module nicht mit dicken Rändern oder lauten visuellen Effekten.
• Entferne nicht die neutrale Kontrast-Kadenz zwischen dunklen und hellen Kapiteln.
• Behandle Marketing- und Kauf-Flows nicht als getrennte Design-Systeme.

8. Responsives Verhalten

Breakpoints

Touch-Targets

• Primäre und sekundäre Aktionen werden generell in tippfreundlichen Pillen-/Button-Geometrien präsentiert.
• Kreisförmige Medien- und Auswahl-Steuerelemente richten sich in mobilen Kontexten an einer minimalen Tippbarkeit aus.
• Dichte Commerce-UI nutzt kompakte Labels, erhält aber klare Trefferregionen durch umgebendes Form-Padding.

Collapsing-Strategie

• Marketing-Hero-Typografie skaliert in diskreten Stufen herunter und bewahrt dabei den Hierarchie-Kontrast.
• Produkt- und Commerce-Grids brechen von mehrspaltig zu gestapelten Cards um, mit durchgehend sichtbaren Selektoren.
• Utility-Navigation komprimiert sich in einfachere Link-/Steuer-Gruppierungen und bewahrt dabei Schlüssel-Aktionen.
• Optionen-/Konfigurationscluster werden vertikal sequenziert, um den Kauf-Flow auf kleinen Bildschirmen linear zu halten.

Bildverhalten

• Produktbilder bewahren Seitenverhältnis und Zentralität über die Breakpoints hinweg.
• Hero-Visuals bleiben auf Mobilgeräten dominant, wobei Text um die Medienpriorität herum neu positioniert wird.
• Retail-Thumbnails bleiben durch engere Beschnitt-Logik und dichteres Card-Stapeln lesbar.
• Bildgeführte Module verankern weiterhin den Rhythmus, während die Layout-Dichte zunimmt.

9. Agent-Prompt-Leitfaden

Schnelle Farbreferenz

• Primäres Action-Blau: Apple Action-Blau (#0071e3)
• Inline-Link-Blau: Body-Link-Blau (#0066cc)
• Dunkle Kapitel-Fläche: Absolutes Schwarz (#000000)
• Helle Kapitel-Fläche: Blasses Apple-Grau (#f5f5f7)
• Primärer Text auf Hell: Fast-Schwarze Tinte (#1d1d1f)
• Sekundärer Text: Sekundäres Neutralgrau (#6e6e73)
• Retail-Rand sanft: Sanftes Rahmengrau (#d2d2d7)
• Retail-Rand stark: Mittleres Rahmengrau (#86868b)

Beispielhafte Komponenten-Prompts

• „Entwirf einen Apple-Style-Produkt-Hero auf einer schwarzen Fläche (#000000) mit einer SF Pro Display Semibold-Headline (48-56px), prägnantem Begleittext und zwei Kapsel-CTAs mit #0071e3 und #1d1d1f.”
• „Erstelle ein Commerce-Konfigurations-Panel auf Weiß (#ffffff) mit 18px abgerundeten Cards, #86868b Randfeldern, SF Pro Text 17px Fließtext und kompakten Options-Selektoren.”
• „Baue ein Merchandising-Card-Grid, das #f5f5f7 und weiße Flächen abwechselt, mit bildorientierten Cards, zurückhaltenden Schatten und 14-17px SF Pro Text Metadaten.”
• „Generiere einen Carousel-Steuercluster mit kreisförmigen Buttons (50% Radius), gedämpften grauen Overlays und klarem Aktiv-Feedback für die Galerie-Navigation.”
• „Komponiere einen gemischten Marketing- + Retail-Seitenrhythmus: dunkles Showcase-Kapitel -> helles Feature-Kapitel -> dichtes Produktlisten-Modul, wobei blaue Akzente nur für Aktionen und Links genutzt werden.”

Iterations-Leitfaden

1. Lege zuerst das neutrale Fundament fest (#000000, #f5f5f7, #ffffff), bevor du Akzente abstimmst.
2. Halte blaue Akzente knapp und zielgerichtet; wenn alles blau ist, kollabiert die Hierarchie.
3. Stimme die Typografie in dieser Reihenfolge ab: Display-Skala, Body-Lesbarkeit, dann Mikro-Labels.
4. Passe den Radius je Komponentenklasse an (Feld, Card, Kapsel, Kreis), statt eine einheitliche Rundung für alles zu verwenden.
5. Erhöhe die Dichte schrittweise beim Übergang von Showcase-Abschnitten zu Commerce-Abschnitten.
6. Validiere nach jeder Überarbeitung, dass Produktbilder die stärkste visuelle Schicht bleiben.

Bekannte Lücken

• Eigenständige semantische Statusfarben (Fehler/Warnung/Erfolg) waren in der extrahierten Seitenmenge nicht durchgängig sichtbar.
• Einige Interaktions-Mikrozustände variieren je Modul und sind nicht als universelle System-Tokens repräsentiert.
• Einige Retail-Module weisen kontextspezifische Typografie-Overrides auf, die nicht über alle fünf Seiten hinweg auftreten.