# Cohereにインスパイアされたデザインシステム

> Category: AI・LLM
> エンタープライズAIプラットフォーム。鮮やかなグラデーション、データリッチなダッシュボード美学。

## 1. ビジュアルテーマと雰囲気

Cohereのインターフェースは洗練されたエンタープライズ指令デッキ——自信に満ち、クリーンで、AIを消費者向けのおもちゃではなく本格的なインフラとして感じさせるデザインです。体験は明るいホワイトキャンバスの上に展開され、コンテンツはたっぷりとした丸みを持つカード（22px radius）に整理され、有機的なクラウドのような包括言語を生み出します。これはCTOやエンタープライズアーキテクトに語りかけるサイトです——冷たさのないプロフェッショナル感、威圧感のない洗練さ。

デザイン言語は、デュアルタイプフェイスシステムによって2つの世界を橋渡しします。タイトなトラッキングを持つカスタムディスプレイセリフのCohereTextは、ヘッドラインにテクノロジー宣言のような重厚感を与え、Unica77 Cohere Webはすべてのボディ・UIテキストをジオメトリックなスイス的精度で処理します。このセリフ/サンセリフのペアリングは「自信ある権威とエンジニアリングの明晰さ」という個性を生み出し、エンタープライズAIプラットフォームを完璧に体現します。

色は極めて節制して使われます——インターフェースはほぼ完全に白黒で、クールグレーのボーダー（`#d9d9dd`、`#e5e7eb`）が用いられます。パープル-バイオレットは、フォトグラフィックなヒーローバンド、グラデーションセクション、そしてホバーとフォーカス状態を示すインタラクティブブルー（`#1863dc`）にのみ現れます。この色彩的な節制により、色が登場する場面——製品スクリーンショット、エンタープライズフォトグラフィー、濃いパープルセクション——では最大限の視覚的重量を持ちます。

**主な特徴：**
- クールグレーの区切りボーダーを持つ明るいホワイトキャンバス
- 22pxシグネチャーborder-radius——「Cohereカード」の独特な丸みの特徴
- デュアルカスタムタイプフェイス：CohereText（ディスプレイセリフ）+ Unica77（ボディサンセリフ）
- エンタープライズグレードの色彩節制：黒・白・クールグレー、最小限のパープルブルーアクセント
- ドラマチックなコントラストを生み出す深いパープル/バイオレットのヒーローセクション
- ホバー時にブルーに変化するゴースト/透明ボタン
- 多様なリアルワールドアプリケーションを示すエンタープライズフォトグラフィー
- 大文字変換を伴うコードや技術ラベル用のCohereMono

## 2. カラーパレットと役割

### プライマリ
- **Cohere Black** (`#000000`): プライマリヘッドラインテキストと最大強調要素。
- **Near Black** (`#212121`): 標準ボディリンクカラー——純粋な黒よりわずかにソフト。
- **Deep Dark** (`#17171c`): ナビゲーションとダークセクションテキスト用の青みがかったニアブラック。

### セカンダリ・アクセント
- **Interaction Blue** (`#1863dc`): プライマリインタラクティブアクセント——ボタンホバー、フォーカス状態、アクティブリンクに現れます。唯一の色彩的アクションカラー。
- **Ring Blue** (`#4c6ee6` at 50%): キーボードフォーカスインジケーター用のTailwindリングカラー。
- **Focus Purple** (`#9b60aa`): インプットフォーカスボーダーカラー——ミュートバイオレット。

### サーフェス・バックグラウンド
- **Pure White** (`#ffffff`): プライマリページバックグラウンドとカードサーフェス。
- **Snow** (`#fafafa`): 微妙な立体感のあるサーフェスとライトセクションバックグラウンド。
- **Lightest Gray** (`#f2f2f2`): カードボーダーと最もソフトな区切りライン。

### ニュートラル・テキスト
- **Muted Slate** (`#93939f`): 控えめなフッターリンクとターシャリテキスト——わずかなブルーバイオレットのトーンを持つクールグレー。
- **Border Cool** (`#d9d9dd`): 標準セクションとリストアイテムボーダー——クールでわずかにパープルがかったグレー。
- **Border Light** (`#e5e7eb`): ライターボーダーバリアント——Tailwindの標準gray-200。

### グラデーションシステム
- **パープル-バイオレットヒーローバンド**: ホワイトキャンバスに対してドラマチックなコントラストを生み出す深いパープルグラデーションセクション。製品スクリーンショットと主要メッセージを収める全幅バンドとして現れます。
- **ダークフッターグラデーション**: ページは深いパープル/チャコールからブラックフッターへと移行し、「夕暮れ」のような効果を生み出します。

## 3. タイポグラフィルール

