Stride：フィットネスアプリ デザインシステム
アプリ · ダーク · 大胆 · フィットネスStride
大きな縦長の数字と、エネルギッシュなオレンジ。動くためのアプリに。
Stride は、リアルタイムの数字を最優先にします。ペース、距離、時間は大きな縦長書体で、アクションにはエネルギッシュなオレンジ、そして屋外でも夜でも読みやすいダークな背景。
プレビュー
下のトークンから、このシステム自身のフォントでリアルタイムに描画しています。
9:41
おはようございます今日週の目標5 日中 4 日次の予定朝のルーティン15 分チームのチェックイン30 分夜の振り返り10 分
ホーム統計プランマイページ9:41
今週合計7,842先週比 +12%セッションを開始
ホーム統計プランマイページ9:41
設定通知毎日のリマインダー単位メートル法
ホーム統計プランマイページプロジェクトで使う
これを Codex か Claude Code に貼り付けてください。エージェントが仕様を DESIGN.md として保存し、以降はそれに従います。
このプロジェクトでは Stride デザインシステムを使います。仕様は https://codexdesign.io/ja/design-systems/stride.md にあります。プロジェクトのルートに DESIGN.md として保存し、これからはすべての画面でそれに従ってください。
トークン
カラー
ライトテーマ
- 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)
ダークテーマ
- 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)
フォント
- 見出し
- Barlow Condensed · 700
- 本文
- Barlow · 500
- 等幅
- Barlow Condensed
タイプスケール
- display · 72/0.95 · -0.01emデザインで、画面はもっと使いやすくなる
- h1 · 34/1.05デザインで、画面はもっと使いやすくなる
- h2 · 24/1.15デザインで、画面はもっと使いやすくなる
- h3 · 19/1.25デザインで、画面はもっと使いやすくなる
- body · 16/1.45デザインで、画面はもっと使いやすくなる
- small · 13/1.35 · 0.02emデザインで、画面はもっと使いやすくなる
角の半径、余白、影
角の半径sm 12pxmd 14pxlg 16pxxl 20px
余白xs 4pxsm 8pxmd 16pxlg 24pxxl 48px
影なし：奥行きは枠線と色で表現します。
レイアウト
- タッチ領域
- 48px
- タブバー
- 64px、4 項目、icons with labels
- 画面の余白
- 20px
- ナビゲーション
- bottom tab bar; large title headers
- 数字
- tabular, condensed for live metrics
向いている用途
- ランニングとサイクリングのアプリ
- ワークアウトとジムの記録アプリ
- 習慣と目標のアプリ
- スポーツのダッシュボード
やること・やらないこと
- 重要な数字を、画面でいちばん大きな要素にする。
- プライマリボタンは画面の下半分に置く。
- オレンジの上に小さな文字を載せない。
- 1 画面でアクセントカラーを 2 色より多く使わない。