Rigon Styleguide

Living Design-Patterns — rendert die echte styles.css + tokens.css

1. Farben & Tokens

Warum Design Tokens? Alle Farbwerte kommen aus einer einzigen Quelle (brand/tokens.json). Aenderungen an einem Ort wirken automatisch auf alle Seiten. Die CSS Custom Properties werden hier live gerendert — was du siehst, ist was die Seite nutzt.

Quelle: brand/tokens.json → tokens.css. Alle Werte werden live aus CSS Custom Properties gerendert.

Primary
--site-color-primary
Primary Dark
--site-color-primary-dark
Secondary
--site-color-secondary
Text
--site-color-text
Background
--site-color-background
Surface
--site-color-surface
Border
--site-color-border
Footer BG
--site-color-footer-bg

2. Spacing

Warum ein Spacing-System? Konsistente Abstaende schaffen visuellen Rhythmus. Fuenf Stufen (xs bis xl) decken alle Anwendungsfaelle ab — vom Innenabstand einer Karte bis zum Sektions-Padding. Immer Token nutzen, nie Pixelwerte hart codieren.
xs
--site-spacing-xs
sm
--site-spacing-sm
md
--site-spacing-md
lg
--site-spacing-lg
xl
--site-spacing-xl

3. Typografie

Warum clamp()? Responsive Schriftgroessen ohne Media-Query-Brueche. Jede Stufe skaliert fliessend zwischen Mobile und Desktop. Das vermeidet harte Spruenge und spart Breakpoint-Logik in der CSS.

Alle Groessen responsive via clamp(). Hier gerendert in der aktuellen Viewport-Breite.

h1 --site-size-h1

Hauptueberschrift H1

h2 --site-size-h2

Sektionsueberschrift H2

h3 --site-size-h3

Unterueberschrift H3

Body Text --site-size-body

Fliesstext in der Standard-Groesse. So sieht ein normaler Absatz auf der Seite aus. Zeilenhoehe 1.6 fuer optimale Lesbarkeit.

Small Text --site-size-small

Kleinerer Text fuer Meta-Informationen, Bildunterschriften, Hinweise.

4. Layouts

Warum Section + Container? .site-section steuert den Hintergrund (volle Breite), .site-container begrenzt den Inhalt (max-width). Diese Trennung erlaubt farbige Sektionen ohne dass der Text an den Rand laeuft. Hero, Spalten und alle Content-Sektionen bauen darauf auf.

Section + Container

.site-section + .site-container Standard-Sektionsrahmen

Inhalt innerhalb von Section + Container. Max-Width: --site-spacing-container-max.

HTML
<section class="site-section">
  <div class="site-container">
    <!-- Inhalt -->
  </div>
</section>

Spalten

.site-columns + .site-column Gleichbreite Spalten (stacked auf Mobile)

Spalte 1

Gleichbreite Spalte via flex: 1.

Spalte 2

Stacked auf Mobile (<768px).

Spalte 3

Gap: --site-spacing-md.

HTML
<div class="site-columns">
  <div class="site-column">Spalte 1</div>
  <div class="site-column">Spalte 2</div>
  <div class="site-column">Spalte 3</div>
</div>

Hero

.site-hero Zentriert, grosser Padding, Subtitle + CTA

Rigon: Was Sie erwartet

Ihr Angebot in einem Satz. Was bekommt der Besucher, wenn er weiterscrollt?

Jetzt starten
HTML
<section class="site-hero">
  <div class="site-container site-text-center">
    <h1>Headline</h1>
    <p class="site-hero-subtitle">Subtitle</p>
    <a href="/kontakt/" class="site-btn site-btn--primary">CTA</a>
  </div>
</section>

5. Interaktion

Warum zwei Button-Varianten? Primary (gefuellt) fuer die eine Hauptaktion pro Viewport. Secondary (Outline) fuer ergaenzende Aktionen. Nie zwei Primary-Buttons nebeneinander — das verwirrt die Handlungshierarchie.

Buttons

.site-btn--primary Primaere Aktion, gefuellt
Jetzt starten
HTML
<a href="/kontakt/" class="site-btn site-btn--primary">Jetzt starten</a>
.site-btn--secondary Sekundaere Aktion, Outline
Mehr erfahren
HTML
<a href="/leistungen/" class="site-btn site-btn--secondary">Mehr erfahren</a>

Links

a (Standard-Link) Primary Color, Hover: Underline

Ein normaler Textlink innerhalb eines Absatzes.

6. Strukturelle Elemente

Warum globale Elemente dokumentieren? Header und Footer sind auf jeder Seite identisch. Aenderungen hier wirken sofort ueberall. Deshalb zeigen wir sie separat — damit klar ist, was global gilt und was sektionsspezifisch variiert.

Header & Navigation

Globale Elemente, auf allen Seiten identisch. Auf der Live-Seite ansehen:

