Chatter：メッセージングアプリ デザインシステム
アプリ · ライト · やわらか · ソーシャルChatter
丸いふきだし、親しみやすいティール、会話が主役。
Chatter は、人とメッセージを中心に据えます。白い画面、自分が送るメッセージにはティールのふきだし、返信には淡いグレーのふきだし、丸いアバター、ゆとりのある 22px の角丸。未読バッジや入力中の表示は、画面をスロットマシンのようにせず、はっきり伝わります。
プレビュー
下のトークンから、このシステム自身のフォントでリアルタイムに描画しています。
9:41
おはようございます今日週の目標5 日中 4 日次の予定朝のルーティン15 分チームのチェックイン30 分夜の振り返り10 分
ホーム統計プランマイページ9:41
今週合計7,842先週比 +12%セッションを開始
ホーム統計プランマイページ9:41
設定通知毎日のリマインダー単位メートル法
ホーム統計プランマイページプロジェクトで使う
これを Codex か Claude Code に貼り付けてください。エージェントが仕様を DESIGN.md として保存し、以降はそれに従います。
このプロジェクトでは Chatter デザインシステムを使います。仕様は https://codexdesign.io/ja/design-systems/chatter.md にあります。プロジェクトのルートに DESIGN.md として保存し、これからはすべての画面でそれに従ってください。
トークン
カラー
ライトテーマ
- background#FFFFFFoklch(1 0 0)
- foreground#14201Foklch(0.232 0.017 189.589)
- card#F4F7F7oklch(0.974 0.003 197.104)
- card-foreground#14201Foklch(0.232 0.017 189.589)
- popover#F4F7F7oklch(0.974 0.003 197.104)
- popover-foreground#14201Foklch(0.232 0.017 189.589)
- primary#0F7F81oklch(0.542 0.089 196.842)
- primary-foreground#FFFFFFoklch(1 0 0)
- secondary#E3F2F2oklch(0.95 0.016 196.89)
- secondary-foreground#0B5455oklch(0.406 0.065 196.352)
- muted#F1F5F5oklch(0.967 0.004 197.086)
- muted-foreground#56676Aoklch(0.501 0.021 209.449)
- accent#E8F2F2oklch(0.954 0.011 196.978)
- accent-foreground#14201Foklch(0.232 0.017 189.589)
- destructive#C4302Boklch(0.542 0.186 27.429)
- border#E1E8E8oklch(0.926 0.008 197.027)
- input#D2DCDCoklch(0.887 0.011 196.961)
- ring#0F7F81oklch(0.542 0.089 196.842)
- chart-1#0F7F81oklch(0.542 0.089 196.842)
- chart-2#F08A4Boklch(0.732 0.146 50.375)
- chart-3#5B7BE0oklch(0.608 0.157 268.254)
- chart-4#D9568Coklch(0.638 0.172 357.485)
- chart-5#3FA34Doklch(0.637 0.155 146.028)
ダークテーマ
- background#0E1414oklch(0.185 0.009 196.382)
- foreground#E6EEEEoklch(0.943 0.009 197.011)
- card#162020oklch(0.234 0.014 196.218)
- card-foreground#E6EEEEoklch(0.943 0.009 197.011)
- popover#162020oklch(0.234 0.014 196.218)
- popover-foreground#E6EEEEoklch(0.943 0.009 197.011)
- primary#4FC9CBoklch(0.769 0.107 196.682)
- primary-foreground#0E1414oklch(0.185 0.009 196.382)
- secondary#1C2828oklch(0.266 0.017 196.199)
- secondary-foreground#E6EEEEoklch(0.943 0.009 197.011)
- muted#182222oklch(0.242 0.014 196.254)
- muted-foreground#8EA2A3oklch(0.697 0.023 200.326)
- accent#1F2C2Coklch(0.281 0.018 196.192)
- accent-foreground#E6EEEEoklch(0.943 0.009 197.011)
- destructive#FF7A73oklch(0.733 0.164 24.948)
- border#253232oklch(0.305 0.017 196.275)
- input#2E3C3Coklch(0.344 0.018 196.33)
- ring#4FC9CBoklch(0.769 0.107 196.682)
- chart-1#4FC9CBoklch(0.769 0.107 196.682)
- chart-2#F5A56Eoklch(0.789 0.118 54.63)
- chart-3#8CA3F0oklch(0.729 0.115 270.659)
- chart-4#EE8BB3oklch(0.753 0.128 354.922)
- chart-5#74C982oklch(0.764 0.131 148.054)
フォント
- 見出し
- Plus Jakarta Sans · 700
- 本文
- Plus Jakarta 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 18pxmd 20pxlg 22pxxl 26px
余白xs 4pxsm 8pxmd 16pxlg 24pxxl 48px
影なし：奥行きは枠線と色で表現します。
レイアウト
- タッチ領域
- 48px
- タブバー
- 60px、4 項目、icons with labels; unread badges
- 画面の余白
- 16px
- ナビゲーション
- bottom tab bar; chat list to thread
- 数字
- proportional
向いている用途
- メッセージングとチャットのアプリ
- コミュニティとグループのアプリ
- マッチングとソーシャルのアプリ
- カスタマーサポートのチャット
やること・やらないこと
- 同じ人の連続したメッセージはまとめる。
- 入力欄は、キーボードの上に常に表示しておく。
- ティールは、自分のメッセージと主要なアクション以外に使わない。
- ふきだしに影やグラデーションを付けない。