カラー
プロダクト UI の色は、すべてセマンティックカラー（用途で名前が付いた色）で指定する。ブランドカラーそのものの定義は How we look › Color が正本。
使い方の規則
- 色は用途の名前で呼ぶ（例: ボタンの背景は
bg-fill-brand。orange-600や#f14c00を直接書かない） - ライト / ダークの値はトークン自身が持っている。画面側でモード分岐を書かない（ライトとダーク）
- ここにない色が必要になったら、画面に直接色を置かず、デザインシステムにトークンを追加する
オレンジスケール
ブランドカラー #F14C00 を 600 に置いた 11 段。画面から直接使わず、下のセマンティックカラー経由で使う。値はクリックでコピーできます。
600 = ブランドカラー（How we look › Color が正本）
セマンティックカラー
全 57 個。ライト列は白、ダーク列は暗い背景（bg-default のダーク値）の上に表示している。トークン名・値はクリックでコピーできます。
背景 23
トークン ライト ダーク 用途
ページ全体の背景（基本的に使わない）
カード・ダイアログなどの表面
サーフェス要素のホバー（bg-surface と組み合わせて使う）
サイドバー・ヘッダーなど、背景色で領域の境界を示す面
セカンダリサーフェスのホバー
ボタン・入力欄など操作できる要素の背景
フィル要素のホバー（bg-fill と組み合わせて使う）
非アクティブなボタン、セカンダリ要素
セカンダリフィルのホバー
無効化状態・控えめな背景
ミュート背景のホバー
プライマリアクション、CTA ボタン
ブランド背景のホバー
削除など危険な操作のボタン
危険な操作のホバー
薄いオレンジの背景（ブランド色の約 10% 相当） パレットを介さない直値
薄いオレンジ背景のホバー（約 20% 相当） パレットを介さない直値
成功メッセージの背景
警告メッセージの背景
情報メッセージの背景 青を使わない方針のため、色の振り替えを検討中
エラーメッセージの背景
エラー背景のホバー
親の色を問わず視認できる半透明の入力背景 半透明。下にある色と重なって見える
文字 19
トークン ライト ダーク 用途
主要なテキスト（見出し・本文・ラベル）
副次的なテキスト（説明文・補足情報）
控えめなテキスト（プレースホルダー・メタ情報）
無効化されたテキスト
ブランド関連のテキスト（ロゴ・重要なリンク）
ブランドテキストのホバー
リンクテキスト
リンクのホバー
セカンダリリンク（ナビゲーション内のリンク）
セカンダリリンクのホバー
成功メッセージの文字
成功テキストのホバー
警告メッセージの文字
警告テキストのホバー
エラーメッセージの文字
エラーテキストのホバー ダークは元から視認性を高くしてあるため、ホバーでも色を変えない
情報メッセージの文字 青を使わない方針のため、色の振り替えを検討中
情報テキストのホバー 青を使わない方針のため、色の振り替えを検討中
濃い背景の上の文字（ブランドボタンの文字など）
枠線 12
トークン ライト ダーク 用途
基本の枠線（入力欄・カード・表）
より濃い枠線（アクティブな要素・強調したい境界）
目立たせたくない区切り線
無効化状態の枠線
ブランドカラーの枠線（フォーカス状態・選択状態）
ブランド枠線のホバー
危険な操作の枠線（エラー状態・削除確認）
危険な操作の枠線のホバー
控えめなエラーの枠線 半透明
成功メッセージの枠線
警告メッセージの枠線
情報メッセージの枠線 青を使わない方針のため、色の振り替えを検討中
アイコン（SVG の塗り） 3
トークン ライト ダーク 用途
SVG アイコンの標準の塗り
控えめな SVG アイコンの塗り
ブランドカラーの SVG アイコンの塗り
取得元: rimo/rimo-design-system（コミット 86b3159 / 2026-08-23 時点のスナップショット）