表示モード
色
色は製品ごとに決めます。 主な色（ブランドの色）を全製品で一つにそろえることはしません。そのかわり、役割の色（文字・背景・線・リンク・成功・注意・危険）の名前・意味・決まりは全製品で共通にします。どの製品でも「危険の色の文字は、取り消せないことを伝えている」と読めるようにするためです。
全製品で共通の役割の色
| 役割 | 意味 | 色の系統 | 決まり |
|---|---|---|---|
背景 bg | 画面の地 | 白（暗い表示は暗い色） | |
面 surface | カード・まとまりの地 | 背景よりわずかに色が付く | |
線 border | 区切り線・枠 | 薄い灰色 | 入力欄の枠は背景と 3 : 1 以上 |
文字 text | 本文 | 濃い灰色（真っ黒にしない） | 背景・面と 4.5 : 1 以上 |
控えめな文字 text-muted | 補足・説明 | 中くらいの灰色 | 背景・面と 4.5 : 1 以上（これより薄い色は文字に使わない） |
主な色 primary | リンク・主な操作のボタン | 製品ごとのブランドの色 | 文字として 4.5 : 1 以上。ボタンの上の白い文字も 4.5 : 1 以上 |
成功 success | 完了・問題なし | 緑 | 文字として 4.5 : 1 以上 |
注意 warning | 気をつけてほしいこと | 橙・琥珀 | 文字として 4.5 : 1 以上（黄色は文字に使わない） |
危険 danger | 失敗・取り消せない操作 | 赤〜桃 | 文字として 4.5 : 1 以上 |
- 画面のコードでは、色の値を直接書かず、役割の名前で使います。製品ごとの値は、その製品の色の定義（デザイントークン）1 か所にだけ書きます。
- 成功・注意・危険の色の系統は全製品で同じにします（製品が変わっても、赤は危険、緑は成功）。正確な値は製品ごとでかまいません。
- 色だけで伝えません。言葉かアイコンを必ず添えます。
- 暗い表示のある製品は、役割ごとに暗い表示の値も決めます。
製品ごとの色
SymCore（Web・ブラウザ拡張・文書）
SymCore の色は 一つの基準の色（空色）から音の比率で色相を決める という考え方で作っています。どの色も同じ明るさの段を持つので、同じ段の色どうしは同じ重さに見えます。
暫定
この色の一式は暫定版です。値は製品の色の生成スクリプトから作られ、製品側が正です。
- 色相：基準の空色（224°）に、音の比率（1/1・16/15・4/3・3/2・8/5・5/3）を当てはめて、空色・青紫・桃・橙・黄・緑の 6 色を決めます。
- 明るさ：50 から 950 まで 11 段。段が同じなら、色が違っても明るさは同じです。
- 墨（グレー）：ほんの少しだけ暖かみのある灰色。文字・線・背景に使います。
| 役割 | 明るい表示 | 暗い表示 |
|---|---|---|
背景 bg | #ffffff 白 | #252422 墨 950 |
面 surface | #faf8f5 墨 50 | #2f2d2c 墨 900 |
線 border | #d2d1ce 墨 200 | #444240 墨 800 |
文字 text | #2f2d2c 墨 900 | #faf8f5 墨 50 |
控えめな文字 text-muted | #706e6c 墨 600 | #b9b7b5 墨 300 |
主な色 primary（link） | #01627b 空色 700 | #5dc6eb 空色 300 |
成功 success | #49612a 緑 700 | #a1c579 緑 300 |
注意 warning | #745016 橙 700 | #e1ad63 橙 300 |
危険 danger | #81424a 桃 700 | #f59aa3 桃 300 |
コードでは bg-sym-bg・text-sym-text・text-sym-link のように使います。どの文字の色も背景・面に対して 4.5 : 1 以上あることを、色を変えるたびに検査しています（いちばん差が小さいのは控えめな文字を面に置いたときの約 4.8 : 1）。
色の段
| 色 | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 空色 sky | #f2fafd | #d8f0f9 | #9fdbf3 | #5dc6eb | #40add1 | #1d94b7 | #027a9a | #01627b | #014a5e | #003342 | #012935 |
| 青紫 periwinkle | #f5f9ff | #e0ecfe | #b5d3ff | #8ab9fd | #72a0e2 | #5a87c8 | #486fa9 | #385988 | #294368 | #1b2e4a | #15243b |
| 桃 pink | #fef6f7 | #fde4e6 | #fbbfc4 | #f59aa3 | #da818a | #bf6973 | #a0545d | #81424a | #623137 | #462125 | #381a1d |
| 橙 orange | #fcf8f2 | #f7e9d7 | #eccb9f | #e1ad63 | #c7944a | #ad7b2f | #91651e | #745016 | #583c0f | #3e2908 | #322005 |
| 黄 yellow | #f9f9f2 | #ecedd8 | #d5d5a1 | #bebd66 | #a5a44d | #8d8b32 | #747322 | #5d5b19 | #464511 | #313009 | #262606 |
| 緑 green | #f6faf3 | #e5efdc | #c3dbab | #a1c579 | #89ac60 | #719348 | #5c7a37 | #49612a | #364a1e | #253313 | #1d280e |
| 墨 ink | #faf8f5 | #edebe8 | #d2d1ce | #b9b7b5 | #a09e9c | #888683 | #706e6c | #595856 | #444240 | #2f2d2c | #252422 |
16 進の値は、OKLCH という書き方の値から換算した目安です。
ロゴとアクセント
- ロゴの印は空色・桃・緑の 300 段（と橙）でできた「和音」です。印の外で、この 4 色を並べて飾りに使わないでください。
- アクセント：
#efa731明るい表示 #efa731、#eeec6b暗い表示 #eeec6b。目を引く必要があるごく一部（新着の印など）だけに使います。
SymVal（管理画面・デスクトップ・紹介サイト・説明書）
SymVal の製品は、ロゴの紺 #2b479e を中心にした色を使っています。今は製品ごと・画面ごとに値がばらついているので、下の表を今の値として載せ、ずれと直し方を書いています。
管理画面
| 役割 | 今の値 | 背景との差 | メモ |
|---|---|---|---|
背景 bg | #f8fafc | ||
面 surface | #ffffff | カード | |
線 border | #e2e8f0 | ||
文字 text | #0f172a | 17.9 : 1 | |
控えめな文字 text-muted | #64748b | 4.8 : 1 | もっと薄い #94a3b8（2.6 : 1）は文字に使わない |
主な色 primary | #2b479e | 8.4 : 1 | 新しいデザインでは #4065de（5.1 : 1）に移る途中 |
成功 success | #177a54 | 5.3 : 1 | |
注意 warning | #854f0b | 6.7 : 1 | |
危険 danger | #a32d2d | 7.1 : 1 |
暗い表示あり（自動・明るい・暗い）。色の定義が 3 か所に分かれているので、1 か所にまとめます。主なボタンが濃い灰色になっている画面は、主な色にそろえます。
デスクトップ
| 役割 | 今の値 | 背景との差 | メモ |
|---|---|---|---|
文字 text | #15171b | 17.9 : 1 | |
控えめな文字 text-muted | #6b7280 | 4.8 : 1 | |
主な色 primary | #1f2c8b | 11.7 : 1 | 定義はあるが画面ではほぼ使われていない |
| リンク | #2563eb | 5.2 : 1 | 主な色と別の青になっている |
危険 danger | #ef4444 | 3.8 : 1 | 文字・白い文字の地には足りない。#dc2626（4.8 : 1）以上にする |
暗い表示はまだありません。役割の色で書き直すときに入れます。
紹介サイト・説明書
| 役割 | 今の値 | 背景との差 | メモ |
|---|---|---|---|
文字 text | #0f172a | 17.9 : 1 | |
控えめな文字 text-muted | #64748b | 4.8 : 1 | |
主な色 primary（説明書） | #4f46e5 | 6.3 : 1 | 紹介ページでは別の青の組み合わせ |
成功 success | #16a34a | 3.3 : 1 | 文字には足りない |
注意 warning | #b45309 | 5.0 : 1 | |
危険 danger | #b91c1c | 6.5 : 1 |
紹介ページの空色 #0ea5e9（2.8 : 1）と薄い灰色 #8a93a6（3.1 : 1）は、本文の文字には使わないでください。ページごとに色の一式が別になっているので、1 つの定義にまとめます。
使い方
よい例
- 文字・線・背景は役割の色で書く。
- 失敗の文字は
danger、完了はsuccess。色だけでなく言葉やアイコンでも伝える。 - 暗い表示でも読めるかを、画面ごとに確かめる。
よくない例
#0069a8のような値を画面のコードに直接書く（値は製品の色の定義にだけ書く）。- 段の表から「なんとなく近い色」を選ぶ（役割の色で表せないときは、まず役割を増やす提案をする）。
- ほかの製品の主な色を借りてくる。主な色は製品ごとです。
- 赤だけ・緑だけで正誤を伝える（色の見え方は人によって違います）。
暗い表示
端末の設定（明るい／暗い）に合わせて切り替えます。役割の色は、製品ごとに暗い表示の値を決めます。SymCore では、段の表全体を自動で反転させる方式も使っています（50 ↔ 950、100 ↔ 900 …）。