下载

Webflow 设计系统.

Webflow 设计系统 — 可视化网页构建工具。蓝色调、精致的营销网站美学。

使用此插件 → 在 GitHub 上查看 →

在真实场景中查看

同一套设计 token 应用于不同类型的产物——网站、应用、幻灯片、海报。这些是用该系统重新换肤的原创样稿，而非截图。

网站
幻灯片
应用
海报

设计 token

56 个 token，符合 Open Design 的 token 契约——你的 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: 设计与创意 可视化网页构建器。以蓝色为主的精致营销网站美学。

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.04正常
副标题32px5001.30正常
功能标题24px500–6001.30正常
正文20px400–5001.40–1.50正常
标准正文16px400–5001.60-0.16px
按钮16px5001.60-0.16px
大写标签15px5001.301.5px大写
说明文字14px400–5001.40–1.60正常
徽章大写12.8px5501.20正常大写
微型大写10px500–6001.301px大写
代码：Inconsolata（配套等宽字体）

4. 组件样式

按钮

  • 透明按钮：文字色 #080808，悬停时 translate(6px)
  • 白色圆形：50% 圆角，白色背景
  • 蓝色徽章：#146ef5 背景，4px 圆角，字重 550

卡片：1px solid #d8d8d8，4px–8px 圆角

徽章：蓝色调背景，10% 不透明度，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。蓝色（#146ef5）用于 CTA。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