DESIGN
UIカタログ
Bucket の全ツールが使うデザイントークンと部品の一覧。迷ったらここに戻る。
色
意味で選ぶ。藍は操作できるもの、朱は負値とエラーにだけ使う。
paper
ページ背景
surface
カード・入力欄の面
ink
本文テキスト
steel
補助テキスト
line
罫線・枠線
accent
操作・強調（藍）
negative
負値・エラー（朱）
タイポグラフィ
文章は IBM Plex Sans JP、数字とコードは IBM Plex Mono。数字は常に tabular-nums で桁を揃える。
見出し — 計算は道具だ
本文 — 困ったときにパッと使う。説明は短く、数字は正確に。
補助 — 入力のヒントや注意書き。
1,234,567.89 — 数字は等幅
Readout（計算結果）
全ツール共通の答えの出し方。主結果は大きく1つ、副次結果はリストで。
支払額（1人あたり）
4,200円
- 合計
- 29,400円
- 端数
- -200円
- 人数
- 7人
入力
数値入力は右寄せ等幅 + 単位付き。
円
半角数字で入力
%
0〜100 の範囲で入力してください
選択
ボタン
主操作はページに1つ。並べるときは右が主。
カードとノート
カード
入力グループや関連情報のまとまりに使う。