Desktop App

Electron + React. Dark theme only. ALL styling is inline React.CSSProperties objects — no Tailwind classes in JSX. Colors centralized in the C token object.

Electron React TypeScript Zustand Inline CSSProperties Dark Only

The C Token Object

From ProgressPage.tsx — the centralized color constants used across the desktop app.

// ProgressPage.tsx — color token pattern
const C = {
  bg:            '#0a0b10',       // App background
  card:          '#161820',       // Card background
  elevated:      '#1e2028',       // Raised/hover surfaces
  border:        'rgba(255,255,255,0.07)',
  borderSubtle:  'rgba(255,255,255,0.04)',
  text:          '#e5e5e8',       // Primary text
  textSecondary: '#8a8a95',       // Secondary text
  textMuted:     '#55555f',       // Muted/disabled text
}
        

Color Tokens

The complete color palette used across the desktop app.

Surface Hierarchy

App Background

#0a0b10

C.bg

Card

#161820

C.card

Elevated

#1e2028

C.elevated

Element

#20232f

Control

#252836

Active / Pressed

#292D3D

Popup Border

#3a3d4a

Text Hierarchy

Primary Text #e5e5e8 C.text — also #eaeaea

Secondary Text #8a8a95 C.textSecondary — also #b8bac0

Muted Text #55555f C.textMuted — also #83858b

Dim Text #5B5D65 Labels, timestamps

Accent Colors

Primary Action

#2C68DE

Chart Line

#4a9eff

Error / Danger

#fe5959

Success

#4cdd8a

BLE Device Colors

Controllable #2C68DE

Power #e8a838

Heart Rate #fe5959

Cadence #4cdd8a

Speed #a78bfa

Intensity Colors

Easy

#4a7fff

Moderate

#d4c94a

Hard

#d45454

Zone Colors (Zwift Standard)

#7F7F7F

#3F8FCE

#49C072

#FFCC3F

#F46D41

#D6270B

Typography

DM Sans for all text. JetBrains Mono for numeric values and metrics only.

Font Families

Primary — 'DM Sans', -apple-system, sans-serif

The quick brown fox jumps over the lazy dog

Monospace — 'JetBrains Mono', monospace

247w 142bpm 88rpm

Type Scale

247 w

Large Metric

60px / 700 / JetBrains Mono

142 bpm

Medium Value

28px / 300

Weekly Summary

Section Header

22px / 600

Fitness Progress

Title

20px / 700 / -0.02em

Your FTP increased by 5 watts this week

Body

14-15px / 500-600

AVG POWER

Label

12-13px / 500-600

Last updated 2 hours ago

Subtitle

13px / 400

NEW

Micro (Badges)

9px / 700

Font smoothing: -webkit-font-smoothing: antialiased

Cards

The ProgressPage card pattern — the primary container for all dashboard content.

// ProgressPage card pattern
{
  background: '#161820',
  borderRadius: 12,
  border: '1px solid rgba(255,255,255,0.07)',
  padding: 28,
}
        

Example: Fitness Overview Card

Fitness Overview

Last 30 days

CTL (Fitness)

47.2

ATL (Fatigue)

62.8

TSB (Form)

-15.6

Example: Activity Row Card

Sweet Spot Intervals

Today, 1:15:00

218

watts

148

bpm

72

TSS

Buttons & Interactive Elements

Desktop uses borderRadius: 6 — NOT pill (100px). This differs from the web app.

Primary Buttons

{
  background: '#2C68DE',
  color: 'white',
  borderRadius: 6,
  padding: '8px 20px',
  fontSize: 14,
  fontWeight: 600,
  border: 'none',
}
          

Outline Buttons

{
  background: 'transparent',
  color: '#4a9eff',
  border: '2px solid #2C68DE',
  borderRadius: 6,
}
          

Danger Buttons

Toggle Buttons (ProgressPage Pattern)

// Toggle container
{ display: 'inline-flex', gap: 2, padding: 3, background: '#1e2028', borderRadius: 6 }

// Active toggle
{ background: '#292D3D', color: '#e5e5e8', boxShadow: '0 1px 3px rgba(0,0,0,0.2)' }

// Inactive toggle
{ background: 'transparent', color: '#83858b' }
          

Navigation

TopNav component — 36px tab bar for switching between app views.

TopNav (36px height)

Workout Progress Settings Connect

// Nav bar
{ height: 36 }

// Tab
{ padding: '0 14px', borderRadius: 6, fontSize: 13, fontWeight: 500, transition: 'all 0.15s' }

// Active
{ background: '#292D3D', color: 'white' }

// Inactive
{ background: 'transparent', color: '#83858b' }
          

Popups / Modals

ConnectPopup pattern — floating overlays with elevated surface and heavier shadow.

Connect Device

Wahoo KICKR

Controllable Trainer

Connected

Garmin HRM-Pro

Heart Rate Monitor

Scanning...

// Popup/Modal
{
  background: '#252836',
  border: '1px solid #3a3d4a',
  borderRadius: 12,
  boxShadow: '0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3)',
}
        

Data Visualization

Charts use Canvas 2D via CanvasChart.tsx + DrawChart.ts. D3 for data scaling.

Zone Distribution Bars

15%

35%

25%

15%

Intensity Bars

Easy

45%

Moderate

35%

Hard

20%

Score Ring

72 Score

SVG circular progress with gradient stroke.

stroke-dasharray / stroke-dashoffset for fill level.

Gradient: #4a9eff to #4cdd8a

Monthly Stacked Bars

Height: 130px container, max bar 110px

Easy

Moderate

Hard

Chart Colors

Line: #4a9eff

Bar fill: rgba(74,158,255,0.12)

Component Patterns

Spacing, layout, and structural conventions used in the desktop app.

Page Container

// Page container
{
  height: '100%',
  overflow: 'auto',
  padding: 32,
  maxWidth: 960,
  margin: '0 auto',
}
          

Card Grid

Card A

gap: 24px

Card B

gridTemplateColumns: '1fr 1fr'

Full-width Card

grid-column: span 2

// Card grid
{
  display: 'grid',
  gap: 24,
}

// Two-column
{
  gridTemplateColumns: '1fr 1fr',
}
        

Settings Row (SettingsPage Pattern)

FTP

Functional Threshold Power

watts

ERG Mode

Auto-adjust trainer resistance

Display Units

Shadows

Dark theme shadows are heavier to remain visible against dark surfaces.

Dropdown

0 8px 32px rgba(0,0,0,0.5),
0 2px 8px rgba(0,0,0,0.3)

Toggle Active

0 1px 3px rgba(0,0,0,0.2)

Tooltip

0 4px 16px rgba(0,0,0,0.4)

TrainerDay Desktop Style Guide

Home Shared Web Mobile Marketing