カラーは Alius デザインシステムで最も表現力のある要素の一つです。ブランドアイデンティティを伝え、情報階層を整理し、ユーザーアクションに対する明確なフィードバックを提供します。
ブランドカラー
ブランドカラーは、すべてのタッチポイントにおける Alius の主要な視覚的識別子です。ロゴ、コアのCTAボタン、主要ナビゲーションリンク、ステータスインジケーター、ブランド認識要素に使用されます。
強調として控えめに使用し、支配的な背景や塗りとしては使用しません。ライト/ダーク両モードで安定しており、蛍光色や高彩度グラデーションは使用しません。
プライマリ
Brand 500
プライマリブランドカラー — コアインタラクティブ要素
#2d6ff2
スケール
50
#f0f5ff
100
#e0ebff
200
#b8d4fe
300
#85b4fd
400
#5191fc
500
#2d6ff2
600
#1a55db
700
#1544b2
800
#13398d
900
#153170
ニュートラルカラー
ニュートラルカラーは、インターフェースの構造的基盤を形成します。背景、テキスト、ボーダー、空間的区切りを担当します。明度の差による明確な階層で、長時間の読み取りに快適な体験を提供します。
背景
Surface 50
ページ背景
#f8fafc
Surface 100
カード背景、セクション区切り
#f1f5f9
Surface 200
ボーダー、区切り線
#e2e8f0
Surface 300
無効ボーダー、プレースホルダー
#cbd5e1
テキスト
Surface 900
プライマリテキスト、見出し
#0f172a
Surface 700
セカンダリテキスト、注釈
#334155
Surface 800
ダークモード背景
#1e293b
Surface 950
最深背景
#020617
セマンティックカラー
セマンティックカラーはシステム状態とユーザーフィードバックを伝えます。意味の伝達に色のみに依存せず、常にアイコン、テキストラベル、パターンを組み合わせてください。
サクセス
Success
完了したアクション、確認済み状態、肯定的な結果
#16a34a
ワーニング
Warning
潜在的な問題、非クリティカルな警告、境界条件
#d97706
エラー
Error
失敗したアクション、無効な入力、クリティカルな問題
#dc2626
情報
Info
役立つヒント、コンテキストガイダンス、中立のお知らせ
#0284c7
使用原則
- ブランドカラーはページカラーの10%未満に留める
- ニュートラルカラーが視覚的ベース — 最も高い割合
- セマンティックカラーは状態を表現する場合のみ使用
- 大面積のグラデーション背景は使用しない
- グロー効果やネオンカラーは使用しない
- すべてのカラー決定には理由を説明できること