DESIGN
UIカタログ
ちいつる の全ツールが使うデザイントークンと部品の一覧。迷ったらここに戻る。
色
意味で選ぶ。藍は操作できるもの、朱は負値とエラーにだけ使う。
paper
ページ背景
surface
カード・入力欄の面
ink
本文テキスト
steel
補助テキスト
line
罫線・枠線
accent
操作・強調（藍）
negative
負値・エラー（朱）
タイポグラフィ
文章は IBM Plex Sans JP、数字とコードは IBM Plex Mono。数字は常に tabular-nums で桁を揃える。
見出し — 計算は道具だ
本文 — 困ったときにパッと使う。説明は短く、数字は正確に。
補助 — 入力のヒントや注意書き。
1,234,567.89 — 数字は等幅
Readout（計算結果）
全ツール共通の答えの出し方。主結果は大きく1つ、副次結果はリストで。
- 合計
- 29,400円
- 端数
- -200円
- 人数
- 7人
入力
数値入力は右寄せ等幅 + 単位付き。
半角数字で入力
0〜100 の範囲で入力してください
選択
Slider（スライダー）
連続値の調整に使う。±ボタンで1ステップずつ動かせ、操作中はつまみの上に値バブルが出る。css-generator・color-palette で使用。
Switch（トグルスイッチ）
切り替えた瞬間に効果が出る ON/OFF に使う（role=switch）。保存ボタンを伴う選択には Segmented やチェックボックスを使う。css-generator の各プロパティの有効/無効で使用。
Textarea（複数行入力）
長文・コードの貼り付けに使う。monospace 指定でコード向けの等幅になり、invalid で Input と同じ赤枠になる。
コードは monospace 指定で等幅に
ボタン
主操作はページに1つ。並べるときは右が主。
CopyButton（コピー）
このサイトで最頻の成功アクション。成功時は SFX＋「✓ コピー済み」、失敗時は「コピーできません」を表示する。値のコピーは独自実装せずこれを使う。
Accordion（折りたたみ）
詳細設定・補足をたたんでおく。details/summary ベースなので JS なしで開閉する。
詳細設定（クリックで開閉）
開いた中身はこの領域に入る。css-generator ではプロパティごとのスライダー群を、 学習ツールでは補足解説をこの形でたたんでいる。
ConfirmDialog（確認ダイアログ）
取り消せない操作の前に挟む。Esc・背景クリックでキャンセル。破壊的操作は danger で確定ボタンを朱色にする。
カードとノート
カード
入力グループや関連情報のまとまりに使う。
よくある質問
このカタログはどうやって使えばいいですか？
各セクション（色・タイポグラフィ・入力・選択・ボタン・カード）で、実際に使われているデザイントークンや部品の見た目を確認できます。新しいツールを作る・既存の画面デザインに迷ったときの参照集です。
「藍（accent）」と「朱（negative）」の色はどう使い分けますか？
藍色は操作できる要素（ボタン・リンクなど）専用、朱色は負の値やエラー表示専用です。この2色の意味を固定することで、画面を見ただけで「押せるもの」「注意が必要なもの」が直感的にわかるようにしています。
なぜライトモード固定なのですか？
色・スペース・フォントをすべてCSSカスタムプロパティで一元管理しつつ、現状は和ベージュを基調にしたライトモードのみに統一し、ツールごとの見た目のばらつきをなくしています。
フォントは何を使っていますか？
本文は IBM Plex Sans JP（日本語・英文）、数値・コードは等幅の IBM Plex Mono を使っています。数字はtabular-numsで桁を揃えて読みやすくしています。