Design System Test

Visual reference page for all design tokens, components, and utilities.

1. Brand Colors

brand-yellow
#FCDA03

brand-orange
#E77024

brand-navy
#083C64

brand-cyan
#0BD0CE

brand-magenta
#BF0EE4

brand-charcoal
#1A1A2E

brand-offwhite
#F8F7F4

brand-gray
#6B7280

2. Typography

display — Roboto Bold 36px/56px

Kopfstart Design System

h1 — Roboto Bold

h2 — Roboto Bold

h3 — Roboto Bold

body — Carrois Gothic 18px

Dies ist der Standard-Bodytext. Er wird in Carrois Gothic gesetzt, mit einer Zeilenhöhe von 1.7 für optimale Lesbarkeit auf allen Geräten.

body-small — 16px

Kleinerer Bodytext für sekundäre Inhalte und ergänzende Informationen.

accent — Cormorant Italic

Für besondere Momente, die Persönlichkeit zeigen.

caption — 14px

Caption text — Meta-Informationen, Bildunterschriften

label — 12px

LABEL TEXT — Tags, Badges, kleinste Textgröße

3. Font Families

font-headline (Roboto)

Roboto Bold — Headlines & UI

Roboto Regular — Secondary headlines

font-accent (Cormorant)

Cormorant Italic — Accent & personality

Cormorant Semibold — Emphasis

font-body (Carrois Gothic)

Carrois Gothic Regular — Body text, descriptions, long-form content across the entire site.

4. Spacing Scale (8px)

space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-5
24px
space-6
32px
space-7
48px
space-8
64px
space-9
80px
space-10
120px

5. Volume Dial System

volume-low

Reading Zone

Noise: 0% | Glow: none | Minimal accents

Glow Test

volume-mid

Structured Zone

Noise: 6% | Glow: subtle | Accent headings

Glow Test

volume-high

Hero Zone

Noise: 12% | Glow: full | All accents

Glow Test

6. NoiseOverlay Component

Low (3%)
Medium (6%)
High (12%)

7. Two Worlds

Dark World (Default)

Background: #1A1A2E (Charcoal)
Foreground: #F8F7F4 (Off-White)

Reading World

Background: #F8F7F4 (Off-White)
Foreground: #1A1A2E (Charcoal)

8. Gradient Utilities

gradient-hero

Hero Gradient

gradient-bridge

gradient-section-fade

gradient-cta-glow

CTA Glow Effect

9. Focus Rings

Tab through the elements below to see focus ring styles.

Link element

Reading World focus rings (Deep Navy):

Link element

10. shadcn/ui Components

Button variants

Button sizes

Input

Reduced Motion

Enable prefers-reduced-motion: reduce in browser DevTools (Rendering panel) to verify: glow animations disabled, noise overlay hidden, all transitions set to 0.01ms. Content remains fully accessible.