Zum Inhalt springen

Train Smarter — Design System

PROJ-1: Design System Foundation. Alle Tokens, Farben, Typografie und Komponenten auf einen Blick.

Typografie (Inter Variable)

H1 — 32px / Bold / -0.02em

H2 — 24px / SemiBold / -0.015em

H3 — 20px / SemiBold / -0.01em

H4 — 16px / SemiBold

H5 — 14px / SemiBold

Body Large — 16px / Regular

Body — 14px / Regular (Default)

Body Small — 12px / Regular

Label — 12px / SemiBold / UPPERCASE / +0.05em

Button — 14px / SemiBold

Caption — 11px / Medium

Primary (Teal)

50
100
200
300
400
500
600
700
800
900

Secondary (Violet)

50
100
200
300
400
500
600
700
800
900

Gray (Warm Slate)

50
100
200
300
400
500
600
700
800
900

Semantische Farben

Success
Warning
Error
Info

shadcn/ui Semantic Tokens

background
foreground
primary
secondary
muted
accent
destructive
border
ring
card

Tipp: Dark Mode umschalten um die Warm-Slate Dark-Surfaces zu sehen.

Buttons (shadcn/ui)

Badges

Default (Primary)SecondaryDestructiveOutlineErfolgWarnungFehlerInfoInaktivPremium

Form Elements

Focus Ring

Teal-600 (--ring Token) auf allen interaktiven Elementen.

Error-State nutzt ring-error (Rot).

Secondary nutzt Violet als Akzent-Farbe.

Spacing (8px Grid)

4px (xs)
8px (sm)
16px (md)
24px (lg)
32px (xl)
48px (2xl)
64px (3xl)

Border Radius

xs (4px)
sm (6px)
md (8px)
lg (12px)
xl (16px)
2xl (24px)

Schatten

xs
sm
md
lg
xl

Motion Tokens

Duration

fast 150ms

base 250ms

slow 400ms

Easing

default ease-in-out

spring overshoot

Usage

Hover/Focus: fast (150ms). Layout-Transitions: base (250ms). Page-Transitions: slow (400ms).

Card Komposition

Athleten
Aktive Athleten verwalten

24

+3 diese Woche

Programme
Laufende Trainingsprogramme

8

2 in Planung

Compliance
Durchschnittliche Einhaltung

87%

+5% vs. Vormonat