workbuddy_skills/open-design/design-systems/discord/DESIGN-ja.md

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

> Category: 生産性・SaaS
> ボイス／チャットプラットフォーム。深みのあるブラープル、ダークファーストのサーフェス、遊び心あるアクセント。

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

Discordのプロダクトは、夜のセッション、レイド、グループボイス通話のために設計されているため、全体のサーフェスはダークファーストで構成されています。デフォルトのキャンバスは深みのある `Background Primary`（ライトテーマ: `#313338`、ダークテーマ: `#1e1f22`）で、チャットカラムはチャンネル・スレッド・サイドパネルを区別するため、わずかに明るいまたは暗いシェードで重ね合わされています。シグネチャーカラーの **Blurple**（`#5865f2`）はブランドマーク、主要CTA、メンション、「自分」を示すアフォーダンスのみに使用され、落ち着いたニュートラルな背景の中で際立つよう、控えめに用いられています。

タイポグラフィには **gg sans**（DiscordのカスタムWhitneyの後継フォント）が使用されており、丸みを帯びたジオメトリック形状がチャットクライアントに求められる小さなサイズでも親しみやすく、かつ読みやすい印象を与えます。見出しは段階的にサイズが上がり、チャット行の間隔は詰め気味（メッセージグループ間4〜8px）で、長時間のスクロールでも見渡しやすく設計されています。

形状言語は丸みを帯びつつも、膨らんだ印象は持ちません。カードは角丸8px、インプットは4px、ステータスバッジやタグには全円のピルを使用しています。サーバーアバターは48pxの角丸スクエアで、ホバー時に円形に変化するアニメーションは、ブランドアイデンティティの一部となっています。

**主な特徴:**
- ダークファーストサーフェス: `#1e1f22` / `#2b2d31` / `#313338`（3段階の深度）
- チャットサーフェスの唯一の彩度あるアクセントとしての Blurple `#5865f2`
- 全テキストに gg sans（Whitneyスタイル）— フレンドリー、ジオメトリック、ニュートラル
- ホバー時に円形へスナップする角丸スクエアのサーバーアバター（角丸16px）
- チャット行の詰めたスペーシングと、サイドパネルの余裕あるパディング
- ステータスドット: 緑でオンライン、黄でアイドル、赤でDND、グレーでオフライン
- 低アルファの淡いオフホワイトによるピクセルスナップ1px区切り線

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

### プライマリ
- **Blurple** (`#5865f2`): ブランドプライマリ、主要CTA、メンションハイライト。
- **Blurple Hover** (`#4752c4`): Blurpleのホバー／アクティブ状態。
- **Blurple Soft** (`#7289da`): レガシーBlurple、マーケティングでのセカンダリアクセント。

### サーフェス（ダークテーマ — デフォルト）
- **Background Tertiary** (`#1e1f22`): サーバーリストレール、最も深い背景。
- **Background Secondary** (`#2b2d31`): チャンネルサイドバー、設定サイドバー。
- **Background Primary** (`#313338`): チャットサーフェス、メッセージカラム。
- **Background Floating** (`#111214`): フローティングポップオーバー、ツールチップ、オートコンプリート。
- **Background Modifier Hover** (`rgba(78, 80, 88, 0.3)`): 行のホバーオーバーレイ。
- **Background Modifier Selected** (`rgba(78, 80, 88, 0.6)`): アクティブ行。

### サーフェス（ライトテーマ）
- **Light Bg Primary** (`#ffffff`): ライトテーマのチャットサーフェス。
- **Light Bg Secondary** (`#f2f3f5`): ライトテーマのサイドバー。
- **Light Bg Tertiary** (`#e3e5e8`): 最も深いライトサーフェス。

### テキスト
- **Header Primary** (`#f2f3f5`): ダークテーマのチャンネルヘッダー、モーダルタイトル。
- **Header Secondary** (`#b5bac1`): ミュートされたヘッダー。
- **Text Normal** (`#dbdee1`): ダークテーマの本文テキスト — 純白よりわずかにクールな色調。
- **Text Muted** (`#949ba4`): タイムスタンプ、サーバー名、セカンダリメタデータ。
- **Text Link** (`#00a8fc`): メッセージ内のハイパーリンク — スカイブルー、Blurpleとは異なる色。
- **Channels Default** (`#80848e`): サイドバーの非アクティブチャンネル名。

### ステータスとセマンティクス
- **Status Online** (`#23a55a`): オンラインドット、成功状態。
- **Status Idle** (`#f0b232`): アイドルドット、離席中。
- **Status DND** (`#f23f43`): 取り込み中、破壊的操作の赤としても使用。
- **Status Streaming** (`#593695`): 「配信中」パープル。
- **Status Offline** (`#80848e`): オフライングレー。
- **Mention Highlight** (`rgba(88, 101, 242, 0.1)`): @メンション行への淡いBlurpleウォッシュ。

### ボーダーと区切り線
- **Background Modifier Accent** (`rgba(255, 255, 255, 0.06)`): ダークテーマの標準区切り線。
- **Border Subtle** (`#3f4147`): カード用ソリッド区切り線。

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

