カラー - IKYU Design Guideline 読み込まれました

カラー

一休らしい没頭感を促すカラーリングとして定義した、サービスごとに象徴されるブランドカラーに対して、
特定のアクションやステータスを表す機能的な意味を持つカラーはポジティブな色味で定義しています。
サービス全体で一貫性を保ち、ユーザーの学習コストを軽減します。

ブランドカラーをみる

Global Color

有彩色12色(うち2色を2階調)、無彩色8階調で定義します。
プロダクトに反映する際は以下の有彩色の中から選定し、使用箇所は問いません。

有彩色

#ff3131

#fff2f2

#ff6600

#ff9900

#ffcc00

#9ba50e

#00b900

#4ebaeb

#008dde

#1e72ef

#eff7ff

#1f559a

#6e44c2

無彩色

#333333

#696969

#999999

#aaaaaa

#cccccc

#dddddd

#eeeeee

#f7f7f7

Functional Color

色の使用箇所はサービス全体を通して決まっており、定義した箇所以外での使用は原則認めません。

使用箇所

css

ダイヤモンド会員ラベル

background: linear-gradient(45deg,#0c7b8e,#54acb9);

ゴールド会員ラベル/
ランキング1位

background: linear-gradient(45deg,#a88304,#d6b604);

プラチナ会員ラベル/
ランキング2位

background: linear-gradient(45deg,#777777,#c4c4c4);

ランキング3位

background: linear-gradient(45deg, #844c00, #ac7318);

レギュラー会員ラベル

background: linear-gradient(45deg,#d27d07,#ffb44d);

クーポン

background: linear-gradient(45deg,#907600,#a89300);

モーダルの背景色

background: rgba(0, 0, 0, 0.6);