### フォントファミリー
- **ディスプレイ**: `CohereText`、フォールバック: `Space Grotesk, Inter, ui-sans-serif, system-ui`
- **ボディ / UI**: `Unica77 Cohere Web`、フォールバック: `Inter, Arial, ui-sans-serif, system-ui`
- **コード**: `CohereMono`、フォールバック: `Arial, ui-sans-serif, system-ui`
- **アイコン**: `CohereIconDefault`（カスタムアイコンフォント）

### 階層

| 役割 | フォント | サイズ | ウェイト | 行の高さ | 文字間隔 | 備考 |
|------|------|------|--------|-------------|----------------|-------|
| ディスプレイ / ヒーロー | CohereText | 72px (4.5rem) | 400 | 1.00 (tight) | -1.44px | 最大インパクト、セリフの権威感 |
| ディスプレイセカンダリ | CohereText | 60px (3.75rem) | 400 | 1.00 (tight) | -1.2px | 大きなセクション見出し |
| セクション見出し | Unica77 | 48px (3rem) | 400 | 1.20 (tight) | -0.48px | フィーチャーセクションタイトル |
| サブ見出し | Unica77 | 32px (2rem) | 400 | 1.20 (tight) | -0.32px | カード見出し、機能名 |
| フィーチャータイトル | Unica77 | 24px (1.5rem) | 400 | 1.30 | normal | 小さいセクションタイトル |
| ボディラージ | Unica77 | 18px (1.13rem) | 400 | 1.40 | normal | イントロパラグラフ |
| ボディ / ボタン | Unica77 | 16px (1rem) | 400 | 1.50 | normal | 標準ボディ、ボタンテキスト |
| ボタンミディアム | Unica77 | 14px (0.88rem) | 500 | 1.71 (relaxed) | normal | 小さいボタン、強調ラベル |
| キャプション | Unica77 | 14px (0.88rem) | 400 | 1.40 | normal | メタデータ、説明 |
| 大文字ラベル | Unica77 / CohereMono | 14px (0.88rem) | 400 | 1.40 | 0.28px | 大文字セクションラベル |
| スモール | Unica77 | 12px (0.75rem) | 400 | 1.40 | normal | 最小テキスト、フッターリンク |
| コードマイクロ | CohereMono | 8px (0.5rem) | 400 | 1.40 | 0.16px | 小さな大文字コードラベル |

### 原則
- **宣言にはセリフ、ユーティリティにはサンセリフ**: CohereTextはディスプレイスケールでブランドボイスを担います——そのセリフのターミナルがヘッドラインに発表された研究のような権威感を与えます。Unica77はすべての機能的な部分をスイス・ジオメトリックの中立性で処理します。
- **スケール時のネガティブトラッキング**: CohereTextは60〜72pxで-1.2px〜-1.44pxの文字間隔を使用し、密度の高いインパクトあるテキストブロックを生み出します。
- **シングルボディウェイト**: Unica77の使用はほぼすべてウェイト400です。ウェイト500は小さなボタン強調にのみ現れます。このシステムはウェイトのコントラストではなく、サイズとスペーシングに依存します。
- **大文字コードラベル**: CohereMonoは技術タグとセクションマーカーに大文字とポジティブな文字間隔（0.16〜0.28px）を使用します。

## 4. コンポーネントスタイリング

### ボタン

**ゴースト / 透明**
- Background: transparent (`rgba(255, 255, 255, 0)`)
- テキスト: Cohere Black (`#000000`)
- ボーダー非表示
- ホバー: テキストがInteraction Blue (`#1863dc`)にシフト、opacity 0.8
- フォーカス: Interaction Blueによるsolid 2px outline
- プライマリボタンスタイル——インタラクション時まで非表示

**ダークソリッド**
- Background: dark/black
- テキスト: Pure White
- ライトサーフェス上のCTA用
- ピル形状または標準radius

**アウトライン**
- ボーダーベースの区切り
- セカンダリアクションに使用

### カードとコンテナ
- Background: Pure White (`#ffffff`)
- ボーダー: 微妙なカードには thin solid Lightest Gray（`1px solid #f2f2f2`）、強調には Cool Border（`#d9d9dd`）
- Radius: **22px**——プライマリカード、画像、ダイアログコンテナのCohere署名radius。小さい要素には4px、8px、16px、20pxも使用
- シャドウ: 最小限——Cohereはシャドウよりバックグラウンドカラーとボーダーに依存
- 特殊: `0px 0px 22px 22px` radius（下部のみ丸み）セクションコンテナ用
- ダイアログ: モーダル/ダイアログボックスには8px radius

### インプットとフォーム
- テキスト: ダークインプット上は白、ライト上は黒
- フォーカスボーダー: Focus Purple (`#9b60aa`) with `1px solid`
- フォーカスシャドウ: redリング（`rgb(179, 0, 0) 0px 0px 0px 2px`）——エラー状態の表示に使用
- フォーカスアウトライン: Interaction Blue solid 2px

