Semantic Colors
セマンティクス（意味）を持つ色
Primitive Colorsにセマンティクスを持たせた色です。
Branding#
Primary や Accent などの色はユビーらしさを体現するカラーです。全体で繰り返し利用することで、ユーザーにプロダクト固有の印象を与えます。
Alert#
ユーザーへ警告を伝える色です。エラーや、不可逆操作への警告などに利用します。
| Name | HEX/Alpha | Description | Copy |
|---|---|---|---|
Alert | #db3939 | エラーや危険性などの警告 | |
Alert Darken | #b02b2b | Alert Buttonのhover/clickとしても利用 | |
Background Alert | #fcf4f4 | テキストやコンポーネントなどの背景 |
UI#
プリミティブなUI要素に使用します。
| Name | HEX/Alpha | Description | Copy |
|---|---|---|---|
Text Main | #16191f / 90% | テキストの基本色 | |
Text Sub | #16191f / 64% | Text Mainに対して副次的なテキスト | |
Border | #16191f / 18% | 区切り線や枠線など各種罫線 | |
Text White | #ffffff | Primaryなど、色付きボタンの上に置くテキスト | |
Text Disabled | #16191f / 18% | 無効化されている状態のテキスト | |
Text Placeholder | #16191f / 48% | テキストフィールドのプレー スホルダーテキスト | |
Text Link | #3959cc | テキストリンク。下線を推奨 | |
Text Link Sub | #16191f / 64% | 目立たせなくても良いリンク。下線を推奨 | |
Background Gray | #16191f / 4% | テキストやコンポーネントなどの背景 | |
Background White | #ffffff | テキストやコンポーネントなどの背景 | |
Background Modal | #000000 / 50% | Modal表示時の背景色 | |
Overlay | #000000 / 20% | hover / click のときボタンに重ねる汎用色 |