Stride: sistema de diseño de app de fitness

App · Dark · Bold · Fitness

Stride

Grandes números condensados y un naranja enérgico para apps de movimiento.

Stride pone primero los números en directo: ritmo, distancia y tiempo en una gran tipografía condensada, un naranja enérgico para la acción y un fondo oscuro que se lee bien al aire libre y de noche.

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

HomeStatsPlanMe

9:41

This weekTotal7,842+12% vs last weekStart session

HomeStatsPlanMe

9:41

SettingsNotificationsDaily remindersUnitsMetric

HomeStatsPlanMe

Use 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/es/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

Stride: sistema de diseño de app de fitness

Preview

Use it in your project

Tokens

Colors

Light theme

Dark theme

Fonts

Type scale

Radius, spacing and shadow

Layout

Best for

Do's and don'ts

More design systems for apps