### ナビゲーション
- 白またはダークバックグラウンドにクリーンなホリゾンタルナビ
- ロゴ: Cohereワードマーク（カスタムSVG）
- リンク: 16px Unica77のダークテキスト
- CTA: ダークソリッドボタン
- モバイル: ハンバーガー折りたたみ

### 画像処理
- 多様な被写体と環境のエンタープライズフォトグラフィー
- ドラマチックなセクション用のパープルがかったヒーローフォトグラフィー
- ダークサーフェス上の製品UIスクリーンショット
- カードシステムに合わせた22px radiusの画像
- 全幅パープルグラデーションセクション

### 特徴的なコンポーネント

**22pxカードシステム**
- 22px border-radiusはCohereのビジュアルシグネチャです
- すべてのプライマリカード、画像、コンテナはこのradiusを使用
- 典型的な8〜12pxとは異なる、クラウドのような有機的な柔らかさを生み出します

**エンタープライズトラストバー**
- 企業ロゴをホリゾンタルストリップに表示
- エンタープライズ採用を示す
- クリーンなモノクロロゴ処理

**パープルヒーローバンド**
- 製品ショーケースを収める全幅の深いパープルセクション
- ホワイトページフローにドラマチックな視覚的断絶を生み出す
- 製品スクリーンショットがパープル環境内に浮かぶ

**大文字コードタグ**
- 文字間隔付き大文字のCohereMono
- セクションマーカーと分類ラベルとして使用
- 技術的で構造化された情報階層を生み出す

## 5. レイアウト原則

### スペーシングシステム
- 基本単位: 8px
- スケール: 2px, 6px, 8px, 10px, 12px, 16px, 20px, 22px, 24px, 28px, 32px, 36px, 40px, 56px, 60px
- ボタンpaddingはバリアントによって異なる
- カード内部padding: 約24〜32px
- セクション縦スペーシング: 余裕を持たせる（セクション間56〜60px）

### グリッドとコンテナ
- 最大コンテナ幅: 2560pxまで（非常に広い）、レスポンシブスケーリング対応
- ヒーロー: ドラマチックなタイポグラフィで中央揃え
- フィーチャーセクション: 複数列カードグリッド
- エンタープライズセクション: 全幅パープルバンド
- 26のブレークポイントを検出——非常に細かいレスポンシブシステム

### ホワイトスペース哲学
- **エンタープライズの明確さ**: 各セクションは一つの明確な提案を、間に余白を持たせて提示します。
- **フォトグラフィーをヒーローとして**: 大きなフォトグラフィックセクションが装飾的なデザイン要素を必要とせずに視覚的な興味を提供します。
- **カードグルーピング**: 関連コンテンツは22px丸みのカードにグループ化され、自然な情報クラスターを形成します。

### Border Radiusスケール
- シャープ（4px）: ナビゲーション要素、小さなタグ、ページネーション
- コンフォタブル（8px）: ダイアログボックス、セカンダリコンテナ、小さなカード
- ジェネラス（16px）: フィーチャーコンテナ、ミディアムカード
- ラージ（20px）: 大きなフィーチャーカード
- シグネチャー（22px）: プライマリカード、ヒーロー画像、メインコンテナ——Cohereのradius
- ピル（9999px）: ボタン、タグ、ステータスインジケーター

## 6. 奥行きと立体感

| レベル | 処理 | 使用 |
|-------|-----------|-----|
| フラット（Level 0） | シャドウなし、ボーダーなし | ページバックグラウンド、テキストブロック |
| ボーダー付き（Level 1） | `1px solid #f2f2f2` または `#d9d9dd` | 標準カード、リスト区切り |
| パープルバンド（Level 2） | 全幅のダークパープルバックグラウンド | ヒーローセクション、フィーチャーショーケース |

**シャドウ哲学**: Cohereはほぼシャドウを使いません。奥行きは**バックグラウンドカラーのコントラスト**（パープルバンド上のホワイトカード、スノー上のホワイトサーフェス）、**ボーダーによる区切り**（クールグレーボーダー）、そしてドラマチックな**ライト-ダークセクションの交互表示**で伝えられます。要素に立体感が必要な場合、シャドウを落とすのではなくダーク上のホワイトによって実現します。

## 7. すべきこと・すべきでないこと

