プロダクト UI の色・文字・余白などの決まりは、トークン（名前の付いた値）として管理している。画面を作るときは素の値を書かず、トークン名で指定する。

トークンの層

トークンは 4 つの層を経由して画面に届く。

層	例	役割
プリミティブ	orange-600 = #f14c00	素の値。ブランドカラーを起点に展開する
セマンティック	bg-fill-brand	用途で名前を付けたもの。ライト / ダークで別の値を持つ
エイリアス	—	セマンティック層をスタイル記述から呼び出すための名前
ユーティリティ	class="bg-fill-brand"	画面実装で直接使う最小単位のクラス

画面の実装で触ってよいのはセマンティック層より下だけ。 プリミティブの値（orange-600 や #f14c00）を画面から直接指定しない。ライト / ダークの切り替えとブランドカラーの更新は、この規律だけで成立する。

トークンの一覧

ページ	内容
カラー	セマンティックカラー全 57 個とオレンジスケール
タイポグラフィ	タイプスケールと OS 標準フォントの扱い
余白	4px 基準の刻みとよく使う値
角丸	角丸 6 段
影	影 7 種と使いどころ
画面幅	ブレークポイント 6 段

値の正本と同期

値の正本はデザインシステム rimo-design-system にある。このサイトに載せているのは手動同期のスナップショット（取得元コミット 86b3159）。トークンの実体・使用例は Storybook を参照（現在ホスティング準備中。公開後にここへ URL を記載する）。