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

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

> Category: デザイン・クリエイティブ
> ビジュアル Web ビルダー。ブルーアクセントの洗練されたマーケティングサイト美学。

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

Webflow のウェブサイトは、視覚的に豊かなツール主体のプラットフォームです。クリーンな白いサーフェス、シグネチャカラーの Webflow ブルー（`#146ef5`）、そして豊富なセカンダリカラーパレット（パープル、ピンク、グリーン、オレンジ、イエロー、レッド）を通じて「コードなしでデザインする」という世界観を伝えています。カスタムの WF Visual Sans Variable フォントは、ディスプレイにウェイト 600、本文にウェイト 500 を使用し、自信に満ちた精密なタイポグラフィシステムを形成しています。

**主な特徴：**
- ニアブラック（`#080808`）のテキストを乗せたホワイトキャンバス
- Webflow ブルー（`#146ef5`）をプライマリブランドカラーおよびインタラクティブカラーとして使用
- WF Visual Sans Variable——ウェイト 500～600 のカスタム可変フォント
- 豊富なセカンダリパレット：パープル `#7a3dff`、ピンク `#ed52cb`、グリーン `#00d722`、オレンジ `#ff6b00`、イエロー `#ffae13`、レッド `#ee1d36`
- 控えめな 4px～8px の角丸——丸みを帯びず、シャープな印象
- 多層シャドウスタック（5 層カスケードシャドウ）
- 大文字ラベル：10px～15px、ウェイト 500～600、広めのレタースペーシング（0.6px～1.5px）
- ボタンのホバー時に translate(6px) アニメーション

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

### プライマリ
- **ニアブラック**（`#080808`）：プライマリテキスト
- **Webflow ブルー**（`#146ef5`）：`--_color---primary--webflow-blue`、プライマリ CTA およびリンク
- **ブルー 400**（`#3b89ff`）：`--_color---primary--blue-400`、明るめのインタラクティブブルー
- **ブルー 300**（`#006acc`）：`--_color---blue-300`、暗めのブルーバリアント
- **ボタンホバーブルー**（`#0055d4`）：`--mkto-embed-color-button-hover`

### セカンダリアクセント
- **パープル**（`#7a3dff`）：`--_color---secondary--purple`
- **ピンク**（`#ed52cb`）：`--_color---secondary--pink`
- **グリーン**（`#00d722`）：`--_color---secondary--green`
- **オレンジ**（`#ff6b00`）：`--_color---secondary--orange`
- **イエロー**（`#ffae13`）：`--_color---secondary--yellow`
- **レッド**（`#ee1d36`）：`--_color---secondary--red`

### ニュートラル
- **グレー 800**（`#222222`）：ダークセカンダリテキスト
- **グレー 700**（`#363636`）：ミッドテキスト
- **グレー 300**（`#ababab`）：ミュートテキスト、プレースホルダー
- **ミッドグレー**（`#5a5a5a`）：リンクテキスト
- **ボーダーグレー**（`#d8d8d8`）：ボーダー、ディバイダー
- **ボーダーホバー**（`#898989`）：ホバー時のボーダー

### シャドウ
- **5 層カスケード**：`rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px`

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

### フォント：`WF Visual Sans Variable`、フォールバック：`Arial`

| 役割 | サイズ | ウェイト | 行高 | レタースペーシング | 備考 |
|------|------|--------|-------------|----------------|-------|
| ディスプレイヒーロー | 80px | 600 | 1.04 | -0.8px | |
| セクション見出し | 56px | 600 | 1.04 | normal | |
| サブ見出し | 32px | 500 | 1.30 | normal | |
| フィーチャータイトル | 24px | 500–600 | 1.30 | normal | |
| 本文 | 20px | 400–500 | 1.40–1.50 | normal | |
| 標準本文 | 16px | 400–500 | 1.60 | -0.16px | |
| ボタン | 16px | 500 | 1.60 | -0.16px | |
| 大文字ラベル | 15px | 500 | 1.30 | 1.5px | uppercase |
| キャプション | 14px | 400–500 | 1.40–1.60 | normal | |
| バッジ大文字 | 12.8px | 550 | 1.20 | normal | uppercase |
| マイクロ大文字 | 10px | 500–600 | 1.30 | 1px | uppercase |
| コード：Inconsolata（専用等幅フォント）

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

### ボタン
- 透明：テキスト `#080808`、ホバー時 translate(6px)
- ホワイトサークル：radius 50%、白背景
- ブルーバッジ：`#146ef5` 背景、radius 4px、ウェイト 550

### カード：`1px solid #d8d8d8`、radius 4px～8px
### バッジ：ブルーがかった背景、不透明度 10%、radius 4px

## 5. レイアウト
- スペーシング：小数スケール（1px、2.4px、3.2px、4px、5.6px、6px、7.2px、8px、9.6px、12px、16px、24px）
- 角丸：2px、4px、8px、50%——控えめでシャープ
- ブレークポイント：479px、768px、992px

## 6. 深度：5 層カスケードシャドウシステム

## 7. すべきこととすべきでないこと
- すべきこと：ウェイト 500～600 の WF Visual Sans Variable を使用する。CTA にはブルー（`#146ef5`）を使用する。角丸 4px。ホバー時 translate(6px)。
- すべきでないこと：機能的な要素の角丸を 8px 以上にしない。プライマリ CTA にセカンダリカラーを使用しない。

## 8. レスポンシブ：479px、768px、992px

## 9. Agent プロンプトガイド
- テキスト：ニアブラック（`#080808`）
- CTA：Webflow ブルー（`#146ef5`）
- 背景：ホワイト（`#ffffff`）
- ボーダー：`#d8d8d8`
- セカンダリ：パープル `#7a3dff`、ピンク `#ed52cb`、グリーン `#00d722`