カラー
OP技術を知っていただくことやOPの機能に触れていただくことにおいて、それを見たり触ったりする人を迷わせないためにもカラーにおけるルールを定義します。
利用範囲
現在、OPに関連する以下の範囲において、当カラールールを適用しています。
- OP-CIP公式Webサイト
- OPに関連するWebアプリケーション
- プレゼン資料
利用方法
より具体的な利用方法はTailwind CSS のカラーを参照してください。Web サイトや Web アプリケーションにおける Originator Profile で使用している色の実装に関しては、Tailwind CSS のカラーをベースに定義しています。
Brand color
OPロゴマークに使われているカラーです。白い文字とはコントラスト比が低いため、組み合わせないでください。
- brand#00AFB4
Accent color
Originator profile のアクセントカラーは下記の Primary colors 内の 700 と同じ色を使用します。
- accent#008488
Primary colors
主にUIで使用するカラーです。重要な決定を促す場合や強調したい要素に配色する色として使用してください。
ブランドカラーは600と同等、アクセントカラーは700を使用します。
- 50#F8FDFD
- 100#F1FBFB
- 200#E6F8F8
- 300#CCEFF0
- 400#99DFE1
- 500#66CFD2
- 600#00AFB4
- 700#008488
- 800#006D73
- 900#00585A
- 950#003233
Gray colors
枠線で使用するカラーは、主に300や400を使用します。
- 50#f9fafb
- 100#f3f4f6
- 200#e5e7eb
- 300#d1d5db
- 400#9ca3af
- 500#6b7280
- 600#4b5563
- 700#374151
- 800#1f2937
- 900#111827
- 950#030712
Success colors
操作が成功したことを示すカラーです。主にフォームのバリデーションや通知メッセージに使用します。
- DEFAULT#15803D
- extralight#F7FEE7
- light#84CC16
Caution colors
注意を促すカラーです。コントラスト比が低いため、文字色との組み合わせに注意して使用してください。
- DEFAULT#FACC15
- extralight#FEFCE8
- light#FDE047
Danger colors
危険を示すカラーです。主にエラーメッセージや削除ボタンに使用します。
- DEFAULT#B80000
- extralight#FEF2F2
- light#F87171
review color
主にOP登録画面で使用するUI上のカラーです。事務局からのレビューがあったときに使用する色として定義していますが、現在はそれ以外の用途で使用していません。
- review#C2410C