version: alpha name: Webflow-Inspired-design-analysis description: An inspired interpretation of Webflow's design language — a visual web development platform whose surface contrasts a deep near-black #080808 primary against a generous white canvas, broken by a five-stop chromatic accent system (purple / pink / blue / orange / green) that maps to the brand's product categories, and anchored by the proprietary WF Visual Sans family used at restrained 500 / 600 weights with negative tracking.

colors: primary: "#080808" on-primary: "#ffffff" ink: "#080808" ink-strong: "#222222" body: "#363636" body-mid: "#5a5a5a" mute: "#898989" mute-soft: "#ababab" hairline: "#d8d8d8" canvas: "#ffffff" accent-purple: "#7a3dff" accent-pink: "#ed52cb" accent-blue: "#3b89ff" accent-blue-deep: "#006acc" accent-blue-info: "#146ef5" accent-orange: "#ff6b00" accent-green: "#00d722" accent-yellow: "#ffae13" accent-red: "#ee1d36"

typography: display-xxl: fontFamily: WF Visual Sans Variable, Inter, system-ui, -apple-system, sans-serif fontSize: 80px fontWeight: 600 lineHeight: 83.2px letterSpacing: -0.8px display-xl: fontFamily: WF Visual Sans Variable, Inter, system-ui, sans-serif fontSize: 56px fontWeight: 600 lineHeight: 58.24px display-lg: fontFamily: WF Visual Sans Variable, Inter, system-ui, sans-serif fontSize: 44.8px fontWeight: 600 lineHeight: 46.6px display-md: fontFamily: WF Visual Sans Variable, Inter, system-ui, sans-serif fontSize: 32px fontWeight: 500 lineHeight: 41.6px display-sm: fontFamily: WF Visual Sans Variable, Inter, system-ui, sans-serif fontSize: 24px fontWeight: 500 lineHeight: 31.2px display-xs: fontFamily: WF Visual Sans Variable, Inter, system-ui, sans-serif fontSize: 20px fontWeight: 500 lineHeight: 28px eyebrow-uppercase: fontFamily: WF Visual Sans Variable, Inter, system-ui, sans-serif fontSize: 15px fontWeight: 500 lineHeight: 19.5px letterSpacing: 1.5px eyebrow-uppercase-sm: fontFamily: WF Visual Sans Variable, Inter, system-ui, sans-serif fontSize: 12px fontWeight: 500 lineHeight: 12px letterSpacing: 0.6px body-lg: fontFamily: WF Visual Sans Variable, Inter, system-ui, sans-serif fontSize: 28.8px fontWeight: 400 lineHeight: 46.08px letterSpacing: -0.288px body-md: fontFamily: WF Visual Sans Variable, Inter, system-ui, sans-serif fontSize: 16px fontWeight: 400 lineHeight: 25.6px letterSpacing: -0.16px body-md-strong: fontFamily: WF Visual Sans Variable, Inter, system-ui, sans-serif fontSize: 16px fontWeight: 500 lineHeight: 25.6px letterSpacing: -0.16px body-sm: fontFamily: WF Visual Sans Variable, Inter, system-ui, sans-serif fontSize: 14px fontWeight: 400 lineHeight: 22.4px body-sm-strong: fontFamily: WF Visual Sans Variable, Inter, system-ui, sans-serif fontSize: 14px fontWeight: 500 lineHeight: 22.4px caption: fontFamily: WF Visual Sans Variable, Inter, system-ui, sans-serif fontSize: 12.8px fontWeight: 550 lineHeight: 15.36px caption-mono: fontFamily: WFVisualSans-Mono, Inconsolata, ui-monospace, SFMono-Regular, Menlo, monospace fontSize: 12px fontWeight: 400 lineHeight: 18px button-md: fontFamily: WF Visual Sans Variable, Inter, system-ui, sans-serif fontSize: 16px fontWeight: 500 lineHeight: 25.6px letterSpacing: -0.16px

