色

墨(#3B4252)と水色(#88C0D0)の 2 つで足りる。面は影でなく線で分け、状態の色には必ず言葉を添える。ライト・ダークとも、文字と地の組み合わせは 4.5:1 以上(スクリプトで検査)。

値か変数名を押すとコピーできる。対比は WCAG のコントラスト比(文字 4.5 以上、枠・フォーカス 3 以上)。

トークン	light	dark	対比	使いどころ
`page`	`#f8f9fa`	`#2e3440`		ページの地。画面全体の背景。
`surface`	`#ffffff`	`#3b4252`		カード・表・入力欄の面。page の上に置き、境界は line の 1px で分ける(影は使わない)。
`surface-sunken`	`#eef1f5`	`#353b4a`		一段沈んだ面。表の見出し行、コードの背景、選択中の行。
`ink`	`#3b4252`	`#d8dee9`	light 9.5 dark 9.2 対 page	本文の文字。page と surface の上に置く(light 9.5:1、dark 7.4:1)。ロゴの墨と同じ色。
`ink-strong`	`#2e3440`	`#eceff4`	light 11.8 dark 10.8 対 page	見出し・KPI の数字・主ボタンの文字など、本文より強く出したい文字。page と surface の上。
`ink-muted`	`#4c566a`	`#a8b1c2`	light 7.0 dark 5.8 対 page	補足の文字。項目名、表の見出し、説明文。page と surface の上(light 7.0:1、dark 4.7:1)。
`ink-faint`	`#5f6a82`	`#a8b0c0`	light 5.1 dark 5.7 対 page	最も弱い文字。日時、ID、単位。page と surface の上で 4.5:1 を保つ最小の濃さ。これより薄い文字は使わない。
`line`	`#d8dee9`	`#4c566a`		面を分ける罫線。カードの縁、表の行間、区切り。意味を持たない飾りの線なのでコントラストは求めない。
`line-strong`	`#8690a3`	`#8f99ab`	light 3.2 dark 3.5 対 surface	入力欄・チェックボックスなど操作対象の縁(surface の上で 3:1 以上)。
`accent`	`#88c0d0`	`#88c0d0`		差し色。ロゴの点、選択範囲、進捗の塗り、強調の下線。文字には使わない(白地で 2:1)。塗りの上の文字は on-accent。
`on-accent`	`#2e3440`	`#2e3440`	light 6.2 dark 6.2 対 accent	accent の塗りの上に置く文字(6.2:1)。
`accent-soft`	`#e3f0f4`	`#2f4752`		accent の薄い面。選択中のカード、ハイライト、今日の列。上の文字は ink。
`link`	`#2b6e85`	`#88c0d0`	light 5.4 dark 6.2 対 page	リンクの文字。page と surface の上(light 5.7:1、dark 5.0:1)。下線は hover で出す。
`primary`	`#3b4252`	`#eceff4`		主ボタンの塗り。画面に 1 つだけ。上の文字は on-primary。
`on-primary`	`#ffffff`	`#2e3440`	light 10.1 dark 10.8 対 primary	primary の塗りの上の文字(10:1 / 15:1)。
`focus`	`#3f6a96`	`#88c0d0`	light 5.4 dark 6.2 対 page	キーボード操作のフォーカス輪。2px の実線、page と surface の上で 3:1 以上(light 5.7:1、dark 6.2:1)。
`ok-ink`	`#3e6b2e`	`#a3be8c`	light 5.3 dark 5.1 対 ok-soft	完了・保存済み・正常の文字と点。ok-soft の上(5.3:1 / 5.0:1)。必ず言葉を添える。
`ok-soft`	`#e6efdd`	`#36432f`		完了・正常の面。状態ピルの地。
`warn-ink`	`#7a5a12`	`#ebcb8b`	light 5.4 dark 6.6 対 warn-soft	要確認・期限近し・待ちの文字と点。warn-soft の上(5.4:1 / 5.9:1)。
`warn-soft`	`#f7ebcf`	`#4a3f27`		要確認・待ちの面。
`danger-ink`	`#9e3a42`	`#e09098`	light 5.2 dark 4.8 対 danger-soft	失敗・期限切れ・取り消しの文字と点。危険なボタンの縁と文字。danger-soft の上(5.2:1 / 4.9:1)。
`danger-soft`	`#f3dee0`	`#4a3238`		失敗・期限切れの面。
`info-ink`	`#2e5e8a`	`#8fb0d0`	light 5.5 dark 4.8 対 info-soft	進行中・お知らせの文字と点。info-soft の上(5.5:1 / 5.1:1)。
`info-soft`	`#dfe8f2`	`#2f3e52`		進行中・お知らせの面。

影#

面は影ではなく line の 1px で分ける。影は浮いているもの(メニュー、ダイアログ)にだけ使う。

shadow-popメニュー、ポップオーバー、ダイアログ。