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

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

> Category: 生産性 & SaaS
> 語学学習プラットフォーム。明るいフクロウグリーン、ぶ厚いシャドウ、ゲーミフィケーションの喜び。

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

Duolingo はゲーミフィケーションをビジュアル言語として体現したデザインです。インターフェースは遠慮なく鮮やかで、**フクロウグリーン**（`#58cc02`）をブランドプライマリとし、すべてのインタラクティブ要素の下部に 4px のぶ厚いシャドウを持ち、まるで押されるのを待っている 3D ボタンのように見えます。ページは白（`#ffffff`）で、2〜3px の太いボーダーは深いグレー（`#e5e5e5`）、システム全体がより良い階層構造で生まれ変わった 2015 年の iOS アプリのように読めます。

タイポグラフィは、クロームに **Feather Bold**（カスタムの丸みを帯びたサンセリフ）、本文に **Mona Sans**（または Inter）を使用しています。ディスプレイサイズは大きく自信に満ちており——Duolingo は決してささやきません。見出しはグリーンのアンダーラインストロークを持つか、グリーンのピルの上に置かれることが多く、マスコットの Duo（緑のフクロウ）は静的なロゴではなく、アクティブなイラストキャラクターとして登場します。

形状言語は親しみやすく：カードは 16〜20px の角丸、ボタンは 12px、チップとプログレスバーは 9999px です。アイコノグラフィは塗りつぶし、丸みを帯び、スキルでカラーコード化されており——すべてのレッスン面には一目で識別できるカラーペアリングがあります。

**主要な特徴：**
- フクロウグリーン（`#58cc02`）が支配的なブランドカラーとして、サーフェスの 30% 以上を占める
- すべてのボタンに 4px のぶ厚いボトムシャドウ（「触覚的プレス」のアフォーダンス）
- 2〜3px のソリッドボーダー、ヘアラインは一切使わない
- Feather Bold（丸みのあるディスプレイ）＋ Mona Sans（本文）
- 大きく自信のあるテキスト——ディスプレイサイズは 48px から始まり上昇する
- マスコット＝キャラクター：Duo フクロウはオンボーディング、エラー、ストリークに登場
- ストリークオレンジ（`#ff9600`）とジェムピンク（`#ce82ff`）がセカンダリブランドカラー

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

### プライマリ
- **フクロウグリーン**（`#58cc02`）：ブランドプライマリ、プライマリ CTA、正解。
- **フクロウグリーンディープ**（`#58a700`）：グリーンボタンのプレス/シャドウカラー。
- **フクロウグリーンライト**（`#89e219`）：ホバー、ソフトフィル。
- **フクロウグリーンペール**（`#dbf8c5`）：ソフトサーフェス、成功バナー。

### セカンダリアクセント
- **ストリークオレンジ**（`#ff9600`）：ストリークカウンター、炎アイコン、プレミアムエネルギー。
- **ストリークオレンジディープ**（`#cc7a00`）：オレンジのプレス状態。
- **ジェムピンク**（`#ce82ff`）：ジェム通貨、Super Duolingo。
- **ウナギブルー**（`#1cb0f6`）：ヒントボタン、情報リンク。
- **カーディナルレッド**（`#ff4b4b`）：不正解、ライフ喪失。
- **ビーイエロー**（`#ffc800`）：プロバッジ、実績。

### サーフェス
- **スノー**（`#ffffff`）：プライマリ背景。
- **ウナギ**（`#f7f7f7`）：セクション区切り、セカンダリサーフェス。
- **スワン**（`#e5e5e5`）：無効化背景、インセットブロック。
- **ウルフ**（`#777777`）：ダークディバイダー、セカンダリテキスト。

### インクとテキスト
- **ウナギブラック**（`#3c3c3c`）：プライマリテキスト。
- **ウルフ**（`#777777`）：セカンダリテキスト、キャプション。
- **ヘア**（`#afafaf`）：無効化、プレースホルダー。

### ボーダー
- **スワン**（`#e5e5e5`）：標準 2px ボーダー。
- **ヘア**（`#afafaf`）：ホバー時の強調ボーダー。

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

### フォントファミリー
- **ディスプレイ / UI / 見出し**：`Feather Bold`、フォールバック：`'DIN Round Pro', 'Helvetica Neue', sans-serif`
- **本文 / 長文**：`Mona Sans`、フォールバック：`'Helvetica Neue', system-ui, sans-serif`
- **コード（稀、学校/管理）**：`JetBrains Mono`、フォールバック：`ui-monospace, Menlo, monospace`

### 階層