rounded: none: 0px xs: 2px sm: 4px md: 8px full: 9999px

spacing: xxs: 2px xs: 4px sm: 8px md: 12px lg: 16px xl: 20px 2xl: 24px 3xl: 32px

components: nav-bar: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm-strong}" padding: "{spacing.lg} {spacing.3xl}" nav-link: textColor: "{colors.ink}" typography: "{typography.body-sm-strong}" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "{spacing.md} {spacing.xl}" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "{spacing.md} {spacing.xl}" button-text-arrow: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" padding: "{spacing.xl} 0" button-icon-circular: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.full}" padding: "{spacing.sm}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "{spacing.md} {spacing.lg}" badge-info: backgroundColor: "{colors.accent-blue-info}" textColor: "{colors.on-primary}" typography: "{typography.caption}" rounded: "{rounded.sm}" padding: "{spacing.xs} {spacing.sm}" badge-info-soft: backgroundColor: "{colors.canvas}" textColor: "{colors.accent-blue-info}" typography: "{typography.caption}" rounded: "{rounded.sm}" padding: "{spacing.xs} {spacing.sm}" card-feature: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "{spacing.3xl}" card-feature-dark: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "{spacing.3xl}" card-pricing: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "{spacing.3xl}" hero-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-xxl}" padding: "{spacing.3xl} {spacing.3xl}" hero-band-dark: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.display-xxl}" padding: "{spacing.3xl} {spacing.3xl}" content-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-lg}" padding: "{spacing.3xl} {spacing.3xl}" category-card-purple: backgroundColor: "{colors.accent-purple}" textColor: "{colors.on-primary}" typography: "{typography.display-md}" rounded: "{rounded.md}" padding: "{spacing.3xl}" category-card-blue: backgroundColor: "{colors.accent-blue}" textColor: "{colors.on-primary}" typography: "{typography.display-md}" rounded: "{rounded.md}" padding: "{spacing.3xl}" category-card-orange: backgroundColor: "{colors.accent-orange}" textColor: "{colors.on-primary}" typography: "{typography.display-md}" rounded: "{rounded.md}" padding: "{spacing.3xl}" category-card-green: backgroundColor: "{colors.accent-green}" textColor: "{colors.primary}" typography: "{typography.display-md}" rounded: "{rounded.md}" padding: "{spacing.3xl}" category-card-pink: backgroundColor: "{colors.accent-pink}" textColor: "{colors.on-primary}" typography: "{typography.display-md}" rounded: "{rounded.md}" padding: "{spacing.3xl}" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.body-mid}" typography: "{typography.body-sm}" padding: "{spacing.3xl} {spacing.3xl}"

─── Examples (illustrative) — auto-derived; resolve any TO_FILL markers below ───

ex-pricing-tier: description: "Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface." backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" rounded: "{rounded.md}" padding: "{spacing.3xl}" ex-pricing-tier-featured: description: "Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode)." backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" rounded: "{rounded.md}" padding: "{spacing.3xl}" ex-product-selector: description: "What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery)." backgroundColor: "{colors.canvas}" rounded: "{rounded.md}" padding: "{spacing.3xl}" ex-cart-drawer: description: "Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart)." backgroundColor: "{colors.canvas}" rounded: "{rounded.md}" padding: "{spacing.2xl}" item-divider: "{colors.hairline}" ex-app-shell-row: description: "Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator." backgroundColor: "{colors.canvas}" activeIndicator: "{colors.primary}" rounded: "{rounded.sm}" padding: "{spacing.md} {spacing.lg}" ex-data-table-cell: description: "Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm." headerBackground: "{colors.canvas}" headerTypography: "{typography.caption}" bodyTypography: "{typography.body-sm}" cellPadding: "{spacing.md} {spacing.lg}" rowBorder: "{colors.hairline}" ex-auth-form-card: description: "Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside." backgroundColor: "{colors.canvas}" rounded: "{rounded.md}" padding: "{spacing.3xl}" ex-modal-card: description: "Modal dialog surface — same chrome as feature-card with elevated shadow." backgroundColor: "{colors.canvas}" rounded: "{rounded.md}" padding: "{spacing.3xl}" ex-empty-state-card: description: "Empty-state illustration frame." backgroundColor: "{colors.canvas}" rounded: "{rounded.md}" padding: "{spacing.3xl}" captionTypography: "{typography.body-md}" ex-toast: description: "Toast notification surface — feature-card shape + medium shadow." backgroundColor: "{colors.canvas}" rounded: "{rounded.md}" padding: "{spacing.md} {spacing.lg}" typography: "{typography.body-sm}"

