Focus：タスク管理アプリ デザインシステム
アプリ · ライト · ミニマル · 生産性Focus
真っ白なページに青が 1 色。タスクとの間に、余計なものは何もない。
Focus は、タスク以外のものをすべて取り除きます。真っ白な画面、Instrument Sans、カードの代わりの細い区切り線、そして追加ボタンと今日に使う明るいブルー 1 色。タブはアイコンだけにして下部バーを静かに保ち、フローティングの追加ボタンで即座に書き留められます。
プレビュー
下のトークンから、このシステム自身のフォントでリアルタイムに描画しています。
9:41
おはようございます今日週の目標5 日中 4 日次の予定朝のルーティン15 分チームのチェックイン30 分夜の振り返り10 分
ホーム統計プランマイページ9:41
今週合計7,842先週比 +12%セッションを開始
ホーム統計プランマイページ9:41
設定通知毎日のリマインダー単位メートル法
ホーム統計プランマイページプロジェクトで使う
これを Codex か Claude Code に貼り付けてください。エージェントが仕様を DESIGN.md として保存し、以降はそれに従います。
このプロジェクトでは Focus デザインシステムを使います。仕様は https://codexdesign.io/ja/design-systems/focus.md にあります。プロジェクトのルートに DESIGN.md として保存し、これからはすべての画面でそれに従ってください。
トークン
カラー
ライトテーマ
- background#FFFFFFoklch(1 0 0)
- foreground#16181Doklch(0.209 0.01 268.187)
- card#FFFFFFoklch(1 0 0)
- card-foreground#16181Doklch(0.209 0.01 268.187)
- popover#FFFFFFoklch(1 0 0)
- popover-foreground#16181Doklch(0.209 0.01 268.187)
- primary#2F5BEAoklch(0.533 0.221 265.795)
- primary-foreground#FFFFFFoklch(1 0 0)
- secondary#F0F2F7oklch(0.961 0.007 268.547)
- secondary-foreground#16181Doklch(0.209 0.01 268.187)
- muted#F3F4F6oklch(0.967 0.003 264.542)
- muted-foreground#5B616Eoklch(0.492 0.022 265.817)
- accent#EEF1F7oklch(0.958 0.009 264.522)
- accent-foreground#16181Doklch(0.209 0.01 268.187)
- destructive#C8322Boklch(0.551 0.188 27.911)
- border#E4E6EBoklch(0.925 0.007 268.545)
- input#D5D8DFoklch(0.882 0.01 267.351)
- ring#2F5BEAoklch(0.533 0.221 265.795)
- chart-1#2F5BEAoklch(0.533 0.221 265.795)
- chart-2#E8743Boklch(0.685 0.16 44.716)
- chart-3#19A974oklch(0.652 0.139 161.399)
- chart-4#B455C8oklch(0.612 0.189 320.372)
- chart-5#D4A017oklch(0.735 0.146 84.267)
ダークテーマ
- background#101114oklch(0.178 0.006 271.042)
- foreground#EDEEF1oklch(0.949 0.004 271.368)
- card#16181Coklch(0.209 0.009 264.373)
- card-foreground#EDEEF1oklch(0.949 0.004 271.368)
- popover#16181Coklch(0.209 0.009 264.373)
- popover-foreground#EDEEF1oklch(0.949 0.004 271.368)
- primary#7D9BFFoklch(0.711 0.15 269.685)
- primary-foreground#101114oklch(0.178 0.006 271.042)
- secondary#1E2026oklch(0.244 0.012 270.896)
- secondary-foreground#EDEEF1oklch(0.949 0.004 271.368)
- muted#1A1C21oklch(0.227 0.01 268.232)
- muted-foreground#9298A5oklch(0.679 0.02 265.92)
- accent#22252Coklch(0.264 0.014 267.038)
- accent-foreground#EDEEF1oklch(0.949 0.004 271.368)
- destructive#FF7B72oklch(0.734 0.163 25.784)
- border#272A31oklch(0.285 0.014 267.079)
- input#30343Coklch(0.324 0.015 264.337)
- ring#7D9BFFoklch(0.711 0.15 269.685)
- chart-1#7D9BFFoklch(0.711 0.15 269.685)
- chart-2#FF9F6Boklch(0.79 0.133 48.496)
- chart-3#4ADE9Coklch(0.806 0.157 160.001)
- chart-4#D88BE6oklch(0.747 0.15 321.263)
- chart-5#F2CC5Boklch(0.857 0.137 90.603)
フォント
- 見出し
- Instrument Sans · 600
- 本文
- Instrument Sans · 400
- 等幅
- JetBrains Mono
タイプスケール
- display · 40/1.05 · -0.02emデザインで、画面はもっと使いやすくなる
- h1 · 30/1.1 · -0.01emデザインで、画面はもっと使いやすくなる
- h2 · 22/1.2デザインで、画面はもっと使いやすくなる
- h3 · 18/1.3デザインで、画面はもっと使いやすくなる
- body · 16/1.5デザインで、画面はもっと使いやすくなる
- small · 13/1.4デザインで、画面はもっと使いやすくなる
角の半径、余白、影
角の半径sm 8pxmd 10pxlg 12pxxl 16px
余白xs 4pxsm 8pxmd 16pxlg 24pxxl 48px
影なし：奥行きは枠線と色で表現します。
レイアウト
- タッチ領域
- 48px
- タブバー
- 60px、4 項目、icons only with active label
- 画面の余白
- 16px
- ナビゲーション
- bottom tab bar; floating add button
- 数字
- proportional
向いている用途
- ToDo とタスク管理アプリ
- プランナーとカレンダー
- メモとクイックキャプチャ
- チームのタスク・プロジェクトアプリ
やること・やらないこと
- タスクは、1 回のタップと 1 行で追加できるようにする。
- 完了したタスクは、すぐに消さず、グレーにフェードさせる。
- すべてのタスクをカードや影で包まない。
- 1 つのプロジェクトに複数の色を与えない。