Colors
apps/website で利用しているカラーバリエーションの設計指針です。
Color Policy
Section titled “Color Policy”Radix Colors のカラー設計を踏襲しています。
- 同一コンポーネント間のカラーバリエーションは、ルールに沿って利用することで、一貫したカラーテイストとA11yが担保されます。
- ルールに沿わず、単一のカラーを直接利用することも可能です。
| 番号 | 用途カテゴリ | 具体的な使いどころ |
|---|---|---|
| 1 | App background | ページ背景 |
| 2 | Subtle background | カードやサイドバー背景 |
| 3 | UI element background | デフォルト状態のボタン・インプット背景 |
| 4 | Hovered UI element | ホバー時 |
| 5 | Active / Selected | アクティブ・選択時 |
| 6 | Subtle border | 区切り線 |
| 7 | UI element border | デフォルトボーダー |
| 8 | Hovered border | ホバー時ボーダー |
| 9 | Solid background | 一番鮮やかな「その色らしい色」 |
| 10 | Hovered solid | ソリッドのホバー |
| 11 | Low-contrast text | サブテキスト・ラベル |
| 12 | High-contrast text | メインテキスト |
Color Scale
Section titled “Color Scale”Brand Colors
Section titled “Brand Colors”Brand Colors は、カラーポリシーに沿わず、指定・利用します。
Blue
- #026ea8
- #001397
Neutral Colors
Section titled “Neutral Colors”Blue
- #fcfdfe
- #f6faff
- #eaf3ff
- #dbebff
- #c9e1ff
- #b4d4ff
- #9bc2fc
- #77a9f4
- #0060d1
- #0050c0
- #0563d4
- #0e3061
Red
- #fffcfc
- #fff8f7
- #ffebe9
- #ffdbd7
- #ffccc7
- #ffbcb6
- #f7a8a1
- #ee8d85
- #da3036
- #cb1727
- #d2262f
- #641a1a
Orange
- #fefcfb
- #fff5ef
- #ffeadc
- #ffd8bd
- #ffcaa9
- #ffba90
- #fba97e
- #f0905e
- #ff7300
- #f36600
- #d04e00
- #582e17
Yellow
- #fefdfb
- #fff9e8
- #fff1c0
- #ffe7a3
- #ffdc82
- #ffd070
- #efbe60
- #dda62d
- #ffc100
- #fcb800
- #9e6d00
- #48381b
Green
- #fbfefb
- #f5fbf6
- #e9f6ea
- #daf0dc
- #c9e8cc
- #b4ddb8
- #97cd9d
- #6cb878
- #388e4a
- #2f8040
- #2d7e3f
- #223b26
Teal
- #fbfefd
- #f3fbf9
- #e3f7f3
- #d2f1eb
- #bfe9e0
- #a9ddd3
- #8acdc0
- #5ab8a9
- #0d8c7d
- #008171
- #007e70
- #1a3b36
Purple
- #fdfcff
- #faf8fe
- #f5eeff
- #efe3fe
- #e6d6fb
- #dbc6f6
- #cdb1ee
- #ba95e5
- #763da9
- #672d98
- #7f46b3
- #40205d
Pink
- #fffcfd
- #fef7f8
- #ffe9ee
- #ffdbe3
- #fdcdd7
- #f7beca
- #eeabba
- #e592a7
- #de2670
- #cd1064
- #cd1164
- #651231
Gray
- #fcfcfc
- #f9f9f9
- #f0f0f0
- #e8e8e8
- #e0e0e0
- #d9d9d9
- #cecece
- #bbbbbb
- #8d8d8d
- #838383
- #646464
- #202020
Black / Wthite
- #000000
- #ffffff
Alpha Colors
Section titled “Alpha Colors”Black
- #0000000d
- #0000001a
- #00000026
- #0003
- #0000004d
- #0006
- #00000080
- #0009
- #000000b3
- #000c
- #000000e6
- #000000f2
White
- #ffffff0d
- #ffffff1a
- #ffffff26
- #fff3
- #ffffff4d
- #fff6
- #ffffff80
- #fff9
- #ffffffb3
- #fffc
- #ffffffe6
- #fffffff2
Color Scale の追加・編集
Section titled “Color Scale の追加・編集”- Radix UIのCreate a custom palette ページにAccent Colorを指定し、カラーパレットを生成します。
- その後、既存のカラー設定を参考に、CSSファイルにCSS変数を記述し、本ページにカラーパレットを追加します。