RS Design System v2 · Creative Kit
量産環境 — アイコン / データ可視化 / イラスト

Creative-at-scale — 品質を落とさず量産できる環境

計器盤の誠実を、
量産できる形に。

アイコンは Lucide を 1.5px stroke に正規化（Polaris/Primer が収束した BtoB 精密標準）。データ可視化は token 駆動の系列色 × 数値主役の taste。イラストは 3文脈限定で写真（人の温度）と機能分担。すべて DTCG token から生成し、1つのスプライト・1つの theme で全接点に配れる。
← Foundation（トークン / 色 / タイポ / コンポーネント）に戻る

1 · アイコン体系（Lucide 1.5px）

単色・線 1.5px・24 グリッド。currentColor で文字色に追従、サイズは token で 4 段。<use href="rs-icons-sprite.svg#rs-i-phone"/> で参照するだけ — 追加はビルドスクリプトに名前を足して再ビルド。

サイズスケール — --icon-size-xs/sm/md/lg（14 / 16 / 20 / 24）
xs 14
sm 16
md 20
lg 24
teal accent
ナビ・構造
アクション
状態・フィードバック
データ・計器盤（主役）
営業・現場

2 · データ可視化（数値が主役）

系列色は --viz-cat-1..8（teal アンカー・OKLCH・light/dark 追従）。実装は Nivo（主）+ Recharts（軽量） に rs-nivo-theme.js を渡すだけ。数値は IBM Plex Mono の tabular、軸は淡いグレーで引く。

系列色パレット — --viz-cat-1..8
1 teal
2
3
4
5
6
7
8
週次 商談獲得数WEEK 05–12 · 目標 12
0 5 10 15 目標 12 8 10 9 11 12 10 13 14 W05W06W07 W08W09W10 W11W12
商談化しなかった理由
予算・時期 決裁者不在 ニーズ不一致 競合検討中 その他 42% 31% 14% 9% 4%
商談獲得（対目標）
14 /12
▲ 117%
商談化率
8.6%
▲ +2.1
平均リードタイム
6.2 日
▼ −0.8
ゼロ基線 — 棒は必ず 0 から。切り詰めない。
直接ラベル — 系列 1–3 本なら凡例を消し値を直付け。
数値は mono tabular — 桁が揃い計器盤になる。
teal は主役だけ — 注目系列に 1 色、他は slate で退く。

3 · イラスト方針（3文脈限定・写真と機能分担）

人の温度は写真が担う。イラストは 空状態 / オンボーディング / お知らせの3文脈に限定し、白＋グレー＋teal 1色のフラット線画で「主役を奪わない」（Polaris 方式）。UI の案内役に徹する。

例：空状態（データ未取得）

まだデータがありません。連携を設定すると計器盤が表示されます。

Do
  • 白＋グレー＋teal 1アクセント
  • フラット・幾何・1図版1メッセージ
  • 周囲UIより彩度を落とす
Don't
  • 抽象人物イラスト（Corporate Memphis）
  • UI装飾での多用・多色
  • 人の温度をイラストで代替（＝写真の役割）

アイコン = lucide-static (ISC) を icons/build-icons.mjs で 1.5px 正規化 → rs-icons-sprite.svg（59 icons・追加は名前を足して再ビルド）。データ可視化 theme = viz/rs-nivo-theme.js。系列色・軸・grid は DTCG token（tokens/*.json）が single source。