cap · design system · pivotsource: home.html · not a page clone
wakeboard · wasserski · strandklub · pinneberg

Style
System.

Ein Arbeits-Styleguide für neue Cablesport-Seiten: Er destilliert die Pivot-Startseite in wiederverwendbare Typo-, Farb-, Bild-, CTA- und Layout-Regeln, ohne komplette Homepage-Sektionen zu kopieren.

cablesport styleguide
TokensTypoButtonsBilderCutoutPatternsRegeln
01 — Farbrollen

Wenig Farben, klare Jobs.

Die Pivot-Ästhetik ist nicht bunt um der Buntheit willen. Jede Farbe übernimmt eine Rolle: Bühne, Lesefläche, Energie, CTA, Wasser-Kontrast.

Ink

#141414
Bühne · Footer · starke Cards

Paper

#FBF6EC
Default Page Base

Cream

#F3E7CF
warme Sektionen

Orange

#F26A1F
Akzent · Bewegung

Yellow

#FFD60A
Primary CTA

Teal

#3FA39E
Wasser · Gruppen

Paper oder Cream als Grundfläche, Ink für Text, Orange für einzelne Wörter/Regelpunkte, Yellow nur für priorisierte Aktion.

Ink als Bühne für Fotoflächen, Pricing oder Footer. Text Cream, Outline-Buttons mit .cs-pivot-on-dark.

Teal und Orange als große Modulflächen nur punktuell einsetzen; nicht beide als gleichwertige Vollflächen direkt hintereinander stapeln.
02 — Typografie

Display zuerst, Nutztext danach.

Neue Pages brauchen eine plakativen Markenmoment pro Abschnitt und ruhige, knappe Information darunter. Nicht jede Überschrift bekommt denselben Lautstärkegrad.

var(--font-display) · für Hero, Manifest, einzelne Wörter
wake. beach. bass.
var(--font-head) · redaktionelle h2/h3, erklärende Headlines
Sommer in Pinneberg, gemacht für den Kick.
var(--font-body) · Fließtext 15–18px, max. 42–62ch

Kurze, konkrete Copy. Jede Fläche beantwortet: Was bekomme ich, warum jetzt, was ist der nächste Klick? Keine langen Textwände unter plakativen Headlines.

var(--font-mono) · Label, Navigation, Fakten, Microcopy
☆ cap · saison mai – oktober · 35 minuten von hamburg
Label / eyebrowPill · statusHighlightPlain
03 — Buttons & Labels

Ein CTA-System, klare Priorität.

Buttons bleiben mono, uppercase, pillförmig und mit Pfeil-Zeichen. Pro Modul: ein Primary CTA; weitere Wege als Outline oder Textlink.

Auf hellen Flächen

Yellow ist das Buchungs-/Kontakt-Signal. Nicht für jeden Link verwenden.

Auf dunklen Flächen

→ Online buchen→ Details

Outline auf Dunkel immer mit .cs-pivot-on-dark, sonst fehlt Kontrast.

04 — Bildbehandlung

Fotos sind Flächen, nicht Deko.

Bildcontainer verwenden .cs-pivot-ph: cover crop, harte Kanten, optionale Pill oder Mono-Notiz. Motive groß lassen; keine kleinteiligen Galerie-Thumbnails.

Crew

photo · group · sunset

Bar

Action

photo · cable · profile
photo · water · speed
05 — Cutout-Typo

Bild im Wort nur für Hero-Momente.

Cutouts sind ein Signature-Mittel und verlieren Wirkung, wenn jede Headline sie nutzt. Verwenden für Manifest, Kampagne, große Teaser — nie für kleine Cards oder langen Text.

Wasser.

Pinneberg.

Bricks-kompatibles Pattern: Text bleibt im DOM, Bild nur als Hintergrund. Immer große Schrift, hoher Kontrast und fallback-fähige Umgebung.

06 — Modul-Patterns

Kleine Bausteine statt Startseiten-Kopie.

Für Unterseiten aus isolierten Patterns komponieren: Fact Rows, Split Teaser, Detail Cards, Pricing/Faktenlisten. Startseiten-Sektionen nicht 1:1 hintereinander stapeln.

Fact Rows

Öffnungszeiten, Preise, Fakten

Mo – Do13–20
Weekend11–21
Split Teaser

Crew.
Event.

Teal/Ink-Flächen für Gruppen, Kurse und Angebote mit klarer Aktion.

→ Anfragen
Detail Card
kit.

Für sekundäre Angebote.

Mehr
07 — Spacing & Layout

Große Luft, enge Details.

Sections großzügig staffeln, UI und Fakten kompakt halten. Standard-Container ist .cs-pivot-wrap; Full-bleed nur für echte Foto- oder Farbflächen.

Spacing Scale

10–14px
24px
48px
88–110px

Layout Rhythmus

Content Lead

Headline + kurze Copy + ein CTA.

Support

Bild, Fact Rows oder Card-Stack.

08 — Do / Don’t

Wiedererkennbar bleiben.

Diese Regeln verhindern, dass neue Seiten wieder in generische Bricks-Landingpages kippen.

Do

Don’t

Quelle: project/html/pages/home.html und home-draft-v3.html · CSS: project/design-system.css managed block pivot-home-generated · Assets: project/images/pivot-home/