Brand & Design System

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.

ProjectModule BVersion1.0DS Version1.0OwnerKlaus Hasse
Klaus Hasse — Sicherheitsexperte
02 · Brand Philosophy

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.

Mission

Menschen aller Altersgruppen befähigen, sich sicher, selbstbewusst und gewaltfrei zu bewegen.

Vision

Die führende Sicherheits- und Gewaltpräventionsadresse der Region Rhein-Neckar.

Core Values

Sicherheit · Respekt · Disziplin · Familienfreundlichkeit · Exzellenz.

Personality

Ruhig, kompetent, geerdet. Niemals laut, niemals reißerisch.

Voice

Klar, persönlich, beruhigend. Fachlich präzise ohne Jargon.

Design Principles

Klarheit vor Kreativität · Substanz vor Effekt · Konsistenz vor Originalität.

04 · Color System

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
--navy
HEX
#0F1B2E
RGB
15, 27, 46
HSL
217° 51% 12%
Primary surface · headingsAAA on white
Teal
--teal
HEX
#0AA7A7
RGB
10, 167, 167
HSL
180° 89% 35%
Accent · links · eyebrowsAA on white
Yellow
--yellow
HEX
#FFC107
RGB
255, 193, 7
HSL
45° 100% 51%
CTA · highlightsAAA on navy
Gold
--gold
HEX
#C9A24C
RGB
201, 162, 76
HSL
42° 53% 54%
Premium accentAA on navy
Navy 700
--navy-700
HEX
#1A2940
RGB
26, 41, 64
HSL
218° 42% 18%
Elevated darkAAA on white
Navy 600
--navy-600
HEX
#243352
RGB
36, 51, 82
HSL
221° 39% 23%
Hover state darkAAA on white

Neutrals

Paper
--paper
HEX
#FFFFFF
RGB
255, 255, 255
HSL
0° 0% 100%
Card background
Warm White
--warm-white
HEX
#FAFAF7
RGB
250, 250, 247
HSL
60° 23% 97%
Page background
Mist
--mist
HEX
#F5F7FA
RGB
245, 247, 250
HSL
214° 33% 97%
Subtle section bg
Line
--line
HEX
#E6E9EE
RGB
230, 233, 238
HSL
218° 17% 92%
Borders
Muted FG
--muted-fg
HEX
#6B7280
RGB
107, 114, 128
HSL
220° 9% 46%
Secondary textAA on white
Ink
--ink
HEX
#0F1B2E
RGB
15, 27, 46
HSL
217° 51% 12%
Body textAAA on white

Semantic feedback

Success
--success
HEX
#16A34A
RGB
22, 163, 74
HSL
142° 76% 36%
ConfirmAA on white
Warning
--warning
HEX
#F59E0B
RGB
245, 158, 11
HSL
38° 92% 50%
CautionAA on navy
Error
--error
HEX
#DC2626
RGB
220, 38, 38
HSL
0° 73% 51%
DestructiveAAA on white
Info
--info
HEX
#2563EB
RGB
37, 99, 235
HSL
221° 83% 53%
InformationAAA on white
05 · Typography

Manrope — the only typeface

Loaded locally via @fontsource-variable/manrope. Fluid scale using clamp(). Headings 700/800, body 400, buttons 700.

Family
Manrope Variable
Weights
400 · 500 · 600 · 700 · 800
Charset
Latin Extended
Reading width
68ch
Body line-height
1.65
Letter-spacing H1
-0.035em
H1
w 800 · lh 1.15
Sicherheit beginnt mit Wissen.
clamp(2.5rem, 1.9rem + 2.6vw, 4rem)
H2
w 700 · lh 1.2
Premium WingTsun für die ganze Familie
clamp(1.875rem, 1.5rem + 1.6vw, 2.625rem)
H3
w 700 · lh 1.25
Kurse für Kinder, Teens & Erwachsene
clamp(1.5rem, 1.3rem + 1vw, 1.875rem)
Lead
w 500 · lh 1.55
Selbstverteidigung ohne Kraft, Mut & Talent.
clamp(1.125rem, 1rem + 0.6vw, 1.375rem)
Body
w 400 · lh 1.65
WingTsun ist eines der effektivsten Selbstverteidigungssysteme der Welt.
clamp(1rem, 0.95rem + 0.2vw, 1.0625rem)
Small
w 400 · lh 1.6
Hilfetexte, Captions, Legal-Hinweise.
clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem)
Button
w 700 · lh 1.2
Probetraining buchen
clamp(0.9375rem, 0.9rem + 0.2vw, 1rem)
Eyebrow
w 600 · lh 1.4
BRAND & DESIGN SYSTEM
clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem)
06 · Spacing

8-point spacing system

Every spacing decision is a multiple of 8. Vertical rhythm uses 64/96 between sections.

space-44px
space-88px
space-1616px
space-2424px
space-3232px
space-4848px
space-6464px
space-9696px
space-128128px

Layout widths

Reading
68ch
Narrow
720px
Default
1200px
Wide
1440px
07 · Radius

Corner radius scale

6 px · sm
Inputs · small chips
10 px · md
Buttons · tags
16 px · lg (default)
Cards · panels
24 px · xl
Hero blocks · media
32 px · 2xl
Marketing modules
999 px · pill
Pills · avatars · floating actions
08 · Elevation

Shadow system

Navy-tinted soft shadows. Never pure black.

shadow-xs
shadow-sm
shadow-md
shadow-lg
shadow-float
shadow-hover
09 · Grid

Responsive grid

