Stride: 피트니스 앱 디자인 시스템
App · Dark · Bold · FitnessStride
움직이는 앱을 위한 큼직한 콘덴스드 숫자와 에너지 넘치는 주황.
Stride는 실시간 숫자를 가장 앞에 둡니다. 페이스, 거리, 시간을 큼직한 콘덴스드 서체로, 행동에는 에너지 넘치는 주황, 야외와 밤에도 잘 읽히는 어두운 배경.
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/ko/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
- 러닝·사이클링 앱
- 운동과 헬스장 트래커
- 습관·목표 앱
- 스포츠 대시보드
Do's and don'ts
- 핵심 숫자를 화면에서 가장 큰 요소로 만드세요.
- 주요 버튼은 화면 아래쪽 절반에 두세요.
- 주황 위에 작은 글씨를 올리지 마세요.
- 한 화면에 포인트 색을 두 가지보다 많이 쓰지 마세요.