カラー

比率は Rock 65% / Idea 25% / Accent 10%。Accent を使わない gov パターンでは、Accent の分を Rock に回す（Rock 75% / Idea 25%）。パレット外の色は使わない。

ブランド色（ロゴ）

ロゴ（assets/logo/）の指定色です。パレットはこの3色を基準に作っています。

ロゴ	値	パレット上の位置
ORANGE	#FF5500	idea-500 と同じ
PURPLE	#6B39FF	technology-600 と同じ
WORDMARK	#111111	rock-900 と同じ

White

トークン	値	用途
white	#ffffff	カード・表の地、オレンジ地の上の文字

Idea（オレンジ。ブランド）

トークン	値	用途
idea-50	#fff6f4	淡い塗り（核メッセージの地）
idea-100	#feebe5	バッジ背景
idea-200	#ffd3c5	—
idea-300	#ffb59d	矢印・装飾線（文字には使わない）
idea-400	#ff8860	ダーク背景上の強調
idea-500	#ff5500	基準色（ロゴのオレンジ）。図の主役（文字の地には使わない）。1枚1〜2か所まで。dark：主ボタンの地（rock-900 の文字）
idea-600	#e24d00	表紙の地。白背景上の大きな強調（大きな数字・カード見出し以上の太字）
idea-700	#c33f00	アプリ画面の主ボタンの地（白文字 約5.2:1）
idea-800	#9d3100	白・淡いオレンジ上の文字（本文サイズの強調を含む）。アプリ画面の主ボタンの hover
idea-900	#7f2907	淡いオレンジ上の太字
idea-950	#441302	—

Technology（パープル）

Accent の1系統です（下の「Accent」）。

トークン	値	用途
technology-50	#f3f4fe	—
technology-100	#eaeaff	—
technology-200	#d7d8ff	—
technology-300	#bab9ff	—
technology-400	#968eff	dark の文字・線
technology-500	#7a62ff	塗り・線のみ
technology-600	#6b39ff	文字。ロゴのパープル
technology-700	#5e28e8	—
technology-800	#4e24c1	—
technology-900	#3f239b	—
technology-950	#281467	—

Rock（ニュートラル）

色みのない無彩色のグレーです。rock-900 はロゴの文字色と同じ値です。

トークン	値	用途
rock-50	#fafafa	スライド背景
rock-100	#f5f5f5	カード背景
rock-200	#e5e5e5	罫線・カード枠
rock-300	#d4d4d4	dark：補足・サブメッセージの文字
rock-400	#a3a3a3	装飾のみ（文字には使わない）
rock-500	#737373	注釈・フッター
rock-600	#525252	補足・サブメッセージ
rock-700	#404040	dark：罫線・カード枠（文字には使わない）
rock-800	#262626	本文
rock-900	#111111	見出し（ロゴの文字色）。dark：カード・スライド背景
rock-950	#0a0a0a	dark：アプリ画面の最背面

Accent（比較・注意喚起のみ）

technology（パープル。上の「Technology」）、forest（緑）、lava（赤）の3系統。用途が「—」の段階は、まだ用途を決めていない予備です。

Forest（緑）

トークン	値	用途
forest-50	#f2fcf3	—
forest-100	#dcfce7	淡い地
forest-200	#c5f5cc	—
forest-300	#94eda5	—
forest-400	#4ade80	dark の文字
forest-500	#26c55d	—
forest-600	#16a34a	上昇・OK の大きな文字（白地 約3.3:1）
forest-700	#1d7f3c	上昇・OK の文字（light の --up。白地 約5.1:1）
forest-800	#206433	—
forest-900	#20522c	—
forest-950	#0e2d15	—

Lava（赤）

トークン	値	用途
lava-50	#fdf3f1	—
lava-100	#fee2e2	淡い地
lava-200	#fbccc6	—
lava-300	#faa79d	—
lava-400	#f87171	dark の文字
lava-500	#ef453d	—
lava-600	#dc2626	下落・NG
lava-700	#b81f1f	—
lava-800	#97201d	—
lava-900	#7c231e	—
lava-950	#430e0c	—

拡張色

ブランド色（idea・technology）、rock、forest・lava 以外の13系統です。Tailwind と同じくらいの色数をそろえるために用意しています。