| 役割 | フォント | サイズ | ウェイト | 行間 | 字間 | 備考 |
|------|------|------|--------|-------------|----------------|-------|
| ディスプレイ | Feather Bold | 56px (3.5rem) | 800 | 1.05 | -0.01em | オンボーディングヒーロー |
| H1 | Feather Bold | 32px (2rem) | 800 | 1.15 | -0.005em | ページタイトル |
| H2 | Feather Bold | 24px (1.5rem) | 800 | 1.2 | normal | セクション見出し |
| H3 | Feather Bold | 18px (1.125rem) | 700 | 1.25 | normal | カードタイトル、レッスン行 |
| 本文ラージ | Mona Sans | 17px (1.0625rem) | 500 | 1.5 | normal | レッスンプロンプト、説明 |
| 本文 | Mona Sans | 15px (0.9375rem) | 400 | 1.5 | normal | 標準テキスト |
| キャプション | Mona Sans | 13px (0.8125rem) | 600 | 1.4 | 0.01em | XP カウンター、メタデータ |
| ボタン | Feather Bold | 16px (1rem) | 800 | 1.2 | 0.02em | 標準ボタンラベル |
| ストリーク | Feather Bold | 14px (0.875rem) | 800 | 1.2 | normal | ストリーク数字、炎の上 |

### 原則
- **800 がデフォルト**：Feather Bold は見出しとボタンで 800 で動作します。700 はこのシステムでは弱く見えます。
- **大きなタイプ**：見出しサイズは典型的なプロダクトブランドより 25〜40% 大きく——自信がアイデンティティです。
- **丸みのある字形**：すべてのグリフにソフトなターミナルがあります。シャープなセリフは親しみやすさの契約を壊します。

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

### ボタン

**プライマリ（フクロウグリーン）**
- 背景：`#58cc02`
- テキスト：`#ffffff`
- パディング：14px 24px
- 角丸：16px
- ボーダーボトム：4px solid `#58a700`（ぶ厚いシャドウ）
- ホバー：背景 `#89e219`
- アクティブ：translate-y 4px、ボーダーボトム 0（ボタンが「押される」）
- 使用：「続ける」、「確認」、メイン CTA。

**セカンダリ（ボトムシャドウ付き白）**
- 背景：`#ffffff`
- テキスト：`#777777`
- ボーダー：2px solid `#e5e5e5`
- ボーダーボトム：4px solid `#e5e5e5`
- 角丸：16px
- パディング：14px 24px
- ホバー：テキスト `#3c3c3c`、ボーダー `#afafaf`

**ストリークオレンジ**
- 背景：`#ff9600`
- テキスト：`#ffffff`
- ボーダーボトム：4px solid `#cc7a00`
- 使用：ストリークゴール、「ストリーク開始」

**エラー（カーディナルレッド）**
- 背景：`#ff4b4b`
- テキスト：`#ffffff`
- ボーダーボトム：4px solid `#cc3b3b`
- 使用：不正解フィードバック。

### カード / レッスンタイル
- 背景：`#ffffff`
- ボーダー：2px solid `#e5e5e5`
- ボーダーボトム：4px solid `#e5e5e5`
- 角丸：16px
- パディング：16px
- ホバー：2px 浮上、シャドウ `0 4px 0 #d7d7d7`

### スキルツリーノード（レッスンバブル）
- サイズ：80×72px
- 背景：スキルカラー色調（アクティブは緑、ロック済みはグレー）
- ボーダーボトム：6px solid 暗いバリアント
- 角丸：50%（円形）
- アクティブ：1.6s ごとに 1.0 → 1.05 でパルス

### 入力
- 背景：`#ffffff`
- ボーダー：2px solid `#e5e5e5`
- 角丸：12px
- パディング：12px 16px
- フォーカス：ボーダー `#1cb0f6`（ウナギブルー）、リング `0 0 0 3px rgba(28, 176, 246, 0.2)`

### プログレスバー
- トラック：`#e5e5e5`
- フィル：`#58cc02`（またはストリーク時 `#ff9600`）
- 角丸：9999px
- 高さ：16px
- アニメーションフィル：増分時 320ms ease-out。

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

- **ベースユニット**：4px。スケール：4、8、12、16、24、32、48、64。
- **コンテナ**：最大 1080px、24px ガター。
- **レッスンツリー列**：幅 320px；デスクトップで中央配置。

## 6. モーション

- **デュレーション**：ボタンプレス 180ms；スキルノードアンロック 320ms；アクティブノードパルス 1.6s。
- **イージング**：`cubic-bezier(0.34, 1.56, 0.64, 1)`（バックアウト、わずかなオーバーシュート）アンロック用。
- **マスコット**：Duo は 4〜6s ごとにまばたきし、ストリークのマイルストーンでジャンプ（480ms ease-out スプリング）。

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

- 高彩度のフクロウグリーン、ぶ厚いボトムシャドウ、丸みのあるレッスンジオメトリは一緒に保ってください。フラットなグリーンボタン単体では Duolingo らしく読まれません。
- 特大の太字テキストは、プロダクトが励ましやフィードバックを必要とするレッスン、ストリーク、進捗の瞬間のために取っておいてください。
- プレイフルなモーションは進捗状態の変化の周りに控えめに使い、すべてのコントロールに汎用のバウンシーアニメーションを使うのは避けてください。