WingTsun Ausbildungszentrum Walldorf
The single source of truth for every page, component, color, type setting and interaction across the WingTsun Walldorf website. A premium training-academy aesthetic — calm, trustworthy, expert.
What this brand stands for
Every visual decision is anchored in trust, professionalism and personal safety. Premium training-academy quality — never SaaS, never startup, never finance dashboard.
Menschen aller Altersgruppen befähigen, sich sicher, selbstbewusst und gewaltfrei zu bewegen.
Die führende Sicherheits- und Gewaltpräventionsadresse der Region Rhein-Neckar.
Sicherheit · Respekt · Disziplin · Familienfreundlichkeit · Exzellenz.
Ruhig, kompetent, geerdet. Niemals laut, niemals reißerisch.
Klar, persönlich, beruhigend. Fachlich präzise ohne Jargon.
Klarheit vor Kreativität · Substanz vor Effekt · Konsistenz vor Originalität.
Logo usage rules
The Klaus-Hasse signature logo is the only mark. Do not redesign, recolor, distort or rebuild it.
Safe area & minimum size
Safe area = ½ of logo height on all sides.
Minimum height: 32 px digital · 12 mm print.
Default header height: 72–84 px.
Incorrect usage
Color palette & roles
A calm navy base, decisive teal accent, alarm-clear yellow CTA, and a full semantic feedback set. All tokens live in src/styles.css.
Brand
--navy--teal--yellow--gold--navy-700--navy-600Neutrals
--paper--warm-white--mist--line--muted-fg--inkSemantic feedback
--success--warning--error--infoManrope — the only typeface
Loaded locally via @fontsource-variable/manrope. Fluid scale using clamp(). Headings 700/800, body 400, buttons 700.
clamp(2.5rem, 1.9rem + 2.6vw, 4rem)clamp(1.875rem, 1.5rem + 1.6vw, 2.625rem)clamp(1.5rem, 1.3rem + 1vw, 1.875rem)clamp(1.125rem, 1rem + 0.6vw, 1.375rem)clamp(1rem, 0.95rem + 0.2vw, 1.0625rem)clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem)clamp(0.9375rem, 0.9rem + 0.2vw, 1rem)clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem)8-point spacing system
Every spacing decision is a multiple of 8. Vertical rhythm uses 64/96 between sections.
Layout widths
Corner radius scale
Shadow system
Navy-tinted soft shadows. Never pure black.
Responsive grid
- Cols
- 12
- Gutter
- 32px
- Margin
- 108px
- Cols
- 8
- Gutter
- 24px
- Margin
- 48px
- Cols
- 4
- Gutter
- 16px
- Margin
- 16px
Form components
Card patterns
Spielerisch zur ersten Bewegungssicherheit.
Schulleiter · 35+ Jahre Erfahrung.
Maria K. — Eltern eines 6-jährigen.
Internationaler Verbandsstandard.
Selbstbehauptung & Prävention.
Unlimited Training · Familienrabatt.
Lucide — outline, 1.75px stroke
One family across the entire site. No mixing.
Photography style
Natural, authentic, professional. Real people, real training. No AI-generated images. Never publish photos of children without written consent.
Minimal line art only
When illustration is needed, use single-weight line art in brand colors. Never cartoonish, never mascots.
Component library inventory
Section templates
Motion language
Subtle, purposeful. 160ms snap · 240ms base · 420ms reveal. Easing: cubic-bezier(.22,.61,.36,1).
WCAG 2.2 AA baseline
Text ≥ 4.5:1 · large text ≥ 3:1. Yellow is CTA-only on navy/ink.
2px teal ring with 2px offset on every interactive element.
All flows operable without a mouse. Skip-to-content link in header.
Min 44×44 px. Spacing ≥ 8 px between targets.
Use semantic HTML first. ARIA only where roles are not native.
60–75 characters per line for body text.
Breakpoints
| Name | Min width | Container | Cols | Notes |
|---|---|---|---|---|
| Small mobile | 320px | 100% | 4 | Stack everything |
| Large mobile | 480px | 100% | 4 | Two-up cards |
| Tablet | 768px | 100% | 8 | Sidebar collapses |
| Laptop | 1024px | 100% | 12 | Mega-menu enabled |
| Desktop | 1280px | 1200px | 12 | Default canvas |
| Wide | 1440px | 1440px | 12 | Hero + media |
Global design tokens
All tokens live in src/styles.css. Never hardcode a value in a component.
--navy--teal--yellow--gold--ink--paper--mist--line--muted-fg--success--warning--error--info--fs-h1--fs-h2--fs-h3--fs-h4--fs-h5--fs-h6--fs-lead--fs-body--fs-small--fs-button--fs-eyebrow--space-1--space-2--space-3--space-4--space-5--space-6--space-7--space-8--space-9--space-10--space-11--space-12--r-sm--r-md--r-lg--r-xl--r-2xl--r-pill--shadow-xs--shadow-sm--shadow-md--shadow-lg--shadow-float--ease--dur-fast--dur-base--dur-slowHouse rules
Page inventory & sitemap
| Title | URL | Parent | Nav | Status | Phase |
|---|---|---|---|---|---|
| Startseite | / | — | Logo | Live | B |
| WingTsun für Kinder | /wingtsun-fuer-kinder | Kinder | Header | Live | B |
| Eltern & Kind (2–4) | /eltern-kind-kurse-2-4-jahre | Kinder | Header | Live | B |
| Vorschüler Crashkurs | /gewaltpraeventions-crash-kurs-fuer-vorschueler-4-module | Kinder | Header | Live | B |
| Grundschüler Crashkurs | /gewaltpraeventions-crash-kurs-fuer-grundschueler-4-module | Kinder | Header | Live | B |
| Teens Crashkurs | /gewaltpraeventions-crash-kurs-fuer-teens-4-module | Kinder | Header | Live | B |
| Brand & Design System | /branding | — | Floating | Live | B |