Header (Fixed Navigation) → Startseite
.site-logo Brand-Marker im Header, Source Serif + Bracket-Icon, currentColor
Rigon
HTML
<a href="/" class="site-logo">
  <svg width="18" height="18" viewBox="0 0 32 32" ...>...</svg>Rigon
</a>

Footer

.site-footer Dunkler Hintergrund, Links, Copyright

© 2026 Company

Datenschutz Impressum

7. Komponenten-Bibliothek

Warum fertige Komponenten? Die haeufigsten Inhaltstypen — Trust-Signale, Feature-Karten, Technik-Details, Preise, FAQ und CTA — kommen in fast jedem Projekt vor. Fertige Patterns verhindern, dass jedes Projekt dieselben Layouts von Grund auf baut. Alle Komponenten nutzen Design Tokens und sind responsive.

Trust List

.site-trust-list + .site-trust-item Vertrauenssignale mit farbigem Rand
10+ Jahre Erfahrung Bewaehrte Prozesse statt Experimente.
100% Datenschutz DSGVO-konform. Europaeisch gehostet.
HTML
<div class="site-trust-list">
  <div class="site-trust-item">
    <strong>Headline</strong>
    <span>Beschreibung</span>
  </div>
</div>

Feature Grid

.site-feature-grid + .site-feature-card 3-Spalten-Kartenraster (1 auf Mobile)

Feature A

Kurze Beschreibung des Features. Nutzt Token-basierte Farben und Abstaende.

Feature B

Kurze Beschreibung. Card-Border und Surface-Background fuer subtile Tiefe.

Feature C

Kurze Beschreibung. Responsive: stacked auf Mobile via Grid-Fallback.

HTML
<div class="site-feature-grid">
  <div class="site-feature-card">
    <h3>Titel</h3>
    <p>Beschreibung</p>
  </div>
  <!-- weitere Karten -->
</div>

Tech List

.site-tech-list + .site-tech-item Technische Details als dt/dd
Verschluesselung
Ende-zu-Ende mit AES-256. Schluessel nur auf den Endgeraeten.
Hosting
Europaeische Rechenzentren. ISO 27001 zertifiziert.
HTML
<dl class="site-tech-list">
  <div class="site-tech-item">
    <dt>Titel</dt>
    <dd>Beschreibung</dd>
  </div>
</dl>

Price Card

.site-price-card Preiskarte mit Features-Liste
€49 / Monat
  • Feature 1
  • Feature 2
  • Feature 3
HTML
<div class="site-price-card">
  <div class="site-price-amount">
    <span class="site-price-currency">&euro;</span>49
    <span class="site-price-period">/ Monat</span>
  </div>
  <ul class="site-price-features">
    <li>Feature 1</li>
  </ul>
</div>

FAQ (Akkordeon)

.site-faq + details/summary Aufklappbare Fragen
Wie funktioniert das?

Erklaerung hier. Das FAQ nutzt natives HTML details/summary — funktioniert ohne JavaScript.

Was kostet es?

Preisinfo hier. Die +/−-Marker werden per CSS generiert.

HTML
<div class="site-faq">
  <details class="site-faq-item">
    <summary class="site-faq-question">Frage?</summary>
    <div class="site-faq-answer">
      <p>Antwort.</p>
    </div>
  </details>
</div>

Hypothesis Marker

.site-hypothesis Markiert unvalidierte Annahmen
Post-Quantum-Verschluesselung
Zukunftssichere Algorithmen gegen Quantencomputer-Angriffe.
HTML
<div class="site-tech-item site-hypothesis">
  <dt>Titel</dt>
  <dd>Beschreibung einer noch unvalidierten Annahme.</dd>
</div>

Composable: .site-hypothesis kann auf jedes Element angewendet werden.
Predeploy-Check warnt wenn Hypothesen-Marker noch in pages/ vorhanden sind.

CTA Section

.site-section--cta Dunkle Handlungsaufforderung

Bereit fuer den naechsten Schritt?

Ihre Anfrage ist unverbindlich. Wir melden uns innerhalb von 24 Stunden.

Jetzt starten
HTML
<section class="site-section--cta">
  <div class="site-container site-text-center">
    <h2>CTA Headline</h2>
    <p>Unterstuetzender Text.</p>
    <a href="..." class="site-btn site-btn--primary site-btn--lg">CTA</a>
  </div>
</section>
--> -->

8. GEO (AI-Sichtbarkeit)

Warum GEO-Patterns? Generative Suchmaschinen (ChatGPT, Perplexity, Google AI Overviews) zitieren bevorzugt kurze, eigenstaendige Antworten mit klarer Struktur. Diese Patterns optimieren Inhalte fuer AI-Zitierbarkeit — ohne die Lesbarkeit fuer Menschen zu beeintraechtigen.

Answer-First-Box

.site-answer-first Standalone-zitierbare Kurzantwort
HTML
<aside class="site-answer-first" role="complementary" aria-label="Kurzantwort">
  <p class="site-answer-first__q"><strong>Frage hier</strong></p>
  <p class="site-answer-first__a">Kurze, eigenstaendige Antwort (1-2 Saetze).</p>
