Vinyl：音楽・ポッドキャストアプリ デザインシステム
アプリ · ダーク · 大胆 · 音楽Vinyl
まずジャケットアート。ホットピンクの再生ボタンと、聴くための暗い部屋。
Vinyl は、ジャケットアートに雰囲気を決めさせます。ほぼ黒の背景、大きな正方形のアートワーク、ホットピンクの再生ボタン、そして大胆で少し風変わりなタイトルを作る Syne。どの画面でもタブバーの上に居座るミニプレイヤーのおかげで、再生操作は常にワンタップです。
プレビュー
下のトークンから、このシステム自身のフォントでリアルタイムに描画しています。
9:41
おはようございます今日週の目標5 日中 4 日次の予定朝のルーティン15 分チームのチェックイン30 分夜の振り返り10 分
ホーム統計プランマイページ9:41
今週合計7,842先週比 +12%セッションを開始
ホーム統計プランマイページ9:41
設定通知毎日のリマインダー単位メートル法
ホーム統計プランマイページプロジェクトで使う
これを Codex か Claude Code に貼り付けてください。エージェントが仕様を DESIGN.md として保存し、以降はそれに従います。
このプロジェクトでは Vinyl デザインシステムを使います。仕様は https://codexdesign.io/ja/design-systems/vinyl.md にあります。プロジェクトのルートに DESIGN.md として保存し、これからはすべての画面でそれに従ってください。
トークン
カラー
ライトテーマ
- background#F7F6F4oklch(0.973 0.003 84.559)
- foreground#121212oklch(0.182 0 0)
- card#FFFFFFoklch(1 0 0)
- card-foreground#121212oklch(0.182 0 0)
- popover#FFFFFFoklch(1 0 0)
- popover-foreground#121212oklch(0.182 0 0)
- primary#D81B60oklch(0.574 0.218 7.849)
- primary-foreground#FFFFFFoklch(1 0 0)
- secondary#ECEAE6oklch(0.937 0.006 84.567)
- secondary-foreground#121212oklch(0.182 0 0)
- muted#EFEDEAoklch(0.947 0.005 78.298)
- muted-foreground#5E5B57oklch(0.473 0.007 75.349)
- accent#E8E5E1oklch(0.923 0.006 75.404)
- accent-foreground#121212oklch(0.182 0 0)
- destructive#B3261Eoklch(0.501 0.178 28.705)
- border#DEDBD6oklch(0.892 0.008 80.72)
- input#D0CCC6oklch(0.847 0.009 78.275)
- ring#D81B60oklch(0.574 0.218 7.849)
- chart-1#D81B60oklch(0.574 0.218 7.849)
- chart-2#2F6FD6oklch(0.557 0.172 259.651)
- chart-3#E0A43Aoklch(0.758 0.137 77.684)
- chart-4#18A0A0oklch(0.641 0.105 194.845)
- chart-5#7C5CD6oklch(0.569 0.18 291.767)
ダークテーマ
- background#0A0A0Boklch(0.145 0.002 286.131)
- foreground#F2F2F3oklch(0.961 0.001 286.375)
- card#141416oklch(0.192 0.004 286.018)
- card-foreground#F2F2F3oklch(0.961 0.001 286.375)
- popover#141416oklch(0.192 0.004 286.018)
- popover-foreground#F2F2F3oklch(0.961 0.001 286.375)
- primary#FF4F8Boklch(0.688 0.215 4.087)
- primary-foreground#0A0A0Boklch(0.145 0.002 286.131)
- secondary#1D1D20oklch(0.232 0.006 285.946)
- secondary-foreground#F2F2F3oklch(0.961 0.001 286.375)
- muted#18181Boklch(0.21 0.006 285.885)
- muted-foreground#9A9AA2oklch(0.689 0.012 286.091)
- accent#222226oklch(0.254 0.007 285.856)
- accent-foreground#F2F2F3oklch(0.961 0.001 286.375)
- destructive#FF6B5Eoklch(0.709 0.183 27.67)
- border#26262Aoklch(0.27 0.007 285.898)
- input#303035oklch(0.311 0.009 285.874)
- ring#FF4F8Boklch(0.688 0.215 4.087)
- chart-1#FF4F8Boklch(0.688 0.215 4.087)
- chart-2#6FA0FFoklch(0.713 0.149 262.556)
- chart-3#FFC24Doklch(0.849 0.147 80.441)
- chart-4#3DD6C4oklch(0.794 0.127 183.43)
- chart-5#B79BFFoklch(0.754 0.143 295.667)
フォント
- 見出し
- Syne · 700
- 本文
- Manrope · 500
- 等幅
- JetBrains Mono
タイプスケール
- display · 48/1 · -0.02emデザインで、画面はもっと使いやすくなる
- h1 · 32/1.05 · -0.01emデザインで、画面はもっと使いやすくなる
- h2 · 22/1.2デザインで、画面はもっと使いやすくなる
- h3 · 17/1.3デザインで、画面はもっと使いやすくなる
- body · 15/1.5デザインで、画面はもっと使いやすくなる
- small · 12/1.4 · 0.02emデザインで、画面はもっと使いやすくなる
角の半径、余白、影
角の半径sm 8pxmd 10pxlg 12pxxl 16px
余白xs 4pxsm 8pxmd 16pxlg 24pxxl 48px
影なし：奥行きは枠線と色で表現します。
レイアウト
- タッチ領域
- 48px
- タブバー
- 60px、4 項目、icons with labels; mini player above tab bar
- 画面の余白
- 16px
- ナビゲーション
- bottom tab bar with a persistent mini player
- 数字
- tabular for time
向いている用途
- 音楽ストリーミングアプリ
- ポッドキャストとオーディオブックのプレイヤー
- ラジオと DJ のアプリ
- アーティストとレーベルのアプリ
やること・やらないこと
- ジャケットアートを、各画面でいちばん大きな要素にする。
- 再生中の画面以外では、ミニプレイヤーを常に表示しておく。
- 再生、いいね、録音以外にピンクを使わない。
- Syne を 17px より小さくしない。それより小さい文字は Manrope の役目。