Hearth：スマートホームアプリ デザインシステム
アプリ · ダーク · 温かみ · スマートホームHearth
暗く静かなホーム画面にともる、温かいアンバーの光。
Hearth は、暗い部屋でランプをつけたような感覚です。温かみのあるチャコールの背景、オンのものすべてにアンバー、そして部屋の向こうからでも読める大きな丸いデバイスタイル。部屋は横並びのタブになり、温度は大きく安定した数字で表示されます。
プレビュー
下のトークンから、このシステム自身のフォントでリアルタイムに描画しています。
9:41
おはようございます今日週の目標5 日中 4 日次の予定朝のルーティン15 分チームのチェックイン30 分夜の振り返り10 分
ホーム統計プランマイページ9:41
今週合計7,842先週比 +12%セッションを開始
ホーム統計プランマイページ9:41
設定通知毎日のリマインダー単位メートル法
ホーム統計プランマイページプロジェクトで使う
これを Codex か Claude Code に貼り付けてください。エージェントが仕様を DESIGN.md として保存し、以降はそれに従います。
このプロジェクトでは Hearth デザインシステムを使います。仕様は https://codexdesign.io/ja/design-systems/hearth.md にあります。プロジェクトのルートに DESIGN.md として保存し、これからはすべての画面でそれに従ってください。
トークン
カラー
ライトテーマ
- background#F4F2EFoklch(0.962 0.005 78.298)
- foreground#1A1816oklch(0.211 0.005 67.551)
- card#FFFFFFoklch(1 0 0)
- card-foreground#1A1816oklch(0.211 0.005 67.551)
- popover#FFFFFFoklch(1 0 0)
- popover-foreground#1A1816oklch(0.211 0.005 67.551)
- primary#B85C00oklch(0.575 0.144 53.836)
- primary-foreground#FFFFFFoklch(1 0 0)
- secondary#ECE6DEoklch(0.927 0.013 75.363)
- secondary-foreground#1A1816oklch(0.211 0.005 67.551)
- muted#EEEAE5oklch(0.939 0.008 73.742)
- muted-foreground#5F5A53oklch(0.47 0.013 76.501)
- accent#E9E3DBoklch(0.918 0.013 75.362)
- accent-foreground#1A1816oklch(0.211 0.005 67.551)
- destructive#B3261Eoklch(0.501 0.178 28.705)
- border#DDD7CFoklch(0.882 0.013 75.357)
- input#CFC8BEoklch(0.836 0.016 77.055)
- ring#B85C00oklch(0.575 0.144 53.836)
- chart-1#B85C00oklch(0.575 0.144 53.836)
- chart-2#2F7FA8oklch(0.566 0.099 234.913)
- chart-3#4E9A5Foklch(0.622 0.117 149.263)
- chart-4#8A63D2oklch(0.591 0.165 297.305)
- chart-5#C2457Foklch(0.579 0.169 354.99)
ダークテーマ
- background#141312oklch(0.187 0.003 67.669)
- foreground#F1EDE8oklch(0.948 0.008 73.743)
- card#1D1B19oklch(0.224 0.005 67.572)
- card-foreground#F1EDE8oklch(0.948 0.008 73.743)
- popover#1D1B19oklch(0.224 0.005 67.572)
- popover-foreground#F1EDE8oklch(0.948 0.008 73.743)
- primary#FFB547oklch(0.824 0.149 73.346)
- primary-foreground#141312oklch(0.187 0.003 67.669)
- secondary#28251Foklch(0.266 0.012 84.577)
- secondary-foreground#F1EDE8oklch(0.948 0.008 73.743)
- muted#211F1Coklch(0.24 0.006 78.203)
- muted-foreground#A39C93oklch(0.696 0.015 74.37)
- accent#2A2723oklch(0.275 0.008 75.236)
- accent-foreground#F1EDE8oklch(0.948 0.008 73.743)
- destructive#FF7A6Boklch(0.732 0.165 28.31)
- border#302D29oklch(0.299 0.008 75.261)
- input#3A3631oklch(0.335 0.01 73.558)
- ring#FFB547oklch(0.824 0.149 73.346)
- chart-1#FFB547oklch(0.824 0.149 73.346)
- chart-2#6FB8E0oklch(0.75 0.093 233.888)
- chart-3#7CCB8Coklch(0.775 0.119 149.435)
- chart-4#B79BF0oklch(0.746 0.123 298.536)
- chart-5#F08AB0oklch(0.753 0.131 356.937)
フォント
- 見出し
- Outfit · 600
- 本文
- Outfit · 400
- 等幅
- JetBrains Mono
タイプスケール
- display · 56/1 · -0.02emデザインで、画面はもっと使いやすくなる
- h1 · 30/1.1 · -0.01emデザインで、画面はもっと使いやすくなる
- h2 · 22/1.2デザインで、画面はもっと使いやすくなる
- h3 · 17/1.3デザインで、画面はもっと使いやすくなる
- body · 16/1.5デザインで、画面はもっと使いやすくなる
- small · 13/1.4 · 0.01emデザインで、画面はもっと使いやすくなる
角の半径、余白、影
角の半径sm 18pxmd 20pxlg 22pxxl 26px
余白xs 4pxsm 8pxmd 16pxlg 24pxxl 48px
影なし：奥行きは枠線と色で表現します。
レイアウト
- タッチ領域
- 48px
- タブバー
- 64px、4 項目、icons with labels
- 画面の余白
- 20px
- ナビゲーション
- bottom tab bar; rooms as horizontal tabs
- 数字
- tabular for temperatures
向いている用途
- スマートホームと IoT 操作のアプリ
- サーモスタットと電力のアプリ
- 照明とセキュリティのアプリ
- 家電の連携アプリ
やること・やらないこと
- オンとオフが、部屋の向こうからでもわかるようにする。
- タップでデバイスを切り替え、長押しで操作パネルを開く。
- オンでもアクティブでもないものに、アンバーを使わない。
- デバイスの主な操作を、メニューの奥に隠さない。