Von Pinterest inspiriertes Designsystem

Category: Medien & Konsumenten Visuelle Entdeckung. Roter Akzent, Masonry-Grid, Bild-zuerst.

1. Visuelles Thema & Atmosphäre

Pinterests Website ist eine warme, inspirationsgetriebene Leinwand, die visuelle Entdeckung wie ein Lifestyle-Magazin behandelt. Das Design basiert auf einem weichen, leicht warmen weißen Hintergrund mit Pinterest-Rot (#e60023) als einzigem, kräftigem Markenakzent. Im Gegensatz zu den kühlen Blautönen der meisten Tech-Plattformen hat Pinterests Neutralskala einen deutlich warmen Unterton — Grautöne neigen eher zu Oliv/Sand (#91918c, #62625b, #e5e5e0) als zu kühlem Stahl, was eine gemütliche, handwerkliche Atmosphäre erzeugt, die zum Stöbern einlädt.

Die Typografie verwendet Pin Sans — eine benutzerdefinierte proprietäre Schrift mit einem breiten Fallback-Stack einschließlich japanischer Schriften, was Pinterests globale Reichweite widerspiegelt. Im Display-Maßstab (70px, Stärke 600) erzeugt Pin Sans große, einladende Überschriften. Bei kleineren Größen ist das System kompakt: Schaltflächen bei 12px, Bildunterschriften bei 12–14px. Das CSS-Variablenbenennungssystem (--comp-*, --sema-*, --base-*) offenbart eine ausgefeilte dreistufige Design-Token-Architektur: Komponenten-, Semantik- und Basistoken.

Was Pinterest auszeichnet, ist sein großzügiges Rahmenradius-System (12px–40px, plus 50% für Kreise) und warme, getönte Schaltflächenhintergründe. Der Sekundärknopf (#e5e5e0) hat einen deutlich warmen, sandähnlichen Ton statt kaltem Grau. Der primäre rote Knopf verwendet 16px Radius — gerundet, aber nicht pillenförmig. Kombiniert mit warmen Badge-Hintergründen (hsla(60,20%,98%,.5) — ein subtiler gelb-warmer Wash) und fotografiedominierten Layouts entsteht ein Design, das handgefertigt und persönlich wirkt, nicht korporativ und steril.

Wesentliche Merkmale:

• Warme weiße Leinwand mit Oliv/Sand-getönten Neutralfarben — gemütlich, nicht klinisch
• Pinterest-Rot (#e60023) als einziger kräftiger Akzent — niemals subtil, immer selbstbewusst
• Pin-Sans-Schrift mit globalem Fallback-Stack (einschließlich CJK)
• Dreistufige Token-Architektur: --comp-* / --sema-* / --base-*
• Warme Sekundäroberflächen: Sandgrau (#e5e5e0), warmes Badge (hsla(60,20%,98%,.5))
• Großzügiger Rahmenradius: 16px Standard, bis zu 40px für große Container
• Fotografie-zuerst-Inhalt — Pins/Bilder sind das primäre visuelle Element
• Dunkler Nah-Lila-Text (#211922) — warm, mit einem Hauch von Pflaume

2. Farbpalette & Rollen

Primäre Marke

• Pinterest-Rot (#e60023): Primäres CTA, Markenakzent — kräftiges, selbstbewusstes Rot
• Grün 700 (#103c25): --base-color-green-700, Erfolgs-/Naturakzent
• Grün 700 Hover (#0b2819): --base-color-hover-green-700, gedrücktes Grün

Text

• Pflaumenschwarz (#211922): Primärtext — warmes Nahschwarz mit Pflaumenunterton
• Schwarz (#000000): Sekundärtext, Schaltflächentext
• Olivgrau (#62625b): Sekundärbeschreibungen, gedämpfter Text
• Warmsilber (#91918c): --comp-button-color-text-transparent-disabled, deaktivierter Text, Eingaberahmen
• Weiß (#ffffff): Text auf dunklen/farbigen Oberflächen

Interaktiv

• Fokusblau (#435ee5): --comp-button-color-border-focus-outer-transparent, Fokusringe
• Leistungslila (#6845ab): --sema-color-hover-icon-performance-plus, Leistungsmerkmale
• Empfehlungslila (#7e238b): --sema-color-hover-text-recommendation, KI-Empfehlung
• Linkblau (#2b48d4): Linktextfarbe
• Facebook-Blau (#0866ff): --facebook-background-color, Soziales Login
• Gedrücktes Blau (#617bff): --base-color-pressed-blue-200, gedrückter Zustand

Oberfläche & Rahmen

• Sandgrau (#e5e5e0): Sekundärer Schaltflächenhintergrund — warm, handwerklich
• Warmes Licht (#e0e0d9): Kreisschaltflächenhintergründe, Badges
• Warmer Wash (hsla(60, 20%, 98%, 0.5)): --comp-badge-color-background-wash-light, subtiler warmer Badge-Hintergrund
• Nebel (#f6f6f3): Helle Oberfläche (50% Deckkraft)
• Rahmen deaktiviert (#c8c8c1): --sema-color-border-disabled, deaktivierte Rahmen
• Hover-Grau (#bcbcb3): --base-color-hover-grayscale-150, Hover-Rahmen
• Dunkle Oberfläche (#33332e): Hintergründe dunkler Abschnitte

Semantisch

• Fehlerrot (#9e0a0a): Kontrollkästchen/Formularfehlerzustände

3. Typografieregeln

Schriftfamilie

• Primär: Pin Sans, Fallbacks: -apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial

Hierarchie

Grundsätze

• Kompakter Typmaßstab: Der Bereich ist 12px–70px mit einem dramatischen Sprung — der meiste Funktionstext liegt bei 12–16px und schafft eine dichte, app-ähnliche Informationshierarchie.
• Warme Gewichtsverteilung: 600–700 für Überschriften, 400–500 für Fließtext. Keine ultraleichten Gewichte — die Schrift fühlt sich immer substanziell an.
• Negativer Tracking bei Überschriften: -1,2px bei 28px-Überschriften erzeugt gemütliche, intime Abschnittstitel.
• Einzelne Schriftfamilie: Pin Sans übernimmt alles — keine Sekundär-Display- oder Monospace-Schrift erkannt.

4. Komponentenstile

Schaltflächen

Primäres Rot

• Hintergrund: #e60023 (Pinterest-Rot)
• Text: #000000 (Schwarz — ungewöhnliche Wahl für den Kontrast auf Rot)
• Innenabstand: 6px 14px
• Radius: 16px (großzügig gerundet, nicht pillenförmig)
• Rahmen: 2px solid rgba(255, 255, 255, 0) (transparent)
• Fokus: semantischer Rahmen + Umriss über CSS-Variablen

Sekundäres Sand

• Hintergrund: #e5e5e0 (warmes Sandgrau)
• Text: #000000
• Innenabstand: 6px 14px
• Radius: 16px
• Fokus: dasselbe semantische Rahmensystem

Kreisförmige Aktion

• Hintergrund: #e0e0d9 (warmes Licht)
• Text: #211922 (Pflaumenschwarz)
• Radius: 50% (Kreis)
• Verwendung: Pin-Aktionen, Navigationssteuerelemente

Ghost / Transparent

• Hintergrund: transparent
• Text: #000000
• Kein Rahmen
• Verwendung: Tertiäre Aktionen

Karten & Container

• Fotografiezuerst-Pin-Karten mit großzügigem Radius (12px–20px)
• Kein traditioneller Box-Schatten auf den meisten Karten
• Weiße oder warme Nebelfarbe als Hintergrund
• 8px weißer dicker Rahmen auf einigen Bild-Containern

Eingabefelder

• E-Mail-Eingabe: weißer Hintergrund, 1px solid #91918c Rahmen, 16px Radius, 11px 15px Innenabstand
• Fokus: semantisches Rahmen- + Umrisssystem über CSS-Variablen

Navigation

• Sauberer Header auf weißem oder warmem Hintergrund
• Pinterest-Logo + Suchleiste zentriert
• Pin Sans 16px für Navigationslinks
• Pinterest-Rot als Akzent für aktive Zustände

Bildbehandlung

• Pin-artiges Masonry-Grid (charakteristisches Pinterest-Layout)
• Abgerundete Ecken: 12px–20px auf Bildern
• Fotografie als primärer Inhalt — jeder Pin ist ein Bild
• Dicke weiße Rahmen (8px) auf hervorgehobenen Bild-Containern

5. Layoutgrundsätze

Abstandssystem

• Basiseinheit: 8px
• Skala: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px
• Große Sprünge: 32px → 80px → 100px für Abschnittsabstände

Raster & Container

• Masonry-Grid für Pin-Inhalte (charakteristisches Layout)
• Zentrierte Inhaltsabschnitte mit großzügiger Maximalbreite
• Vollbreiter dunkler Footer
• Suchleiste als primäres Navigationselement

Weißraum-Philosophie

• Inspirationsdichte: Das Masonry-Grid packt Pins eng — die Inhaltsdichte IST das Wertversprechen. Weißraum existiert zwischen Abschnitten, nicht innerhalb des Grids.
• Oben atmen, unten dicht: Hero-/Feature-Abschnitte erhalten großzügige Abstände; das Pin-Grid ist kompakt und immersiv.

Rahmenradiusskala

• Standard (12px): Kleine Karten, Links
• Schaltfläche (16px): Schaltflächen, Eingaben, mittlere Karten
• Komfortabel (20px): Feature-Karten
• Groß (28px): Große Container
• Abschnitt (32px): Tab-Elemente, große Panels
• Hero (40px): Hero-Container, große Feature-Blöcke
• Kreis (50%): Aktionsschaltflächen, Tab-Indikatoren

6. Tiefe & Elevation

Schattenphilosophie: Pinterest verwendet minimale Schatten. Das Masonry-Grid setzt auf Inhalt (Fotografie), um visuelles Interesse zu erzeugen, statt auf Elevationseffekte. Tiefe entsteht durch die Wärme der Oberflächenfarben und die großzügige Rundung der Container.

7. Gebote und Verbote

Gebot

• Warme Neutralfarben verwenden (#e5e5e0, #e0e0d9, #91918c) — der warme Oliv/Sand-Ton ist die Identität
• Pinterest-Rot (#e60023) nur für primäre CTAs verwenden — es ist kräftig und einzigartig
• Pin Sans ausschließlich verwenden — eine Schrift für alles
• Großzügigen Rahmenradius anwenden: 16px für Schaltflächen/Eingaben, 20px+ für Karten
• Das Masonry-Grid dicht halten — Inhaltsdichte ist der Wert
• Warme Badge-Hintergründe (hsla(60,20%,98%,.5)) für subtile warme Washes verwenden
• #211922 (Pflaumenschwarz) für Primärtext verwenden — wärmer als reines Schwarz

Verbot

• Keine kühlen Grauneutralen verwenden — immer warm/olivfarben
• Kein reines Schwarz (#000000) als Primärtext — Pflaumenschwarz (#211922) verwenden
• Keine pillenförmigen Schaltflächen — 16px Radius ist gerundet, aber nicht pillenförmig
• Keine schweren Schatten hinzufügen — Pinterest ist flach by Design, Tiefe kommt aus dem Inhalt
• Keinen kleinen Rahmenradius (<12px) auf Karten — die großzügige Rundung ist essenziell
• Keine zusätzlichen Markenfarben einführen — Rot + warme Neutralfarben ist die vollständige Palette
• Keine dünnen Schriftstärken verwenden — Pin Sans mindestens 400

8. Responsives Verhalten

Haltepunkte

Reduktionsstrategie

• Pin-Grid: 5+ Spalten → 3 → 2 → 1
• Navigation: Suchleiste + Icons → vereinfachte mobile Navigation
• Feature-Abschnitte: nebeneinander → gestapelt
• Hero: 70px → skaliert proportional herunter
• Footer: dunkle Mehrspalten → gestapelt

9. Agent-Prompt-Leitfaden

Schnelle Farbreferenz

• Marke: Pinterest-Rot (#e60023)
• Hintergrund: Weiß (#ffffff)
• Text: Pflaumenschwarz (#211922)
• Sekundärtext: Olivgrau (#62625b)
• Schaltflächenoberfläche: Sandgrau (#e5e5e0)
• Rahmen: Warmsilber (#91918c)
• Fokus: Fokusblau (#435ee5)

Beispiel-Komponentenprompts

• „Hero erstellen: weißer Hintergrund. Überschrift bei 70px Pin Sans Stärke 600, Pflaumenschwarz (#211922). Roter CTA-Knopf (#e60023, 16px Radius, 6px 14px Innenabstand). Sekundärer Sandknopf (#e5e5e0, 16px Radius).”
• „Pin-Karte gestalten: weißer Hintergrund, 16px Radius, kein Schatten. Fotografie füllt oben, 16px Pin Sans Stärke 400 Beschreibung unten in #62625b.”
• „Kreisförmige Aktionsschaltfläche erstellen: #e0e0d9 Hintergrund, 50% Radius, #211922 Symbol.”
• „Eingabefeld erstellen: weißer Hintergrund, 1px solid #91918c, 16px Radius, 11px 15px Innenabstand. Fokus: blauer Umriss über semantische Tokens.”
• „Dunklen Footer gestalten: #33332e Hintergrund. Pinterest-Schriftlogo in Weiß. 12px Pin-Sans-Links in #91918c.”

Iterationsleitfaden

1. Warme Neutralfarben überall — Oliv/Sandgrau, niemals kühler Stahl
2. Pinterest-Rot nur für CTAs — kräftig und einzigartig
3. 16px Radius auf Schaltflächen/Eingaben, 20px+ auf Karten — großzügig, aber nicht pillenförmig
4. Pin Sans ist die einzige Schrift — kompakt bei 12px für die Benutzeroberfläche, 70px für Display
5. Fotografie trägt das Design — die Benutzeroberfläche bleibt warm und minimal
6. Pflaumenschwarz (#211922) für Text — wärmer als reines Schwarz