</aside>

Einsetzen: Leistungsseiten, FAQ, Ratgeber — Seiten die eine konkrete Frage beantworten.
Nicht einsetzen: Startseite, Kontakt, reine Bildseiten.

Worked Example

Warum ein Worked Example? Einzelne Patterns zeigen die Bausteine — aber erst die Kombination zeigt, ob sie zusammen funktionieren. Das Worked Example ist der Lackmustest: Stimmen Abstaende, Hierarchie und Farbbalance in einer echten Sektion?
Komplette Sektion Section + Container + Columns + Buttons

Drei Gruende fuer Rigon

Was Kunden an der Zusammenarbeit schaetzen.

Erfahrung

Langjaerige Expertise in der Branche. Bewaehrte Prozesse statt Experimente.

Transparenz

Klare Kommunikation, keine versteckten Kosten. Sie wissen immer, woran Sie sind.

Ergebnis

Messbare Resultate statt schoener Praesentationen. Was zaehlt, ist die Wirkung.

HTML
<section class="site-section">
  <div class="site-container">
    <h2>Ueberschrift</h2>
    <p>Einleitung</p>
    <div class="site-columns">
      <div class="site-column">...</div>
      <div class="site-column">...</div>
      <div class="site-column">...</div>
    </div>
    <div style="text-align: center; margin-top: 32px;">
      <a href="..." class="site-btn site-btn--primary">CTA</a>
      <a href="..." class="site-btn site-btn--secondary">Mehr</a>
    </div>
  </div>
</section>

12. Content Patterns

Fuer Artikel in Insights, Guides, Use Cases, Changelog, Methodology. Gerendert im .site-prose Container. Dokumentation: docs/visual-patterns.md.

Prose-Typografie

.site-prose H2/H3/H4, Listen, Links, Blockquote

H2 als Sektions-Trenner

Paragraph mit Link, fett und kursiv. Inline-code.

H3 als Unterueberschrift

  • Listenpunkt eins
  • Listenpunkt zwei
Blockquote. Eingeruecktes Zitat mit primary-border.
HTML
<div class="site-prose">
  <h2>...</h2>
  <p>...</p>
</div>

TL;DR (Chunk-self-explaining summary)

.site-tldr 2-3-Satz-Block direkt nach dem Pubdate auf Article-Pages — GEO-Chunk-Optimierung
Markdown
{% tldr %}
Frontmatter
tldr:
  - "Satz 1: definiert das Konzept und nennt Schluesselbegriffe."
  - "Satz 2: nennt Rigon-Position oder Kernspannung."
  - "Satz 3 (optional): Implication."

Pubdate (Article publication / update line)

.site-pubdate Veröffentlichungs- und Update-Zeile auf Article-Pages — GEO-Frische-Signal

·

Markdown
{% pubdate %}
Frontmatter
date: 2026-04-13
updated: 2026-05-07   # nur bei substanziellen Updates bumpen

Callout (Gate Question)

.site-callout Primary-Akzent, fuer Tipps und Gate-Fragen
HTML
<aside class="site-callout" aria-label="Gate question">
  <span class="site-callout__label">Gate question</span>
  <span class="site-callout__body">Text...</span>
</aside>

Source Quote

.site-source-quote Externes Zitat mit Attribution
Most people tend to focus on the Answer. Analytic Storytelling
HTML
<blockquote class="site-source-quote">
  Zitat...
  <cite><a href="...">Quelle</a></cite>
</blockquote>

Compare (Before/After)

.site-compare Zwei Karten: weak/strong mit ✗/✓

Weak

  • S: "The market is changing."
  • A: "We recommend a phased approach."

Strong

  • S: "Three accounts renewed at lower tiers."
  • A: "Fix retention first. 3x cheaper than acquisition."
HTML
<div class="site-compare">
  <section class="site-compare__card site-compare__card--weak">...</section>
  <section class="site-compare__card site-compare__card--strong">...</section>
</div>

Variant Matrix

.site-variant-matrix Strukturelle Vergleichstabelle
VariantABC
V1✓✓–
V2✓–✓
HTML
<table class="site-variant-matrix">
  <thead><tr><th scope="col">...</th></tr></thead>
  <tbody><tr><th scope="row">V1</th><td class="yes">✓</td></tr></tbody>
</table>

Cross-Links

.site-crosslinks Liste verwandter Artikel als Karten
HTML
<ul class="site-crosslinks">
  <li><a href="...">Title</a></li>
</ul>

SCQA Flow Diagram

.site-scqa-flow Shortcode in Markdown, States: skip-to-answer | complication | question | answer
Markdown
{% scqa_flow %}
{% scqa_flow "skip-to-answer" %}
Rigon Styleguide — generiert aus tokens.css + styles.css
Prozess: docs/styleguide-prozess.md