Rimo のプロダクト画面をつくるための実用ガイド。実装で実際に使っている色・文字・余白などのトークンと、コンポーネントの一覧をここにまとめる。

ゴールは、誰もがこのガイドに従って「Rimo らしいプロダクト」を作れること。 読み手はデザイナー・エンジニア・AI エージェントを想定している。

ブランドとの関係

ブランド表現（広告・資料・コーポレートサイト）とプロダクト UI は、原則として別のルールセットを持つ。ただし次の 3 つだけは必ず一致させる。

一致させるもの	理由
ブランドカラー	色は最も速く伝わる識別要素。面をまたいで揺れると同一ブランドに見えない
ロゴ	形・余白・使用可否のルールに、面ごとの例外を作らない
言葉づかい	広告で語りかけた相手に、画面で別の人格が応対しない

それ以外——書体、影の使い方、余白の刻み、装飾の量——は、プロダクトに最適な答えを選んでよい。ロゴやカラーそのものの定義は How we look にある。

原則

Brand DNA（Human-Centered / Diverse / Efficient / Vibrant / Tech-Driven）を作業画面に落とすと、次の Do / Don’t になる。

原則	Do	Don’t
Efficient	主要な操作を 1 クリックで届く位置に置く。読み込み中も画面の骨格を先に見せる	演出のためのアニメーションを操作経路に挟む。余白のために 1 画面あたりの情報量を削る
Efficient	長い一覧はスクロール位置と絞り込み条件を保持する	画面遷移のたびに条件をリセットさせる
Human-Centered	自動生成した結果は、人が直せる形で提示する（編集・取り消しが常にある）	AI の出力を確定事項として提示し、修正手段を用意しない
Human-Centered	エラーは「何が起きたか」と「次に何をすればよいか」をセットで書く	「エラーが発生しました」だけを出す
Diverse	状態は色と形の両方で示す（色＋アイコン、色＋文言）	赤／緑の色差だけで成功・失敗を伝える
Diverse	日本語・英語で文字数が変わっても崩れない箱にする	ボタン幅を日本語の文字数に合わせて固定する

このセクションは実装と同期して常に更新中。値の正本はデザインシステム rimo-design-system にあり、ここにはそのスナップショットを掲載している。