design-principles

スイス・インターナショナル・スタイルのデザイン

使用する場面： 新しいコンポーネントの作成、スタイルの変更、新しいページの構築。 使用しない場面： バックエンド作業、API の変更、ロジックのみの変更。

デザインを始める前に

docs/agent/design/ にあるデザイン仕様をすべて読んでください。

1. style-guide.md - 基本ルール、色、タイポグラフィ、コンポーネント
2. design-system.md - 拡張トークン、余白、シャドウ
3. swiss-design-system-prompt.md - スイス UI 用 AI プロンプト

色

名前	Hex	用途
キャンバス	#F0F0E8	背景
インク	#000000	テキスト、境界線
ハイパーブルー	#1D4ED8	主要なアクション
シグナルグリーン	#15803D	成功
アラートオレンジ	#F97316	警告
アラートレッド	#DC2626	危険
スチールグレー	#4B5563	セカンダリテキスト

タイポグラフィ

font-serif  → Headers
font-mono   → Labels, metadata (uppercase, tracking-wider)
font-sans   → Body text

コンポーネントのパターン

// Button: Square corners, hard shadow, press effect
<button className="rounded-none border-2 border-black shadow-[2px_2px_0px_0px_#000000] hover:translate-y-[1px] hover:translate-x-[1px] hover:shadow-none">

// Card: Hard shadow, no rounded corners
<div className="bg-white border-2 border-black shadow-[4px_4px_0px_0px_#000000]">

// Label: Mono, uppercase
<label className="font-mono text-sm uppercase tracking-wider">

ステータスインジケーター

<div className="w-3 h-3 bg-green-700" />  // Ready
<div className="w-3 h-3 bg-amber-500" />  // Warning
<div className="w-3 h-3 bg-red-600" />    // Error
<div className="w-3 h-3 bg-blue-700" />   // Active

避けるべきパターン（絶対に使用しない）

• rounded-*（rounded-none を除く）
• グラデーションやぼかしのシャドウ
• パレットにないカスタムカラー
• パステルカラーや淡い色
• 機能のない装飾的なアイコン

レトロなターミナル要素

ダッシュボード、設定、空の状態にのみ使用してください。

<span className="font-mono text-xs uppercase">[ STATUS: READY ]</span>

履歴書コンポーネントでは、レトロな要素を使用しないでください。

チェックリスト

• すべてのコンポーネントで rounded-none を使用
• 硬いシャドウ（shadow-[Xpx_Xpx_0px_0px_#000000]）
• 適切なタイポグラフィ（見出しはセリフ体、ラベルは等幅フォント、本文はサンセリフ体）
• パレットの色のみを使用
• グラデーションやぼかし効果を使用しない