Visual system · v1.0

Trophy
Style Guide

A practical source of truth for the colors, typography, controls, cards, states, and responsive formatting that make Trophy feel focused, energetic, and unmistakably its own.

01 / FOUNDATION

Brand principles

Trophy pairs the confidence of editorial-scale typography with the usability of a training tool. The interface should feel decisive, calm, and physical—not decorative or gamified.

01

Strong, not loud

Use near-black, heavy headlines and lime sparingly. One clear primary action is more powerful than several competing accents.

02

Warm, not clinical

Warm paper and ivory surfaces replace pure gray and white. Shadows carry a subtle olive tint so the system stays human.

03

Fast under load

Large touch targets, obvious state changes, and compact metadata support use mid-workout, when attention and dexterity are limited.

02 / COLOR

Core palette

These are the computed values from the deployed app. Click any hex value to copy it. Favor semantic token names in code; raw values belong only in the token layer.

Ink

Primary text, icons, dark panels

Trophy lime

Primary action, active navigation

Paper

Application background

Surface

Cards, inputs, sidebar

Quiet fill

Grouped content, neutral controls

Line

Soft separators and outlines

Muted

Secondary copy and metadata

Quiet accent

Selected rows and positive wash

Success strong
Danger
Timer blue
Peach · reserved
Lime border
Semantic rule: lime means primary/active, green means completed/success, red means destructive/error, and blue is reserved for timed/rest experiences. The deployed --blue alias currently resolves to ink; new code should use --timer instead.
03 / TYPOGRAPHY

Type & hierarchy

Trophy uses the native system stack: San Francisco on Apple devices, Segoe UI on Windows, then the platform sans-serif. Headlines are very heavy with tight tracking; body copy stays neutral and highly legible.

Display / 88
Train with intent.
Page title / 56
My Workouts
Section / 28
Personal records

Use sentence case. Keep paragraphs short, direct, and useful during a workout. Secondary copy uses muted ink, never low-opacity black.

Display72–92 / .90 / 880−.065em
Page H156 / .98 / 820−.052em
Section H228 / 1.05 / 800−.035em
Card H320–24 / 1.15 / 760−.025em
Body15–16 / 1.5 / 400normal
Metadata12–13 / 1.4 / 600normal
Eyebrow11 / 1.2 / 800+.13em
Mobile H143–48 / .98 / 820−.045em
04 / GEOMETRY

Spacing & shape

The app uses a flexible 4px rhythm with practical intermediate values. Compact controls feel athletic; workout groups use larger radii to signal hierarchy.

Spacing

Core values: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64.

4
8
12
16
24
40

Radii

Choose by component scale, not decoration.

8
chips
14
controls
20
cards
29
groups

Depth

Borders establish structure; shadows support—not replace—them.

Border only · nested rows
0 14 36 / 8% · cards
0 18 44 / 12% · floating
05 / COMPONENTS

Actions & inputs

Controls prioritize confident taps and clear status. Default control height is 46px; workout-critical actions may reach 58px. Never use color alone to communicate an outcome.

Buttons

46px minimum

Primary: one per decision area. Danger: surface fill with muted red border until confirmation. Circular controls: icon-only with an accessible name.

Segmented control

Single-select

Tags

Metadata, not actions
Resume workoutDumbbellsRepsChest

Form controls

Labels always visible
Search fields may include a leading icon; keep the same 46px height.
Units remain visible in the label or control.
Helper and character-count text: 11–12px muted ink.
06 / SURFACES

Cards & workout states

Surface hierarchy is communicated with fill, border, radius, and a single accent edge. Avoid stacking multiple shadows or bright fills in the same region.

Active workout

CHEST

2 exercises · started 18 minutes ago

Superset · 3 rounds

ARMS

Set 2
12 reps · 25 lbCurrent
↗6,000 lblifted this month
Personal record

Barbell Bench Press

Heaviest set · Oct 31

250 lbCompleted ✓
PendingNeutral surface and muted metadata.
CurrentLime wash plus explicit “Current” label.
LoggedGreen means a completed set or save.
DestructiveRed is reserved for removal or ending.
TimedBlue identifies duration and rest flows.
07 / LAYOUT

Responsive formatting

Desktop uses a fixed 248px sidebar and a centered content canvas up to 1180px. At 760px and below, navigation becomes a fixed bottom bar and content uses 15px page gutters.

Trophy
HomeWorkoutsExercisesProgress
Desktop canvas

Progress

Training volume
HomeWorkoutsExercisesProgress

Desktop

  • Sidebar: 248px fixed, surface background, 1px right border.
  • Main canvas: max 1180px with 32px minimum side gutters.
  • Page titles: typically 56px; display moments may reach 92px.
  • Two-column patterns collapse before either column becomes cramped.

Mobile ≤ 760px

  • Bottom navigation: 72px plus safe-area inset; blurred surface.
  • Main gutters: 15px; cards may use 18–24px internal padding.
  • Page titles: 43–48px; no horizontal overflow.
  • Interactive targets: 44px minimum, preferably 46–48px.
08 / IMPLEMENTATION

Canonical token layer

Start every Trophy surface with these semantic tokens. Component styles should consume the tokens; they should not introduce near-duplicate colors or one-off shadows.

:root {
  --ink: #10110f;
  --muted: #6e726b;
  --paper: #f8f7f2;
  --surface: #fffef9;
  --quiet-fill: #f0f1eb;
  --line: #dedfd8;
  --line-strong: #d2d5cc;

  --lime: #baff2f;
  --lime-strong: #9de515;
  --lime-border: #79b20a;
  --quiet-accent: #e8ffd1;

  --success: #55d58b;
  --success-strong: #197543;
  --danger: #d73f34;
  --danger-strong: #a42e27;
  --danger-border: #d5aaa6;
  --timer: #4398ff;
  --timer-ink: #06111e;

  --font-modern: -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, sans-serif;
  --shadow: 0 14px 36px rgb(28 33 23 / 8%);
  --focus: rgb(86 117 0 / 38%);
  --radius-control: 14px;
  --radius-card: 20px;
  --radius-group: 29px;
}

Do

  • Use one lime primary action per decision area.
  • Pair icons or labels with color-coded states.
  • Use borders to separate nested warm surfaces.
  • Preserve the visible focus ring and 44px touch minimum.
  • Keep headings short, heavy, and sentence case.

Don’t

  • Use pure black, cool white, or generic blue as a default.
  • Fill destructive actions solid red before confirmation.
  • Add gradients, glossy effects, or heavy gray shadows.
  • Use lime for success; completed work is green.
  • Rely on placeholder text as the only field label.
Change policy

Keep guide and product aligned.

A design token change is a product change. Treat this file as the human-readable contract and the application token file as its executable twin.

  1. Propose the semantic reason—not only a new hex or radius.
  2. Check all states: default, hover, pressed, focus, disabled, loading, error.
  3. Verify desktop and ≤760px mobile layouts.
  4. Update the token layer and this guide in the same change.
  5. Record the audit date and deployed stylesheet identifier.
Copied