Calm：ウェルネスアプリ デザインシステム
アプリ · ライト · やわらか · セリフ体 · ヘルスケアCalm
やわらかなセージ、穏やかなセリフ体、息をつける余白。
Calm は、画面の速度を落とします。セージの背景、アクションには深いグリーン、タイトルには穏やかなセリフ体、そして要素どうしのたっぷりした余白。どの画面も、一度に求めることは 1 つだけです。
プレビュー
下のトークンから、このシステム自身のフォントでリアルタイムに描画しています。
9:41
おはようございます今日週の目標5 日中 4 日次の予定朝のルーティン15 分チームのチェックイン30 分夜の振り返り10 分
ホーム統計プランマイページ9:41
今週合計7,842先週比 +12%セッションを開始
ホーム統計プランマイページ9:41
設定通知毎日のリマインダー単位メートル法
ホーム統計プランマイページプロジェクトで使う
これを Codex か Claude Code に貼り付けてください。エージェントが仕様を DESIGN.md として保存し、以降はそれに従います。
このプロジェクトでは Calm デザインシステムを使います。仕様は https://codexdesign.io/ja/design-systems/calm.md にあります。プロジェクトのルートに DESIGN.md として保存し、これからはすべての画面でそれに従ってください。
トークン
カラー
ライトテーマ
- background#F1F3EEoklch(0.961 0.007 124.448)
- foreground#1E2A24oklch(0.272 0.02 163.043)
- card#FAFBF8oklch(0.986 0.004 121.559)
- card-foreground#1E2A24oklch(0.272 0.02 163.043)
- popover#FAFBF8oklch(0.986 0.004 121.559)
- popover-foreground#1E2A24oklch(0.272 0.02 163.043)
- primary#2F5446oklch(0.413 0.049 167.738)
- primary-foreground#F1F3EEoklch(0.961 0.007 124.448)
- secondary#DCE5DCoklch(0.913 0.015 145.447)
- secondary-foreground#1E2A24oklch(0.272 0.02 163.043)
- muted#E6EBE4oklch(0.934 0.011 136.561)
- muted-foreground#56655Coklch(0.491 0.023 159.104)
- accent#E3EADFoklch(0.929 0.016 133.827)
- accent-foreground#1E2A24oklch(0.272 0.02 163.043)
- destructive#A8392Aoklch(0.502 0.149 30.61)
- border#D3DCD1oklch(0.885 0.018 140.021)
- input#C9D3C6oklch(0.856 0.021 138.44)
- ring#2F5446oklch(0.413 0.049 167.738)
- chart-1#2F5446oklch(0.413 0.049 167.738)
- chart-2#B5784Aoklch(0.626 0.098 56.778)
- chart-3#5F86B8oklch(0.612 0.088 255.035)
- chart-4#9C6A8Foklch(0.589 0.082 336.495)
- chart-5#7A9A55oklch(0.645 0.102 129.249)
ダークテーマ
- background#121815oklch(0.202 0.011 163.644)
- foreground#E6ECE6oklch(0.937 0.01 145.493)
- card#18201Coklch(0.234 0.014 163.477)
- card-foreground#E6ECE6oklch(0.937 0.01 145.493)
- popover#18201Coklch(0.234 0.014 163.477)
- popover-foreground#E6ECE6oklch(0.937 0.01 145.493)
- primary#9CC5AEoklch(0.787 0.054 160.274)
- primary-foreground#121815oklch(0.202 0.011 163.644)
- secondary#1F2924oklch(0.27 0.017 163.393)
- secondary-foreground#E6ECE6oklch(0.937 0.01 145.493)
- muted#1C2420oklch(0.251 0.014 163.622)
- muted-foreground#93A39Aoklch(0.7 0.022 161.216)
- accent#222C27oklch(0.282 0.017 163.492)
- accent-foreground#E6ECE6oklch(0.937 0.01 145.493)
- destructive#E07A68oklch(0.689 0.13 31.169)
- border#2A352Foklch(0.317 0.018 161.322)
- input#33403Aoklch(0.358 0.02 165.566)
- ring#9CC5AEoklch(0.787 0.054 160.274)
- chart-1#9CC5AEoklch(0.787 0.054 160.274)
- chart-2#E0A577oklch(0.767 0.093 58.756)
- chart-3#93B4E0oklch(0.761 0.073 255.745)
- chart-4#D3A2C6oklch(0.769 0.075 336.085)
- chart-5#B4CF8Eoklch(0.818 0.092 126.655)
フォント
- 見出し
- Newsreader · 500
- 本文
- Figtree · 400
- 等幅
- Figtree
タイプスケール
- display · 44/1.1 · -0.015emデザインで、画面はもっと使いやすくなる
- h1 · 32/1.15 · -0.01emデザインで、画面はもっと使いやすくなる
- h2 · 24/1.25デザインで、画面はもっと使いやすくなる
- h3 · 19/1.3デザインで、画面はもっと使いやすくなる
- body · 17/1.6デザインで、画面はもっと使いやすくなる
- small · 14/1.45デザインで、画面はもっと使いやすくなる
角の半径、余白、影
角の半径sm 20pxmd 22pxlg 24pxxl 28px
余白xs 4pxsm 8pxmd 16pxlg 24pxxl 48px
影低く広がるやわらかな影。カードとシートにだけ使います。
レイアウト
- タッチ領域
- 48px
- タブバー
- 68px、3 項目、icons with labels, no badges
- 画面の余白
- 24px
- ナビゲーション
- bottom tab bar; one primary action per screen
- 数字
- proportional
向いている用途
- 瞑想と睡眠のアプリ
- ジャーナリングと気分記録のアプリ
- セラピーとヘルスケアのアプリ
- やさしい口調の習慣アプリ
やること・やらないこと
- 1 画面で求めるアクションは 1 つにする。
- セリフ体はタイトルと引用にだけ使う。
- 赤や緊急を知らせるバッジを使わない。
- すき間をすべて埋めない。余白もデザインの一部。