ブランドガイドライン
Madeのデザインシステムとビジュアルアイデンティティ
ロゴ
エージェントカラー
各エージェントには、一目で識別できる独自のカラーアイデンティティがあります。
Milo
Creative Director
Zara
Community Manager
Remi
Content Producer
Lila
Distribution Manager
エージェントグラデーション
各エージェントの紹介ページで使用されるグラデーション背景です。
Milo
linear-gradient(to bottom right, #1e3a8a, #1e40af, #000000)
Zara
linear-gradient(to top left, #F29B28, #FEDB4D)
Remi
linear-gradient(to bottom right, #581c87, #6b21a8, #000000)
Lila
linear-gradient(to bottom right, #7f1d1d, #991b1b, #000000)
ブランドカラー
インターフェース全体で使用されるコアカラーです。
Made Dark
プライマリ背景
#0A0A0FMade Dark Secondary
セカンダリ背景
#1A1A2EMade Dark Accent
アクセント背景
#16162AGradient Start
プライマリグラデーション
#6366F1Gradient End
プライマリグラデーション
#EC4899White
テキスト＆ボーダー
#FFFFFFタイポグラフィ
フォント
プライマリフォント
System UI
system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
等幅フォント
Space Mono
技術的な要素、データ表示、コードに使用
タイプスケール
コンポーネント
ボタン
カード＆グラスエフェクト
標準カード
bg-[#1A1A2E] with border
グラスカード
bg-white/5 backdrop-blur-lg
ダークグラス
bg-black/20 backdrop-blur-lg
角丸
エージェントアバター
各AIエージェントを表すビジュアルです。
Milo
Zara
Remi
Lila
スペーシングスケール
エフェクト
グロー効果
box-shadow: 0 0 30px rgba(99, 102, 241, 0.6)
ホバースケール
hover:scale-105 transition-transform
