Stride: Fitness App Design System
App · Dark · Bold · FitnessStride
Big condensed numbers and an energetic orange for movement apps.
Stride puts live numbers first: pace, distance and time in a big condensed face, an energetic orange for the action, and a dark background that reads well outdoors and at night.
Preview
Rendered live from the tokens below, in the system's own fonts.
9:41
Good morningTodayWeekly goal4 of 5 daysUp nextMorning routine15 minTeam check-in30 minEvening review10 min
HomeStatsPlanMe9:41
This weekTotal7,842+12% vs last weekStart session
HomeStatsPlanMe9:41
SettingsNotificationsDaily remindersUnitsMetric
HomeStatsPlanMeUse it in your project
Paste this into Codex or Claude Code. The agent saves the spec as DESIGN.md and follows it from then on.
This project uses the Stride design system. Its spec is at https://codexdesign.io/design-systems/stride.md. Save it as DESIGN.md in the project root and follow it for every screen from now on.
Tokens
Colors
Light theme
- background#F6F6F4oklch(0.973 0.003 106.448)
- foreground#111214oklch(0.182 0.004 264.459)
- card#FFFFFFoklch(1 0 0)
- card-foreground#111214oklch(0.182 0.004 264.459)
- popover#FFFFFFoklch(1 0 0)
- popover-foreground#111214oklch(0.182 0.004 264.459)
- primary#C83A08oklch(0.556 0.186 36.138)
- primary-foreground#FFFFFFoklch(1 0 0)
- secondary#ECECEAoklch(0.943 0.003 106.45)
- secondary-foreground#111214oklch(0.182 0.004 264.459)
- muted#EFEFEDoklch(0.952 0.003 106.45)
- muted-foreground#5B6068oklch(0.487 0.014 259.822)
- accent#E7E7E4oklch(0.927 0.004 106.477)
- accent-foreground#111214oklch(0.182 0.004 264.459)
- destructive#C0182Foklch(0.519 0.197 22.16)
- border#DEDEDBoklch(0.9 0.004 106.48)
- input#D0D0CCoklch(0.856 0.005 106.514)
- ring#C83A08oklch(0.556 0.186 36.138)
- chart-1#C83A08oklch(0.556 0.186 36.138)
- chart-2#0F9C8Coklch(0.623 0.109 182.094)
- chart-3#C99400oklch(0.699 0.144 82.914)
- chart-4#4B5BD6oklch(0.53 0.188 272.633)
- chart-5#C2457Foklch(0.579 0.169 354.99)
Dark theme
- background#0D0E10oklch(0.164 0.005 264.443)
- foreground#F4F4F2oklch(0.967 0.003 106.449)
- card#17191Coklch(0.213 0.007 258.366)
- card-foreground#F4F4F2oklch(0.967 0.003 106.449)
- popover#17191Coklch(0.213 0.007 258.366)
- popover-foreground#F4F4F2oklch(0.967 0.003 106.449)
- primary#FF5B1Foklch(0.683 0.21 37.964)
- primary-foreground#0D0E10oklch(0.164 0.005 264.443)
- secondary#22252Aoklch(0.264 0.01 260.699)
- secondary-foreground#F4F4F2oklch(0.967 0.003 106.449)
- muted#1C1F23oklch(0.238 0.009 255.597)
- muted-foreground#9097A0oklch(0.674 0.016 254.645)
- accent#262A30oklch(0.284 0.012 258.372)
- accent-foreground#F4F4F2oklch(0.967 0.003 106.449)
- destructive#FF4D6Aoklch(0.678 0.213 15.77)
- border#2A2E34oklch(0.3 0.012 258.371)
- input#33383Foklch(0.339 0.014 256.774)
- ring#FF5B1Foklch(0.683 0.21 37.964)
- chart-1#FF5B1Foklch(0.683 0.21 37.964)
- chart-2#3DD6C4oklch(0.794 0.127 183.43)
- chart-3#FFC53Doklch(0.854 0.157 84.13)
- chart-4#7C8CFFoklch(0.681 0.169 275.032)
- chart-5#FF7AB6oklch(0.75 0.173 353.77)
Fonts
- Headings
- Barlow Condensed · 700
- Body
- Barlow · 500
- Monospace
- Barlow Condensed
Type scale
- display · 72/0.95 · -0.01emThe quick brown fox
- h1 · 34/1.05The quick brown fox
- h2 · 24/1.15The quick brown fox
- h3 · 19/1.25The quick brown fox
- body · 16/1.45The quick brown fox
- small · 13/1.35 · 0.02emThe quick brown fox
Radius, spacing and shadow
Corner radiussm 12pxmd 14pxlg 16pxxl 20px
Spacingxs 4pxsm 8pxmd 16pxlg 24pxxl 48px
ShadowNone: depth comes from borders and color.
Layout
- Touch targets
- 48px
- Tab bar
- 64px, 4 items, icons with labels
- Screen padding
- 20px
- Navigation
- bottom tab bar; large title headers
- Numerals
- tabular, condensed for live metrics
Best for
- Running and cycling apps
- Workout and gym trackers
- Habit and goal apps
- Sports dashboards
Do's and don'ts
- Do make the key number the largest element on the screen.
- Do keep primary buttons in the bottom half of the screen.
- Don't put small text on orange.
- Don't use more than two accent colors on one screen.