Boutique：ファッションショッピングアプリ デザインシステム
アプリ · ライト · 高級感 · セリフ体 · ECBoutique
端まで広がる写真、Bodoni のセリフ体、白地に黒。ショーウィンドウのように。
Boutique は、スマートフォンの上のショーウィンドウのように働きます。商品写真は端から端まで広がり、Bodoni Moda が名前とストーリーにファッション誌の声を与え、インターフェースは黒、白、温かみのあるニュートラルへと一歩下がります。価格は太字にせず、本文のウェイトのまま、控えめに。
プレビュー
下のトークンから、このシステム自身のフォントでリアルタイムに描画しています。
9:41
おはようございます今日週の目標5 日中 4 日次の予定朝のルーティン15 分チームのチェックイン30 分夜の振り返り10 分
ホーム統計プランマイページ9:41
今週合計7,842先週比 +12%セッションを開始
ホーム統計プランマイページ9:41
設定通知毎日のリマインダー単位メートル法
ホーム統計プランマイページプロジェクトで使う
これを Codex か Claude Code に貼り付けてください。エージェントが仕様を DESIGN.md として保存し、以降はそれに従います。
このプロジェクトでは Boutique デザインシステムを使います。仕様は https://codexdesign.io/ja/design-systems/boutique.md にあります。プロジェクトのルートに DESIGN.md として保存し、これからはすべての画面でそれに従ってください。
トークン
カラー
ライトテーマ
- background#FFFFFFoklch(1 0 0)
- foreground#111111oklch(0.178 0 0)
- card#F7F4F0oklch(0.968 0.006 75.407)
- card-foreground#111111oklch(0.178 0 0)
- popover#F7F4F0oklch(0.968 0.006 75.407)
- popover-foreground#111111oklch(0.178 0 0)
- primary#111111oklch(0.178 0 0)
- primary-foreground#FFFFFFoklch(1 0 0)
- secondary#EFEAE4oklch(0.939 0.01 72.659)
- secondary-foreground#111111oklch(0.178 0 0)
- muted#F3F0ECoklch(0.956 0.006 75.406)
- muted-foreground#615C57oklch(0.478 0.01 67.58)
- accent#EEE9E3oklch(0.936 0.01 72.659)
- accent-foreground#111111oklch(0.178 0 0)
- destructive#A3261Doklch(0.472 0.163 28.986)
- border#E2DDD6oklch(0.9 0.011 76.593)
- input#D1CBC2oklch(0.844 0.014 78.252)
- ring#111111oklch(0.178 0 0)
- chart-1#111111oklch(0.178 0 0)
- chart-2#B79E84oklch(0.715 0.047 68.066)
- chart-3#7A6555oklch(0.523 0.036 59.165)
- chart-4#5E6B5Coklch(0.512 0.028 141.437)
- chart-5#A3261Doklch(0.472 0.163 28.986)
ダークテーマ
- background#0F0F0Foklch(0.168 0 0)
- foreground#F2EEE9oklch(0.951 0.008 73.743)
- card#181716oklch(0.205 0.003 67.686)
- card-foreground#F2EEE9oklch(0.951 0.008 73.743)
- popover#181716oklch(0.205 0.003 67.686)
- popover-foreground#F2EEE9oklch(0.951 0.008 73.743)
- primary#F2EEE9oklch(0.951 0.008 73.743)
- primary-foreground#0F0F0Foklch(0.168 0 0)
- secondary#22201Eoklch(0.245 0.005 67.6)
- secondary-foreground#F2EEE9oklch(0.951 0.008 73.743)
- muted#1C1B19oklch(0.222 0.004 84.588)
- muted-foreground#A09A93oklch(0.689 0.012 71.844)
- accent#262422oklch(0.262 0.005 67.618)
- accent-foreground#F2EEE9oklch(0.951 0.008 73.743)
- destructive#F07167oklch(0.697 0.159 26.504)
- border#2E2C29oklch(0.294 0.006 78.234)
- input#383532oklch(0.331 0.007 67.593)
- ring#F2EEE9oklch(0.951 0.008 73.743)
- chart-1#F2EEE9oklch(0.951 0.008 73.743)
- chart-2#C4A68Aoklch(0.745 0.052 64.916)
- chart-3#9C8574oklch(0.633 0.038 58.478)
- chart-4#9DAA9Aoklch(0.723 0.027 139.828)
- chart-5#F07167oklch(0.697 0.159 26.504)
フォント
- 見出し
- Bodoni Moda · 500
- 本文
- Jost · 400
- 等幅
- JetBrains Mono
タイプスケール
- display · 48/1 · -0.01emデザインで、画面はもっと使いやすくなる
- h1 · 32/1.05デザインで、画面はもっと使いやすくなる
- h2 · 24/1.15デザインで、画面はもっと使いやすくなる
- h3 · 17/1.3 · 0.04emデザインで、画面はもっと使いやすくなる
- body · 15/1.55 · 0.01emデザインで、画面はもっと使いやすくなる
- small · 12/1.4 · 0.1emデザインで、画面はもっと使いやすくなる
角の半径、余白、影
角の半径sm 0pxmd 2pxlg 4pxxl 8px
余白xs 4pxsm 8pxmd 16pxlg 24pxxl 48px
影なし：奥行きは枠線と色で表現します。
レイアウト
- タッチ領域
- 48px
- タブバー
- 60px、5 項目、icons only; bag badge
- 画面の余白
- 16px
- ナビゲーション
- bottom tab bar; edge-to-edge product photos
- 数字
- proportional; prices in body weight
向いている用途
- ファッションとアパレルのストア
- ラグジュアリーとデザイナーズの中古販売
- ビューティーとジュエリーのショッピング
- ブランドのドロップとルックブック
やること・やらないこと
- 商品写真には、画面の全幅を使う。
- ブランド名とラベルは、字間を広げた小さな大文字で組む。
- セール価格以外では、価格を太字にしたり色を付けたりしない。
- グリッドをセールのバッジやステッカーで覆わない。