• 用途はまだ決めていません。使うときは用途を決めて、ここに追記してから使います。
• 配色パターン（standard / gov / dark）と、上の比率（Rock / Idea / Accent）には含めません。
• コントラストは各段階の白地・dark の地との比で確認します（ドキュメントサイトのカラーで表示）。

Coral（赤みのピンク）

• coral-50 #fff1f1 / coral-100 #ffe4e5 / coral-200 #ffcdcf / coral-300 #ffa4a9 / coral-400 #ff697a / coral-500 #ff2457 / coral-600 #e50149 / coral-700 #c0023c / coral-800 #a30031 / coral-900 #8c082a / coral-950 #4e0214

Honey（琥珀）

• honey-50 #fffaf4 / honey-100 #fff0df / honey-200 #ffe0be / honey-300 #ffcd94 / honey-400 #ffb65b / honey-500 #f69e04 / honey-600 #cb8201 / honey-700 #9f6401 / honey-800 #7f5001 / honey-900 #6a4101 / honey-950 #3b2200

Sun（黄）

• sun-50 #fffaf0 / sun-100 #fff5e1 / sun-200 #ffebc0 / sun-300 #ffdb8d / sun-400 #ffc522 / sun-500 #eab305 / sun-600 #be9102 / sun-700 #906d01 / sun-800 #755801 / sun-900 #624900 / sun-950 #372801

Sprout（黄緑）

• sprout-50 #f4ffeb / sprout-100 #e5fecf / sprout-200 #cdfca1 / sprout-300 #aff65e / sprout-400 #94e701 / sprout-500 #83cc01 / sprout-600 #67a302 / sprout-700 #4e7c00 / sprout-800 #3d6301 / sprout-900 #35530e / sprout-950 #1a2e02

Fern（青緑）

• fern-50 #ecfdf4 / fern-100 #d0fae4 / fern-200 #a6f4cd / fern-300 #64e9b0 / fern-400 #05d293 / fern-500 #04b981 / fern-600 #049668 / fern-700 #027852 / fern-800 #006041 / fern-900 #0b4e35 / fern-950 #062c1d

Lagoon（ターコイズ）

• lagoon-50 #f0fdfa / lagoon-100 #cbfbf2 / lagoon-200 #94f7e7 / lagoon-300 #44ecd7 / lagoon-400 #08d2be / lagoon-500 #06b8a6 / lagoon-600 #019586 / lagoon-700 #01776b / lagoon-800 #005f55 / lagoon-900 #0f4f47 / lagoon-950 #052f2a

Glacier（水色）

• glacier-50 #f1fcff / glacier-100 #d8f7ff / glacier-200 #b2efff / glacier-300 #75e5ff / glacier-400 #04d0f1 / glacier-500 #03b6d4 / glacier-600 #0492ab / glacier-700 #047689 / glacier-800 #026071 / glacier-900 #01505f / glacier-950 #01353f

Lake（空色）

• lake-50 #f0f9ff / lake-100 #dff2fe / lake-200 #bde5ff / lake-300 #87d1ff / lake-400 #2fb9ff / lake-500 #03a5e9 / lake-600 #0286be / lake-700 #016b99 / lake-800 #025a81 / lake-900 #014b6d / lake-950 #003048

Ocean（青）

• ocean-50 #f0f6ff / ocean-100 #dce9ff / ocean-200 #c3daff / ocean-300 #9cc2ff / ocean-400 #669fff / ocean-500 #3380ff / ocean-600 #0164ee / ocean-700 #0055cd / ocean-800 #0045aa / ocean-900 #063c8e / ocean-950 #0b2755

Twilight（藍）

• twilight-50 #edf2fe / twilight-100 #dee8ff / twilight-200 #c2d4ff / twilight-300 #9bb7ff / twilight-400 #698eff / twilight-500 #4569ff / twilight-600 #2d45f9 / twilight-700 #2538d9 / twilight-800 #1e32ad / twilight-900 #1e3287 / twilight-950 #111e4e

Iris（紫）

• iris-50 #fbf5fe / iris-100 #f5e7fd / iris-200 #eed3fd / iris-300 #e1affe / iris-400 #ce75fb / iris-500 #be3cf6 / iris-600 #aa02e3 / iris-700 #9100c2 / iris-800 #7a00a4 / iris-900 #620f83 / iris-950 #43005d

Orchid（赤紫）

