Web App Style Guide

Vue 3 + Vite + Tailwind CSS v4 · Light theme

Visual reference for the TrainerDay web app (trainerday.com). All tokens come from src/assets/css/tailwind.css.

Design Tokens

Primitive values that define the visual language: colors, typography, spacing, and radii.

Colors

Primary

Primary #2563eb

Primary Light #dbeafe

Primary Dark #1d4ed8

Semantic

Success #10b981

Danger #e7140f

Warning #eab308

Info #4ea1fe

Surfaces

Surface #f6f8fb

Card #ffffff

Sidebar #1e293b

Text

Text #1a202c

Text Muted #64748b

Text Light #94a3b8

Training Zones

Recovery #7f7f7f

Endurance #3f8fce

Tempo #49c072

Threshold #ffcc3f

VO2max #f46d41

Anaerobic #d6270b

Periodization

Base #02c9af

Build #ffba4a

Peak #f86f2b

Event #1a9af6

Typography

DM Sans — App Font

The quick brown fox jumps over the lazy dog

Heading 1 (text-3xl font-bold)

Heading 2 (text-2xl font-bold)

Heading 3 (text-xl font-semibold)

Heading 4 (text-lg font-semibold)

Body text (text-base)

Muted text (text-sm text-text-muted)

Light small text (text-xs text-text-light)

Heading Utilities

Heading .td-h2 (1.5rem / 700)

Heading .td-h3 (1.25rem / 700)

Heading .td-h4 (1.125rem / 700)

Links

.td-link — Primary link Open activity →

.td-link-muted — Muted link See all results

.td-link-danger — Danger link Delete activity

.td-link-success — Success link Sync completed

.heading-link — Clickable heading My Training Plan

.link-disabled — Disabled link Upgrade to unlock

Border Radius

rounded-sm
6px

rounded-md
12px

rounded-lg
16px

rounded-pill
100px

Components

Reusable UI elements built from design tokens.

Buttons

Button Tiers

Small Variants `.is-small`

Disabled State

Loading State

Ghost / Link Buttons

Minimal-weight actions that look like text. Use for navigation-style actions or "Learn more" links.

Cards

.td-card — Standard card (white bg, 12px radius, border, subtle shadow, 16px padding)

Card Title

Content inside .td-card. The primary container pattern for app sections.

.td-base-card — Simpler card (no shadow)

Base Card Title

Content inside .td-base-card. Same as td-card but without box-shadow.

Recommended

Builder Card (Selected)

Featured card with blue ring and badge. Based on Coach Jack's plan builder pattern.

✓ Feature one
✓ Feature two
✓ Feature three

Training Zones Card

Recovery < 55%

Endurance 55-75%

Tempo 76-90%

Threshold 91-105%

VO2max 106-120%

Anaerobic > 120%

Interactive Card

Hover to see the border and shadow effect. Used for clickable cards.

Learn more →

Weekly TSS

342

▲ 12% from last week

Form Inputs

Text Input .td-input-text

Number Input + Hint .td-field-hint

Your Functional Threshold Power

Input with Error .td-input-text--error

This field is required

Disabled Input

Textarea

Supports vertical resize

Dropdowns

Custom-styled native selects. Use appearance-none + a chevron SVG positioned absolutely.

Standard

Compact

Disabled

Dropdown Menu

Action menu with .dd-action-item items.

Segmented Tabs

iOS-style segmented control. Container has surface bg + border. Active tab: white bg + subtle shadow. Inactive: muted text.

2 options

3 options

Compact

Badges

Zone Badges `.dominant-zone`

Recovery Endurance Tempo Threshold VO2max Anaerobic

Pill Badges

Primary Success Endurance Tempo Threshold VO2max Anaerobic Base Phase Build Phase Peak Phase

Split Pill (Label + Value)

Pill with a gray label section on the left and a bold value on the right. Clickable variant gets hover:border-primary.

Event Date Mar 22, 2026

Block Hours 6 – 9h

Duration 16 weeks

Alerts

ⓘ

Info

Your training plan has been updated with the latest changes.

✓

Success

Your workout has been saved to the calendar.

⚠

Warning

Your FTP has not been updated in over 8 weeks. Consider retesting.

⚠

Error

Could not connect to the server. Please try again.

Tabs

Underline Tabs

Active tab: primary color + 2px bottom border. Uppercase, bold, tracking-wide.

Pill Tabs

Active = primary-light bg + primary text. Inactive = no bg.

Toggles / Switches

40x22px pill track with 16px circle thumb. Primary blue for ON state.

OFF