### すべきこと
- すべてのプライマリカードとコンテナに22px border-radiusを使用する——これがビジュアルシグネチャです
- ネガティブ文字間隔でCohereTextをディスプレイ見出し（72px、60px）に使用する
- すべてのボディとUIテキストにUnica77をウェイト400で使用する
- パレットをクールグレーボーダーの白黒に保つ
- Interaction Blue (#1863dc)はホバー/フォーカスのインタラクティブ状態にのみ使用する
- ドラマチックな視覚的断絶と製品ショーケースには深いパープルセクションを使用する
- セクションラベルにはCohereMono + 大文字 + 文字間隔を適用する
- 多様な被写体のエンタープライズ相応のフォトグラフィーを維持する

### すべきでないこと
- プライマリカードに22px以外のborder-radiusを使用しない——シグネチャradiusは重要です
- ウォームカラーを導入しない——パレットは厳密にクールトーンです
- 重いシャドウを使用しない——奥行きはカラーコントラストとボーダーから生まれます
- ボディテキストにボールド（700+）ウェイトを使用しない——400〜500が範囲です
- セリフ/サンセリフの階層を省略しない——ヘッドラインにはCohereText、ボディにはUnica77
- カードのサーフェスカラーにパープルを使用しない——パープルは全幅セクション専用です
- セクションスペーシングを40px以下に減らさない——エンタープライズレイアウトには余白が必要です
- デフォルトでボタンに装飾を加えない——ゴースト/透明がベーススタイルです

## 8. レスポンシブ動作

### ブレークポイント
| 名称 | 幅 | 主な変更 |
|------|-------|-------------|
| スモールモバイル | <425px | コンパクトレイアウト、最小限のスペーシング |
| モバイル | 425–640px | シングルカラム、積み重ねカード |
| ラージモバイル | 640–768px | 軽微なスペーシング調整 |
| タブレット | 768–1024px | 2カラムグリッド開始 |
| デスクトップ | 1024–1440px | フル複数列レイアウト |
| ラージデスクトップ | 1440–2560px | 最大コンテナ幅 |

*26のブレークポイントを検出——データセット中で最もきめ細かいレスポンシブサイトの一つ。*

### タッチターゲット
- タッチインタラクションに十分なサイズのボタン
- 適切なスペーシングのナビゲーションリンク
- タッチターゲットとしてのカードサーフェス

### 折りたたみ戦略
- **ナビゲーション**: フルナビゲーションはハンバーガーに折りたたみ
- **フィーチャーグリッド**: 複数列 → 2列 → シングルカラム
- **ヒーローテキスト**: 72px → 48px → 32px のプログレッシブスケーリング
- **パープルセクション**: 全幅を維持し、コンテンツが積み重なる
- **カードグリッド**: 3 → 2 → 1カラム

### 画像の動作
- フォトグラフィーは22px radiusコンテナ内で比率を維持してスケール
- 製品スクリーンショットはアスペクト比を維持
- パープルセクションはバックグラウンドを比率に合わせてスケール

## 9. エージェントプロンプトガイド

### クイックカラーリファレンス
- プライマリテキスト: "Cohere Black (#000000)"
- ページバックグラウンド: "Pure White (#ffffff)"
- セカンダリテキスト: "Near Black (#212121)"
- ホバーアクセント: "Interaction Blue (#1863dc)"
- ミュートテキスト: "Muted Slate (#93939f)"
- カードボーダー: "Lightest Gray (#f2f2f2)"
- セクションボーダー: "Border Cool (#d9d9dd)"

### コンポーネントプロンプトの例
- "Pure White (#ffffff) 上にCohereTextを72px ウェイト400、line-height 1.0、letter-spacing -1.44pxで使ったヒーローセクションを作成してください。Cohere Blackのテキスト。サブタイトルはUnica77で18px ウェイト400、line-height 1.4。"
- "22px border-radius、white上に1px solid Lightest Gray (#f2f2f2) ボーダーのフィーチャーカードをデザインしてください。タイトルはUnica77で32px、letter-spacing -0.32px。ボディはUnica77で16px、Muted Slate (#93939f)。"
- "ゴーストボタンを構築してください：透明バックグラウンド、Unica77 16pxのCohere Blackテキスト。ホバー時、テキストがInteraction Blue (#1863dc) にopacity 0.8でシフト。フォーカス：2px solid Interaction Blueアウトライン。"
- "ホワイトテキストの深いパープル全幅セクションを作成してください。見出しにCohereTextを60px。製品スクリーンショットが22px border-radiusを使って内側に浮かびます。"
- "CohereMono 14px、大文字、letter-spacing 0.28pxのセクションラベルをデザインしてください。Muted Slate (#93939f) テキスト。"

### イテレーションガイド
1. 一度に一つのコンポーネントに集中する
2. プライマリカードには常に22px radiusを使用——「Cohereカードの丸み」
3. タイプフェイスを明示する——ヘッドラインにはCohereText、ボディにはUnica77、ラベルにはCohereMono
4. インタラクティブ要素はホバー時のみInteraction Blue (#1863dc) を使用
5. サーフェスはクールグレーボーダーのホワイトに保つ——ウォームトーンなし
6. パープルは全幅セクション専用——カードバックグラウンドには使わない