Design System

Template

Diese Seite speichert das neue Brand Design von Giona Sophia: Farben, Typografie und wiederverwendbare Bausteine für zukünftige Seiten. Sie ist nicht für Besucher gedacht, sondern als lebendes Nachschlagewerk für uns beide.

📋 Analysiert als Strukturvorbild: darmreset.kathrinfranke.de. Übernommene Baustein-Ideen von dort: Problem-Checkliste, Vorher/Nachher- bzw. Ist/Ist-nicht-Vergleich, 3-Phasen-Timeline, Badges/Sticker für Produkte, filterbare Testimonial-Galerie, mehrere Einstiegspfade, FAQ-Akkordeon. Farben, Texte und Bilder sind komplett eigenständig für Giona Sophia.

Farben

Das sind deine bestätigten Marken-Farben: Bordeaux als Hauptakzent, Salbeigrün als Zweitfarbe, dazu die beiden Beige-Töne als Hintergründe.

Hintergrund
--brand-bg · #FAF6F0
Hintergrund Alt
--brand-bg-alt · #F1EAE0
Akzent – Bordeaux
--brand-accent · #4A1328
Akzent – Salbei
--brand-accent-2 · #9FBB93
Text
--brand-text · #000000
Rahmen/Border
--brand-border · #E5DFD3

Typografie

Überschriften (H1/H2) in Playfair Display, Fließtext in Arial – für alle neuen Seiten.

H1 – Playfair Display 800

H2 – Playfair Display 700

Fließtext in Arial: Dies ist ein Beispieltext, wie normaler Absatztext auf zukünftigen Seiten aussehen wird – gut lesbar, schwarz, ruhig gesetzt.

Buttons

Primär, Sekundär und Outline – für Call-to-Actions in unterschiedlicher Gewichtung.

Karten (Cards)

Baustein für Feature-/Vorteils-Abschnitte, z.B. „Was bringt dir das".

🌿

Karten-Titel

Kurzer Beschreibungstext, der den Nutzen oder Punkt der Karte erklärt.

Karten-Titel

Kurzer Beschreibungstext, der den Nutzen oder Punkt der Karte erklärt.

💛

Karten-Titel

Kurzer Beschreibungstext, der den Nutzen oder Punkt der Karte erklärt.

Badges / Sticker

Für Produkt-Sticker, „Empfohlen"-Markierungen oder kleine Hervorhebungen.

Empfohlen Neu Bestseller

Vergleichstabelle (Ist / Ist nicht)

Baustein von der Referenzseite übernommen – gut für Abgrenzung oder Vorher/Nachher.

Das ist es nicht

  • Beispielpunkt eins
  • Beispielpunkt zwei
  • Beispielpunkt drei

Das ist es

  • Beispielpunkt eins
  • Beispielpunkt zwei
  • Beispielpunkt drei

3-Phasen-Timeline

Für Programm-/Prozessabläufe, z.B. eine Masterclass oder ein Reset-Programm.

01

Phase eins

Kurze Beschreibung, was in dieser Phase passiert.

02

Phase zwei

Kurze Beschreibung, was in dieser Phase passiert.

03

Phase drei

Kurze Beschreibung, was in dieser Phase passiert.

FAQ-Akkordeon

Klickbares Akkordeon für Häufige Fragen – wie schon auf der RETURN-Seite umgesetzt.

Beispiel-Frage eins?

Beispiel-Antwort, die beim Klick auf die Frage sichtbar wird.

Beispiel-Frage zwei?

Beispiel-Antwort, die beim Klick auf die Frage sichtbar wird.

Testimonial-Karten

Für Kundenstimmen/Screenshots – horizontal scrollbar mit Kategorie-Tag.

Kategorie

„Beispiel-Testimonial-Text, wie eine Kundenstimme hier aussehen könnte."

Kategorie

„Beispiel-Testimonial-Text, wie eine Kundenstimme hier aussehen könnte."

Kategorie

„Beispiel-Testimonial-Text, wie eine Kundenstimme hier aussehen könnte."

Built with Oxygen
Consent Management Platform von Real Cookie Banner