• orchid-50 #fdf4fe / orchid-100 #fbe7fe / orchid-200 #f7cffd / orchid-300 #f3a8ff / orchid-400 #eb6eff / orchid-500 #e12bfb / orchid-600 #c402dc / orchid-700 #a400b9 / orchid-800 #870699 / orchid-900 #6f167c / orchid-950 #490253

Blossom（ピンク）

• blossom-50 #fef2f6 / blossom-100 #fee7ef / blossom-200 #ffcee0 / blossom-300 #ffa6ca / blossom-400 #ff63ad / blossom-500 #f6339b / blossom-600 #df0288 / blossom-700 #be0073 / blossom-800 #9e045f / blossom-900 #83134f / blossom-950 #4f062d

コントラスト（白黒印刷でも読めるように）

コントラスト比は、文字と背景の明るさの差です。白黒で印刷すると色の違いは消えて明るさの差だけが残るため、この比で判断します。

• 本文サイズ以下（30px未満）の文字：背景とのコントラスト比 4.5:1 以上。
• 大きな文字（30px以上の太字、40px以上の文字）：3:1 以上。
• 組み合わせの目安（白地・rock-50 地の上）：
  • 本文に使える：rock-500〜900、idea-800・900、technology-600、forest-700、lava-600
  • 大きな文字だけに使える：idea-600（約4.0:1）、forest-600（約3.3:1）
  • 文字に使えない：idea-50〜500、rock-400 以下、technology-500
• 白文字を置ける色地は idea-600（大きな文字のみ）と rock-900。idea-500 の地に文字を置かない（約3.2:1）。
• 色だけで意味を区別しない。forest / lava、比較の2色などは、記号（○×）・ラベル・線の種類を併用する。
• 淡い色の地（idea-50・100、rock-100、technology-100）どうしは、白黒では見分けにくい。区別が必要なときは枠線を付ける。

dark（rock-900 / rock-950 地）でのコントラスト

• 本文に使える：rock-50〜400、idea-300・400、technology-400、forest-400、lava-400（いずれも 6:1 以上）
• 大きな文字だけに使える：idea-500（約5.9:1 だが面積が大きいと眩しいため）、idea-600（約4.8:1）
• 文字に使えない：rock-500 以下の濃さ、idea-50〜100 の塗り、technology-500
• 罫線は rock-700。rock-800 のカードを rock-900 の上に置くときは枠線を付けなくてよいが、白黒印刷の資料では付ける。

意味トークン（light / dark 共通の名前）

部品・画面は色名ではなく意味トークンで書きます。既定は light で、dark の指定がある場合だけ data-theme="dark" を付けます。付けた要素以下で dark の値に切り替わります。

トークン	light	dark	用途
--bg	rock-50	rock-950	画面・スライドの最背面
--surface	white	rock-900	カード・表の地
--surface-2	rock-100	rock-800	一段沈めた地（グレーのカード、入力欄）
--line	rock-200	rock-700	罫線・枠
--heading	rock-900	rock-50	見出し
--text	rock-800	rock-200	本文
--text-sub	rock-600	rock-300	補足
--text-note	rock-500	rock-400	注釈・フッター
--accent	idea-600	idea-400	強調の塗り・線
--primary / --primary-hover	idea-700 / idea-800	idea-500 / idea-400	主ボタン・選択中の地、その hover
--on-primary	white	rock-950	--primary の上の文字
--accent-text	idea-800	idea-300	本文サイズの強調文字
--accent-bg	idea-50	rock-800	核メッセージ・バッジの地
--up / --down	forest-700 / lava-600	forest-400 / lava-400	上昇・下落、OK・NG
--info	technology-600	technology-400	比較・情報
--chart-1〜4	idea-500 / technology-500 / rock-400 / idea-800	idea-400 / technology-400 / rock-400 / idea-300	グラフの系列。4系列を超えない

禁止

• 白・淡い背景の文字に idea-50〜500 を使う（文字に使えるのは idea-600 以上の濃さ。idea-600 は大きな文字のみ）
• オレンジ背景に黒文字（白か idea-900）
• 色の付いた背景に薄い文字（白黒印刷で読めない）
• 青みのあるグレー、クリーム・ベージュの背景
• グラデーション、ネオン、3D
• dark で純黒（#000000）の背景、純白の本文（rock-950 / rock-200 を使う）
• 見出し下のアクセントライン、装飾ストライプ