Intern · Designsystem

Styleguide

Alle Marken-Bausteine an einem Ort. Quelle der Wahrheit ist src/styles/global.css – diese Seite ist die lebende, visuelle Referenz.

Beispiel des Hero-Foto-Patterns: schwebende Karte mit Schatten

Farben

Farb-Tokens

Hintergrund--c-bg#faf8f3

Fläche--c-surface#ffffff

Fläche 2--c-surface-2#f3efe6

Tinte--c-ink#1c2420

Tinte weich--c-ink-soft#45504a

Marke (Naturgrün)--c-brand#15604d

Marke 700--c-brand-700#114e3f

Marke 50--c-brand-50#e7f2ee

CTA (Orange)--c-accent#bb5414

petWALK-Grün--c-petwalk-dark#5f7d27

Typografie

Schrift & Skala

Headlines: Serife „Fraunces" (lokal gehostet). Fließtext: System-Sans.

H1 — Die Klappe, die passt

H2 — Worauf es ankommt

H3 — Material & Einbau

Lede-Absatz: etwas größer und weicher, für Intros unter der Überschrift.

Body-Text in System-Sans, Zeilenhöhe 1.65. Verlässlich sind nur Zentimeter, nicht S/M/L.

Ein Textlink in Markengrün.

Buttons

Schaltflächen

Größe berechnen petWALK ansehen Alle Modelle Weiterlesen

Orange = Haupt-CTA/Affiliate · petWALK-Grün = Premium-Partner · Ghost = sekundär.

Eyebrow & Badges

Labels

Sektions-Eyebrow Hero-Pille

Brand Accent Muted

Flächen & Hinweise

Karten & Callouts

Karte

Weiße Fläche, feiner Rahmen, --radius-lg, weicher Schatten.

Hinweis: grüner Akzent links – für Tipps & Einordnung.

Ehrlicher Warnhinweis: sandfarben – z. B. „eigentlich eine Katzenklappe".

Hero

Hero-Pattern

Drei Klassen, immer zusammen: .hero-stage (Band) → .container.hero-grid (Layout) → .hero-photo (Foto-Karte). Auf allen Seiten identisch – siehe oben.