Skip to content

Train Smarter — Design System

PROJ-1: Design System Foundation. All tokens, colors, typography, and components at a glance.

Typography (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

Semantic Colors

Success
Warning
Error
Info

shadcn/ui Semantic Tokens

background
foreground
primary
secondary
muted
accent
destructive
border
ring
card

Tip: Toggle dark mode to see the Warm-Slate dark surfaces.

Buttons (shadcn/ui)

Badges

Default (Primary)SecondaryDestructiveOutlineSuccessWarningErrorInfoInactivePremium

Form Elements

Focus Ring

Teal-600 (--ring token) on all interactive elements.

Error state uses ring-error (red).

Secondary uses Violet as accent color.

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)

Shadows

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 Composition

Athletes
Manage active athletes

24

+3 this week

Programs
Running training programs

8

2 in planning

Compliance
Average adherence

87%

+5% vs. last month