Klaus Hasse — Sicherheitsexperte
ProbetrainingKontaktPreiseStundenplan
Klaus Hasse — Sicherheitsexperte
Brand & Design System

WingTsun Ausbildungszentrum Walldorf

Die verbindliche Referenz für Farben, Typografie, Abstände und Komponenten dieser Website. Alle Werte stammen 1:1 aus src/styles.css.

SchriftManrope VariableRow-Breite1350 px · 85 %Button-Radius10 pxVersion2.0
Klaus Hasse — Sicherheitsexperte
02 · Farben

Farbpalette

Ruhiges Navy als Basis, Gelb als einziger CTA-Ton (immer mit dunkler Schrift), Teal für Akzente. Inhaltsflächen wechseln ausschließlich zwischen Weiß und Mist (#FBF6EA).

Marke

Flächen & Neutrale

Semantik

Regeln
  • Gelbe Buttons immer mit Text/Icon in #0F1B2E.
  • Aufeinanderfolgende Sektionen wechseln Weiß ↔ Mist.
  • Dunkle Blöcke ausschließlich in Navy oder Anthrazit.
Nicht erlaubt
  • Zusätzliche Hintergrundfarben außerhalb der Palette.
  • Weiße Schrift auf Gelb.
  • Farbverläufe als Flächenersatz.
03 · Typografie

Manrope — eine Schrift für alles

Lokal geladen über @fontsource-variable/manrope. Alle Größen sind fluide clamp()-Tokens; Überschriften nutzen 700–800, Fließtext 400.

Familie
Manrope Variable
Gewichte
400 · 600 · 700 · 800
Zeilenhöhe Text
1.625
Lesebreite
72ch
H1
w 800 · lh 1.08 · ls -0.035em
Sicherheit beginnt mit Wissen.
clamp(1.85rem, 1.3rem + 2.2vw, 3.4rem)
H2
w 800 · lh 1.15 · ls -0.028em
WingTsun für die ganze Familie
clamp(1.5rem, 1.15rem + 1.45vw, 2.375rem)
H3
w 700 · lh 1.25 · ls -0.02em
Kurse für Kinder, Teens & Erwachsene
clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem)
H4
w 700 · lh 1.3 · ls -0.02em
Termine 2026
clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem)
Lead
w 500 · lh 1.55 · ls normal
Selbstverteidigung ohne Kraft, Mut und Talent.
clamp(1.125rem, 1rem + 0.6vw, 1.375rem)
Body
w 400 · lh 1.625 · ls normal
WingTsun ist eines der effektivsten Selbstverteidigungssysteme der Welt.
clamp(1rem, 0.95rem + 0.2vw, 1.0625rem)
Small
w 400 · lh 1.6 · ls normal
Hilfetexte, Captions, rechtliche Hinweise.
clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem)
Button
w 600 · lh 1.2 · ls normal
Probetraining buchen
clamp(0.9375rem, 0.9rem + 0.2vw, 1rem)
Eyebrow
w 600 · lh 1.4 · ls 0.16em
BRAND & DESIGN SYSTEM
clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem)

Regel: genau eine H1 pro Seite, keine Ebene überspringen (H2 → H3 → H4).

04 · Layout

Raster & Abstände

Sektionen sind vollbreit, Inhalte laufen in einer zentrierten Row mit 85 % Breite und maximal 1350 px. Einzelne Medien, Tabellen und FAQ-Blöcke werden auf 1000 px begrenzt und zentriert.

Row max-width
1350 px
Row-Breite
85 %
Single-Block max
1000 px
Lesespalte
72ch
Sektionspadding
clamp(48px, 5vw, 88px)
Kompakt
clamp(36px, 4vw, 64px)
Folgesektion
clamp(44px, 4.5vw, 80px)
Breakpoints
sm 640 · md 768 · lg 1024 · xl 1280

Spacing-Skala

--space-1
4 px
--space-2
8 px
--space-3
12 px
--space-4
16 px
--space-5
24 px
--space-6
32 px
--space-7
40 px
--space-8
48 px
--space-9
64 px
--space-10
80 px
--space-11
96 px
--space-12
128 px
05 · Oberflächen

Radien & Schatten

Buttons und Karten nutzen 10 px, große Container 16–24 px. Schatten sind navy-getönt und dezent.

6px
--r-sm
10px
--r-md
16px
--r-lg
24px
--r-xl
32px
--r-2xl
999px
--r-pill

Schatten

shadow-xs
--shadow-xs
shadow-sm
--shadow-sm
shadow-md
--shadow-md
shadow-lg
--shadow-lg
shadow-float
--shadow-float
shadow-hover
--shadow-hover
06 · Buttons

Button-System

Primär- und Accent-Buttons sind gelb mit Text in Navy. Radius 10 px, Höhen 36 / 44 / 56 px.

Standard-CTA-Reihe am Seitenende: „Probetraining“, „Preise“, „Stundenplan“ – genau ein CTA-Block pro Seite.

07 · Bausteine

Wiederkehrende Bausteine

Karten, Eyebrows, Badges und Formularfelder folgen denselben Tokens.

Kurse

Karte

Weißer Grund, 1 px Line-Rahmen, Radius 10 px, shadow-sm, Hover shadow-md.

Sektion

Eyebrow

Teal, 600, 0.16em Laufweite, Großbuchstaben – immer über der H2.

Info

Dunkelblock

Navy #0F1B2E mit weißem Text und gelben Icons.

Formularfelder

AnrufenE-MailWhatsApp