ダウンロード

Webflow デザインシステム.

Webflow デザインシステム — ビジュアルWebビルダー。ブルーアクセントの洗練されたマーケティングサイト美学。

このプラグインを使う → GitHub で見る →

コンテキストの中で見る

同じデザイントークンを、ウェブサイト、アプリ、スライド、ポスターといったアーティファクトの種類にわたって適用しています。スクリーンショットではなく、このシステムでリスキンしたオリジナルのモックです。

ウェブサイト
スライド
アプリ
ポスター

デザイントークン

Open Design のトークン契約に準拠した 56 個のトークン。agent があらゆるアーティファクトをテーマ化するために読む、構造化されたパレット、タイプ、スペーシング、モーションの値そのものです。

サーフェス

  • --bg #ffffff
  • --surface #ffffff
  • --surface-warm var(--surface)

テキスト

  • --fg #080808
  • --fg-2 #363636
  • --muted #5a5a5a
  • --meta #ababab

ボーダー

  • --border #d8d8d8
  • --border-soft #ebebeb

アクセント

  • --accent #146ef5
  • --accent-on #ffffff
  • --accent-hover #0055d4
  • --accent-active color-mix(in oklab, var(--accent), black 14%)

セマンティック

  • --success #00d722
  • --warn #ffae13
  • --danger #ee1d36

タイポグラフィ

  • --font-display "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif
  • --font-body "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif
  • --font-mono "Inconsolata", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace

タイプスケール

  • --text-xs 12px
  • --text-sm 14px
  • --text-base 16px
  • --text-lg 20px
  • --text-xl 24px
  • --text-2xl 32px
  • --text-3xl 56px
  • --text-4xl 80px
  • --leading-body 1.6
  • --leading-tight 1.04
  • --tracking-display -0.01em

スペーシング

  • --space-1 4px
  • --space-2 8px
  • --space-3 12px
  • --space-4 16px
  • --space-5 20px
  • --space-6 24px
  • --space-8 32px
  • --space-12 48px
  • --section-y-desktop 96px
  • --section-y-tablet 64px
  • --section-y-phone 48px

角丸

  • --radius-sm 4px
  • --radius-md 4px
  • --radius-lg 8px
  • --radius-pill 9999px

エレベーション

  • --elev-flat none
  • --elev-ring 0 0 0 1px var(--border)
  • --elev-raised 0px 84px 24px rgba(0, 0, 0, 0), 0px 54px 22px rgba(0, 0, 0, 0.01), 0px 30px 18px rgba(0, 0, 0, 0.04), 0px 13px 13px rgba(0, 0, 0, 0.08), 0px 3px 7px rgba(0, 0, 0, 0.09)

フォーカス

  • --focus-ring 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)

モーション

  • --motion-fast 150ms
  • --motion-base 200ms
  • --ease-standard cubic-bezier(0.2, 0, 0, 1)

レイアウト

  • --container-max 1200px
  • --container-gutter-desktop 24px
  • --container-gutter-tablet 16px
  • --container-gutter-phone 12px

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

役割サイズウェイト行高レタースペーシング備考
ディスプレイヒーロー80px6001.04-0.8px
セクション見出し56px6001.04normal
サブ見出し32px5001.30normal
フィーチャータイトル24px500–6001.30normal
本文20px400–5001.40–1.50normal
標準本文16px400–5001.60-0.16px
ボタン16px5001.60-0.16px
大文字ラベル15px5001.301.5pxuppercase
キャプション14px400–5001.40–1.60normal
バッジ大文字12.8px5501.20normaluppercase
マイクロ大文字10px500–6001.301pxuppercase
コード：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
モード
design-system
シーン
design
サーフェス
web
Manifest ID
design-system-webflow

タグ

  • design-system
  • first-party
  • design
  • design-creative