### フォントファミリー
- **本文 / UI / 見出し**: `gg sans`、フォールバック: `"Helvetica Neue", Helvetica, Arial, sans-serif`
- **ディスプレイ（レガシー / Whitney）**: `Whitney`、フォールバック: `gg sans`
- **コード / 等幅**: `"gg mono"`、フォールバック: `Consolas, Andale Mono, Courier New, Courier, monospace`

### 階層

| 役割 | フォント | サイズ | ウェイト | 行の高さ | 字間 | 備考 |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | gg sans | 56px (3.5rem) | 800 | 1.1 | -0.02em | マーケティングヒーロー |
| ページ見出し | gg sans | 24px (1.5rem) | 700 | 1.25 | normal | 設定・プロフィールタイトル |
| チャンネル名 | gg sans | 16px (1rem) | 600 | 1.25 | normal | `#general`、チャンネルヘッダー |
| メッセージ本文 | gg sans | 16px (1rem) | 400 | 1.375 | normal | 標準チャットテキスト |
| ユーザー名 | gg sans | 16px (1rem) | 500 | 1.25 | normal | メッセージの送信者 |
| タイムスタンプ | gg sans | 12px (0.75rem) | 500 | 1.25 | normal | "Today at 4:32 PM" |
| サイドバーチャンネル | gg sans | 16px (1rem) | 500 | 1.25 | normal | チャンネルリスト行 |
| サーバー名 | gg sans | 16px (1rem) | 600 | 1.25 | normal | サーバーヘッダー |
| キャプション / メタ | gg sans | 12px (0.75rem) | 400 | 1.3 | 0.02em | ステータステキスト、編集済みタグ |
| インラインコード | gg mono | 0.875em | 400 | inherit | normal | インライン `code` |
| コードブロック | gg mono | 14px (0.875rem) | 400 | 1.5 | normal | ```三重フェンス``` ブロック |

### 原則
- **フレンドリーなジオメトリー**: gg sans はWhitneyの後継として、a/g/sの文字に丸みのある字形を採用 — ブランドは読みやすさを損なわない温かみを求めています。
- **色のコントラストよりウェイトのコントラスト**: 階層は400→500→600→700→800のウェイトステップで表現し、サーフェスはニュートラルに保ちます。
- **16pxの本文**: チャットメッセージは16px未満に縮小しません。情報密度はフォントサイズではなく行の高さ（1.375）で調整します。

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

### ボタン

**プライマリ**
- Background: `#5865f2`
- Text: `#ffffff`
- Padding: 8px 16px
- Radius: 4px
- Hover: `#4752c4`
- 用途: 主要CTA、「続行」、「サーバーに参加」

**セカンダリ**
- Background: `#4e5058`
- Text: `#ffffff`
- Padding: 8px 16px
- Radius: 4px
- Hover: `#6d6f78`

**ターシャリ / サトル（リンクスタイル）**
- Background: transparent
- Text: `#dbdee1`
- Hover: テキストに下線、背景色変化なし

**デンジャー**
- Background: `#da373c`
- Text: `#ffffff`
- Hover: `#a12d2f`

### インプット
- Background: `#1e1f22`
- Text: `#dbdee1`
- Border: 1px solid `#1e1f22`
- Radius: 4px
- Padding: 10px 12px
- フォーカス時: border `#5865f2`

### サーバーアバター
- サイズ: 48×48px
- Radius: デフォルト16px（角丸スクエア）、ホバー時およびアクティブ時に50%へ遷移。
- アクティブ状態: アイコンカラムの左端に4pxのホワイトピル。

### ステータスドット
- サイズ: 10×10px
- Border: 3px solid background-tertiary（「ノッチ」効果を生成）
- 位置: アバターの右下。

### カード / 埋め込み
- Background: `#2b2d31`（ダーク）または `#f2f3f5`（ライト）
- 左ボーダー: 4px solid 埋め込みアクセントカラー。
- Radius: 4px
- Padding: 8px 16px

### メンションピル
- Background: `rgba(88, 101, 242, 0.3)`
- Text: `#c9cdfb`
- Padding: 0 2px
- Radius: 3px

## 5. スペーシングとレイアウト

- **基本単位**: 4px。スケール: 4, 8, 12, 16, 20, 24, 32, 40。
- **サーバーレール**: 幅72px、固定。
- **チャンネルサイドバー**: 幅240px。
- **メンバーリスト**: デスクトップで幅240px。
- **チャットカラム**: 可変、最小380px。

## 6. モーション

- **デュレーション**: ホバーは200ms、アバターの円形変形は350ms、ツールチップのフェードは80ms。
- **イージング**: アバター変形には `cubic-bezier(0.215, 0.61, 0.355, 1)`（素早く動いて落ち着く）。
- **通知パルス**: 未読メンションインジケーターに1.4s ease-in-out infinite。

## 7. 使用上のガイドライン

- ダークシェル、コンパクトな情報密度、Blurpleのアクション階層は一体として保持すること。ライトなマーケティングスタイルのレイアウトにBlurpleを使用すると、Discordプロダクトの雰囲気が崩れます。
- ナビゲーションが多いサーフェスは、孤立した装飾的なカードではなく、レール・サイドバー・チャットカラムを中心に構成すること。
- 人物・サーバー・アクティブなプレゼンスを表す際には、角丸スクエアアバターとステータスドットの言語を使用すること。