Trainerr Design System

Tokens, typography, and components

Color Tokens

Background

base

surface

elevated

sunken

hover

active

Brand

primary

primary-light

accent

warm

destructive

Text

Primary text

primary

Secondary text

secondary

Muted text

muted

Inverse text

inverse

Link text

link

Borders

subtle

default

strong

Typography

Display — Inter

Display XL56px / 800
Display L40px / 800
Display M32px / 700

Heading — Inter

Heading L24px / 700
Heading M20px / 600
Heading S16px / 600

Body — Inter

Body L — The quick brown fox jumps over the lazy dog16px / 400
Body M — The quick brown fox jumps over the lazy dog14px / 400
Body S — The quick brown fox jumps over the lazy dog13px / 400
LABEL — UPPERCASE TRACKING12px / 500
Caption — supplementary detail11px / 400

Mono — JetBrains Mono

00:4540px / 600 — live timer
185 lbs28px / 600 — weight display
8 reps20px / 500 — rep counts
12,450 lbs14px / 500 — stats

Button Variants

Status Badges

PROFREEPR 🏆🔥 12NEW

Card Variants

Default Card

bg-surface + border-subtle

Elevated Card

bg-elevated + border-default

Selected Card

border-primary + shadow-primary

Spacing & Radius

xs
sm
md
lg
xl
xxl
sm
md
lg
xl
full

Animations

shimmer · pulse-soft · fade-in