概览

Webflow 将自己定位为可视化 Web 开发平台——其营销表面读起来像一个自信的专业产品，而不是科技创业公司。默认页面是宽裕的白色画布({colors.canvas})，以深近黑色 {colors.primary}(#080808)作为品牌的主 CTA、字体和墨色。在这个克制的主色周围，品牌叠加了五停顿的彩色点缀系统——{colors.accent-purple} #7a3dff、{colors.accent-pink} #ed52cb、{colors.accent-blue} #3b89ff、{colors.accent-orange} #ff6b00、{colors.accent-green} #00d722——每个映射到平台的一个产品类别(设计、CMS、托管、电商等)。这些点缀作为整卡片填充出现在产品类别网格中，而不是按钮颜色；品牌的主 CTA 保持近黑色。

字体承载第二个决定性的声音。专有的 WF Visual Sans Variable 字体家族以 500 / 600 字重承载每个展示字、正文和标签角色——品牌从不使用比 semibold 更粗的，也从不使用比 regular 更细的。首屏展示字号 80 px / 600 字重 / -0.8 px 字距——自信但不喧嚣。每个分区标题上方以 15 px 500 字重 + 1.5 px 正字距的全大写小标签标记。

形状系统是克制的。按钮采用紧凑的 {rounded.sm} 4 px 圆角——既不是胶囊也不是方形；品牌读起来像是经过精心打造的。卡片提升到 {rounded.md} 8 px。胶囊({rounded.full} 9999 px)保留给圆形图标容器。特色卡片上的分层投影增加适度的抬升，但从不感觉材质厚重。

关键特征:

• 双色转化层级——{colors.primary} 近黑色用于每个主 CTA，白底细线用于每个次按钮。彩色点缀用作类别卡片的整表面填充，从不用作按钮背景。
• 品牌的标志是它的五停顿彩色类别调色板：紫 / 粉 / 蓝 / 橙 / 绿，每个绑定到一个产品表面。以全饱和度用作卡片填充。
• 首屏字体 80 px 600 字重 + -0.8 px 字距——克制、自信，从不广告牌式喧嚣。
• WF Visual Sans Variable 是单一字体家族；品牌不为正文 / 展示字使用单独的无衬线字体。WFVisualSans-Mono / Inconsolata 仅出现在技术说明中。
• 紧凑的 {rounded.sm} 4 px 按钮几何；卡片 {rounded.md} 8 px。品牌从不使用胶囊 CTA。
• 特色卡片上的分层多偏移投影——品牌唯一的抬升提示。

配色

品牌与点缀

• 墨黑({colors.primary} — #080808):品牌的主要转化色。每个主 CTA，每个标题，每个文字商标。比纯黑更深，读起来像品牌化的。
• 点缀紫({colors.accent-purple} — #7a3dff):五个彩色类别点缀之一——用于设计 / 构建产品表面。
• 点缀粉({colors.accent-pink} — #ed52cb):品红点缀——用于动画 / 交互产品表面。
• 点缀蓝({colors.accent-blue} — #3b89ff):亮青蓝——用于 SEO / 分析产品表面。
• 深点缀蓝({colors.accent-blue-deep} — #006acc):用于强调链接的更深蓝色。
• 信息点缀蓝({colors.accent-blue-info} — #146ef5):徽标信息蓝。
• 点缀橙({colors.accent-orange} — #ff6b00):用于托管 / 基础设施产品表面。
• 点缀绿({colors.accent-green} — #00d722):用于电商 / 成功状态表面。
• 点缀黄({colors.accent-yellow} — #ffae13):用于警告 / 协作产品表面。
• 点缀红({colors.accent-red} — #ee1d36):用于错误 / 破坏状态。

表面

• 画布({colors.canvas} — #ffffff):默认页面背景。
• 细线({colors.hairline} — #d8d8d8):1 px 实心边框——输入边框、卡片外壳、分隔线。

文字

• 墨色({colors.ink} — #080808):默认文字和标题。
• 强墨色({colors.ink-strong} — #222222):近黑色强调。
• 正文({colors.body} — #363636):默认段落文字颜色。
• 中正文({colors.body-mid} — #5a5a5a):中等强调的次要文字——页脚行、说明文字。
• 静音({colors.mute} — #898989):较低优先级的文字。
• 柔静音({colors.mute-soft} — #ababab):最浅的文字角色——占位文字、细字脚注。

语义

• 信息蓝({colors.accent-blue-info} — #146ef5):信息徽标 / 通知。
• 成功绿({colors.accent-green} — #00d722):成功指示器。
• 警告黄({colors.accent-yellow} — #ffae13):警告状态。
• 错误红({colors.accent-red} — #ee1d36):验证 / 破坏。

字体排版

字体族

一款专有字体家族承载每个字体角色:WF Visual Sans Variable(带 Arial 系统回退)。字重 400 / 500 / 550 / 600 都存在；品牌从不使用 700 / 800 / 900。等宽变体——WFVisualSans-Mono 带 Inconsolata 回退——处理罕见的技术说明瞬间和代码风格标签。在 mono 变体中启用 OpenType 功能 "ss02"、"ss10"、"zero"，以使用样式化的零字形。

层级

原则

• 字重上限为 600。 品牌从不使用 700+。自信，而非喧嚣。
• 展示尺度下负字距。 80 px 下 -0.8 px,通过各层级缩放。紧凑的字距是声音的一部分。
• 全大写小标签标记每个分区。 15 px / 500 字重 / 1.5 px 正字距是品牌的标志标签样式。
• 整个系统单一字体家族。 没有单独的展示字 vs 正文字体。变量轴承担工作。

字体替代品说明

WF Visual Sans Variable 是专有的。开源替代品:

• 展示 + 正文——Inter 400 / 500 / 600 字重，启用 font-feature-settings: "ss01"，是最接近的风格匹配。
• 等宽字体——Inconsolata(已记录的回退)或 DM Mono。

布局

间距系统

• 基础单位:4 px(在精细内边距中频繁出现 0.4 / 0.8 子倍数)。
• Token:{spacing.xxs} 2 px · {spacing.xs} 4 px · {spacing.sm} 8 px · {spacing.md} 12 px · {spacing.lg} 16 px · {spacing.xl} 20 px · {spacing.2xl} 24 px · {spacing.3xl} 32 px。
• 章节内边距:首屏 / 内容色带使用 {spacing.3xl} 32 px 内边距，垂直间距宽裕。
• 卡片内部内边距:功能和价格卡片使用 {spacing.3xl} 32 px。

网格与容器

• 营销容器是宽的(实际上边缘对齐，带 {spacing.3xl} 内边距)。
• 类别卡片网格:桌面端 2 / 3 栏，混合尺寸(一些较大的功能卡片跨 2 列)。
• 价格层网格:桌面端 3 栏，移动端 1 栏。

响应式策略

断点

触控目标

按钮渲染约 44 px(12 px 垂直内边距 + 25.6 px 行高)。满足 WCAG AAA。

折叠策略

• 导航:桌面端为完整链接行。移动端为汉堡菜单。
• 类别卡片网格:桌面端 2 / 3 / 4 栏，移动端降为 1 栏。
• 价格层:桌面端 3 / 4 栏，移动端 1 栏。

图像行为

• 类别卡片:全屏出血纯色填充(无摄影)。
• 产品截图:16:9 嵌入 {rounded.md} 卡片外壳内。
• 营销表面上没有肖像图像。

层次与深度

装饰性深度

• 彩色类别卡片(全饱和紫 / 粉 / 蓝 / 橙 / 绿填充)通过纯色对比相对于白色画布提供视觉深度。
• 分层阴影配方是品牌唯一的真正氛围效果——它们是 5 停顿投影堆栈，单个不透明度极低。

形状

圆角刻度

组件

按钮

button-primary——标准的近黑色 CTA。

• 背景 {colors.primary}(#080808),文字 {colors.on-primary} 白色,标签 {typography.button-md}(16 px 500 字重),内边距 {spacing.md} {spacing.xl},形状 {rounded.sm} 4 px。

button-secondary——白色轮廓 CTA。

• 背景 {colors.canvas},文字 {colors.ink},1 px 实心 {colors.hairline} 边框,相同的字体 + 内边距 + 形状。

button-text-arrow——带箭头的下划线文本链接 CTA，用于长篇分区。

• 背景 {colors.canvas},文字 {colors.ink},无边框,正文 {typography.button-md},内边距 {spacing.xl} 0。

button-icon-circular——用于轮播控件的圆形图标按钮。

• 背景 {colors.canvas},墨色图标,形状 {rounded.full}。

卡片与容器

card-feature——画布上的标准功能卡片。

• 背景 {colors.canvas},文字 {colors.ink},1 px 实心 {colors.hairline},内边距 {spacing.3xl},形状 {rounded.md}。在特色时常抬升到 2 级阴影。

card-feature-dark——近黑色上的极性翻转功能卡片。

• 背景 {colors.primary},文字 {colors.on-primary},内边距 {spacing.3xl},形状 {rounded.md}。

card-pricing——价格层卡片。

• 背景 {colors.canvas},文字 {colors.ink},细线边框,内边距 {spacing.3xl},形状 {rounded.md}。特色层上有分层阴影。

输入与表单

text-input——标准文本输入。

• 背景 {colors.canvas},文字 {colors.ink},1 px 实心 {colors.hairline},正文 {typography.body-md},内边距 {spacing.md} {spacing.lg},形状 {rounded.sm}。

导航

nav-bar——固定顶部导航。

• 背景 {colors.canvas},文字 {colors.ink},内边距 {spacing.lg} {spacing.3xl}。

nav-link——nav-bar 内的链接项。

• 文字 {colors.ink},使用 {typography.body-sm-strong}。

footer——页脚色带。

• 背景 {colors.canvas},文字 {colors.body-mid},内边距 {spacing.3xl} {spacing.3xl}。正文使用 {typography.body-sm}。

标志性组件

hero-band——白色首屏色带。

• 背景 {colors.canvas},文字 {colors.ink},内边距 {spacing.3xl} {spacing.3xl}。标题使用 {typography.display-xxl}(80 px 600 字重)。

hero-band-dark——极性翻转的近黑色首屏色带(用于某些活动页面)。

• 背景 {colors.primary},文字 {colors.on-primary},相同的内边距 / 标题尺度。

content-band——画布上的标准内容色带。

• 背景 {colors.canvas},文字 {colors.ink},内边距 {spacing.3xl} {spacing.3xl}。分区标题使用 {typography.display-lg}。

category-card-purple——整填充的紫色类别卡片。

• 背景 {colors.accent-purple},白色文字,内边距 {spacing.3xl},形状 {rounded.md}。

category-card-pink——整填充的粉色类别卡片。

• 背景 {colors.accent-pink},白色文字,内边距 {spacing.3xl},形状 {rounded.md}。

category-card-blue——整填充的蓝色类别卡片。

• 背景 {colors.accent-blue},白色文字,内边距 {spacing.3xl},形状 {rounded.md}。

category-card-orange——整填充的橙色类别卡片。

• 背景 {colors.accent-orange},白色文字,内边距 {spacing.3xl},形状 {rounded.md}。

category-card-green——整填充的绿色类别卡片(为可读性使用墨色文字对抗较浅绿色)。

• 背景 {colors.accent-green},文字 {colors.primary}(墨色),内边距 {spacing.3xl},形状 {rounded.md}。

badge-info + badge-info-soft——实心蓝或柔和轮廓的信息徽标。

• 实心:背景 {colors.accent-blue-info} 白色文字。柔:背景画布,文字 {colors.accent-blue-info}。两者使用 {typography.caption}(12.8 px 550 字重)——品牌的标志 550 字重说明。

示例(说明性)

自动派生的工具镜像演示表面(scripts/derive-examples-block.mjs)。每个 ex-* 条目引用品牌原生基元,因此下游消费者(/preview-design、/generate-kit)以一致的方式重新设置相同的 10 个表面。TO_FILL 标记表示缺失的基元——在 LLM 判断步骤中解决。

ex-pricing-tier——默认价格层卡片。重用功能卡片外壳,使用品牌 canvas-soft 表面。

• 属性:backgroundColor、textColor、borderColor、rounded、padding

ex-pricing-tier-featured——特色 / 高亮价格层——极性翻转表面(亮模式下深色填充 + 浅色文字,暗模式下浅色填充 + 深色文字)。

• 属性:backgroundColor、textColor、rounded、padding

ex-product-selector——What's Included 摘要卡片——为 SaaS / B2B 垂直领域重新利用(不是字面意义上的产品画廊)。

• 属性:backgroundColor、rounded、padding

ex-cart-drawer——订阅摘要——为 SaaS / B2B 重新利用(按附加项的逐项条目,不是字面意义上的购物车)。

• 属性:backgroundColor、rounded、padding、item-divider

ex-app-shell-row——App Shell 示例内的侧边栏导航行。激活态使用品牌主色作为指示器。

• 属性:backgroundColor、activeIndicator、rounded、padding

ex-data-table-cell——默认数据表 th + td 外壳。表头使用 mono-caps 标题字体;正文使用 body-sm。

• 属性:headerBackground、headerTypography、bodyTypography、cellPadding、rowBorder

ex-auth-form-card——登录 / 注册卡片。重用功能卡片外壳,内含 text-input 基元。

• 属性:backgroundColor、rounded、padding

ex-modal-card——模态对话框表面——与功能卡片外壳相同,带抬升阴影。

• 属性:backgroundColor、rounded、padding

ex-empty-state-card——空状态插图框。

• 属性:backgroundColor、rounded、padding、captionTypography

ex-toast——Toast 通知表面——功能卡片形状 + 中等阴影。

• 属性:backgroundColor、rounded、padding、typography

推荐与避免

推荐

• 为每个主 CTA、每个标题和每个文字商标保留 {colors.primary}(#080808)。近黑色是转化色。
• 使用五个彩色点缀(紫 / 粉 / 蓝 / 橙 / 绿)作为整填充类别卡片,而不是按钮背景。
• 以 {typography.display-xxl} 600 字重 + -0.8 px 字距设置首屏标题。
• 在每个字体角色使用专有的 WF Visual Sans 字体家族。
• 按钮使用 {rounded.sm} 4 px,卡片使用 {rounded.md} 8 px。品牌从不使用胶囊 CTA。
• 在特色卡片上使用分层多停顿投影——品牌的独特抬升配方。

避免

• 不要将按钮中等字重提升到 700+。品牌的字重上限是 600。
• 不要将彩色点缀用作按钮背景。它们是表面填充，不是动作。
• 不要将 CTA 渲染为胶囊。品牌的按钮几何是紧凑的 4 px 矩形。
• 不要引入第六个点缀色。五停顿调色板就是系统。