Desktop ≥ 1280
Cols
12
Gutter
32px
Margin
108px
Tablet 768–1279
Cols
8
Gutter
24px
Margin
48px
Mobile < 768
Cols
4
Gutter
16px
Margin
16px
10 · Buttons

Button library

Variants

States

Default
Hover
Focus
Active
Disabled
Loading
11 · Forms

Form components

12 · Cards

Card patterns

Course
Eltern & Kind (2–4)

Spielerisch zur ersten Bewegungssicherheit.

Instructor
Klaus Hasse

Schulleiter · 35+ Jahre Erfahrung.

Testimonial
Meine Tochter blüht auf.

Maria K. — Eltern eines 6-jährigen.

Feature
EWTO geprüft

Internationaler Verbandsstandard.

Audience
Für Frauen

Selbstbehauptung & Prävention.

Pricing
Premium · ab 79€/Mo

Unlimited Training · Familienrabatt.

13 · Icons

Lucide — outline, 1.75px stroke

One family across the entire site. No mixing.

Safety
Children
Women
Men
Companies
Schools
Authority
Training
Contact
FAQ
Calendar
Location
Email
Video
Blog
Reviews
Certificates
Awards
14 · Imagery

Photography style

Natural, authentic, professional. Real people, real training. No AI-generated images. Never publish photos of children without written consent.

Do
Natural light, candid moments
Do
Wide context shots of training
Don't
Stock-photo fake smiles
Don't
AI-generated portraits
15 · Illustration

Minimal line art only

When illustration is needed, use single-weight line art in brand colors. Never cartoonish, never mascots.

16 · Components

Component library inventory

HeaderReady
Mega MenuReady
BreadcrumbReady
HeroReady
StatisticsReady
FeaturesReady
TimelineReady
TestimonialsReady
InstructorReady
FAQReady
CTAReady
NewsletterReady
FooterReady
CardsReady
GalleryReady
Video EmbedReady
Course GridReady
Age CardsReady
Audience CardsReady
Contact FormReady
MapReady
Floating ActionsReady
17 · Templates

Section templates

Hero
Content Left
Content Right
Dark Section
Statistics
35+
12k
98%
CTA
Probetraining buchen →
18 · Motion

Motion language

Subtle, purposeful. 160ms snap · 240ms base · 420ms reveal. Easing: cubic-bezier(.22,.61,.36,1).

Fade
Hover me
Slide
Hover me
Scale
Hover me
Lift
Hover me
19 · Accessibility

WCAG 2.2 AA baseline

Contrast

Text ≥ 4.5:1 · large text ≥ 3:1. Yellow is CTA-only on navy/ink.

Focus

2px teal ring with 2px offset on every interactive element.

Keyboard

All flows operable without a mouse. Skip-to-content link in header.

Touch targets

Min 44×44 px. Spacing ≥ 8 px between targets.

ARIA

Use semantic HTML first. ARIA only where roles are not native.

Reading width

60–75 characters per line for body text.

20 · Responsive

Breakpoints

NameMin widthContainerColsNotes
Small mobile320px100%4Stack everything
Large mobile480px100%4Two-up cards
Tablet768px100%8Sidebar collapses
Laptop1024px100%12Mega-menu enabled
Desktop1280px1200px12Default canvas
Wide1440px1440px12Hero + media
21 · Tokens

Global design tokens

All tokens live in src/styles.css. Never hardcode a value in a component.

Colors
--navy--teal--yellow--gold--ink--paper--mist--line--muted-fg--success--warning--error--info
Type
--fs-h1--fs-h2--fs-h3--fs-h4--fs-h5--fs-h6--fs-lead--fs-body--fs-small--fs-button--fs-eyebrow
Spacing
--space-1--space-2--space-3--space-4--space-5--space-6--space-7--space-8--space-9--space-10--space-11--space-12
Radius / Shadow / Motion
--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-slow
22 · UI Principles

House rules

Spacing
Multiples of 8. No magic numbers.
Alignment
Left-aligned text. Center only headlines.
Content width
Body text capped at 68ch.
Images
Aspect-ratio locked. Never letterboxed.
Cards
1 border + 1 shadow. Never both heavy.
Buttons
One primary per view. CTAs always yellow.
Sections
64–96px vertical rhythm.
Typography
Manrope only. Weights 400/500/600/700/800.
Icons
Lucide outline · 1.75 stroke · color = currentColor.
Hover
Lift 3px + shadow. Never color-flip.
Animation
≤ 420ms. Respect prefers-reduced-motion.
Interaction
Tap target ≥ 44px. Focus ring always visible.
23 · Architecture

Page inventory & sitemap

TitleURLParentNavStatusPhase
Startseite/LogoLiveB
WingTsun für Kinder/wingtsun-fuer-kinderKinderHeaderLiveB
Eltern & Kind (2–4)/eltern-kind-kurse-2-4-jahreKinderHeaderLiveB
Vorschüler Crashkurs/gewaltpraeventions-crash-kurs-fuer-vorschueler-4-moduleKinderHeaderLiveB
Grundschüler Crashkurs/gewaltpraeventions-crash-kurs-fuer-grundschueler-4-moduleKinderHeaderLiveB
Teens Crashkurs/gewaltpraeventions-crash-kurs-fuer-teens-4-moduleKinderHeaderLiveB
Brand & Design System/brandingFloatingLiveB
Design System v1.0
WingTsun Ausbildungszentrum Walldorf — Klaus Hasse
← Zurück zur Website
AnrufenE-MailWhatsApp