造物云 DESIGN SYSTEM
ZAOWUYUN · DESIGN SYSTEM · V7

造物云设计系统
整站的单一可信来源。

颜色、渐变、字体、间距、圆角、阴影、动效与核心组件，都在这里定义一次。官网的每一个页面都从这套 token 与组件长出来——改这里，等于改全站。

token 提炼自官网 v7明暗双主题色块 / 代码点击即复制工艺细节对标真实设计令牌
01

品牌内核

Brand Essence

设计系统不是色卡的堆叠，而是一种态度的延续。造物云的视觉语言围绕三个词展开，所有 token 与组件都应服务于它们。

基础设施感

智能像电力一样随取随用。视觉要传达稳定、可计量、可信赖——克制的留白、精确的网格、可预期的交互。

专业冷感

面向企业的判断力。深空底色、紫蓝主调、思源黑体重字重标题，传达技术的深度与产品的成熟，不卖萌、不喧哗。

高光的活力

玻璃拟态、柔和渐变、轻盈的入场动画，在专业之上留一束光——让“企业级”不等于“冰冷”。

02

配色系统

Colors

全部色值以 CSS 变量管理，明暗主题各一套。点击任意色块即可复制其 CSS 变量名。主色为紫蓝，承担链接、强调与 CTA；语义色仅用于状态反馈，不作主色。

BACKGROUND · SURFACE

点击复制
页面底色
--bg
点击复制
表面 / 浮层
--surf
点击复制
表面 强
--surf2
点击复制
玻璃面
--glass

INK · 文字

点击复制
主文字
--fg
点击复制
次文字
--fg2
点击复制
辅助文字
--fg3

BRAND ACCENT · 品牌强调

点击复制
主强调 · 紫蓝
--accent
点击复制
深强调 · hover
--accent-deep
点击复制
强调底 · 浅
--acBg

SEMANTIC · 语义色（仅状态反馈）

点击复制
成功
--ok
点击复制
信息
--info
点击复制
警告
--warn
点击复制
错误
--err
对比度诚实账（数值为本页运行时实测，切换主题会重算）： --fg3 在明暗两主题都约 2.0–2.2，达不到大字 AA(3.0)，只可用于纯装饰，禁止承载正文； 暗色主按钮白字落在 #7B80FF 上仅 3.29，低于正文 AA(4.5) —— 当前作为「大字/UI 控件」勉强达 3:1，建议正文级按钮文字加粗到 ≥600 且字号 ≥16px，或在暗色下改用 --accent-deep（白字 5.05，达 AA）。其余主文字/次文字/主色链接均 ≥ AA。
03

渐变系统

Gradients

深色场景不用纯黑，而用多段径向渐变营造“光从一侧透入”的空间感。这是造物云区别于普通深色站的关键气质。

Hero 深空（--heroBg）
紫蓝 + 紫 + 青 三点径向光晕叠 #07070F。用于 Hero、CTA、宣言区。
主强调线性渐变
linear-gradient(135deg,#7B80FF,#5B5FE0)。用于主按钮、强调标记、数据高亮。
卡片头柔光
单色低透明斜向渐变。用于产品卡 / 图示区顶部背景。
页脚底色（--ftrBg）
跟随主题：浅色 #EFE9DE 暖白面板 · 深色 #0E0A1E 深蓝锚（SPEC §D canonical）。整站统一。
04

字体系统

Typography

一款中文字体撑全站：思源黑体（Source Han Sans / Noto Sans SC）。标题与正文同字体，靠字号 + 字重分层——展示标题最重只到 Bold 700（中文大字号下 900／800 会发方、显笨重，700 更清透有力），副标题 600，正文 Regular 400／Medium 500，不再混用衬线。拉丁字母、数字与 kicker 用 Space Grotesk；代码用系统等宽。全部 font-display:swap 异步加载，国内走 font.im 镜像，先以系统字渲染、字体到位再替换，绝不白屏。

Display · 思源黑体 700智能是基础设施56–68px / 700
H1 · 思源黑体 700接入任何模型40px / 700
H2 · 思源黑体 700为企业级需求而设计32px / 700
H3 · 思源黑体 700用好每一个 Token22px / 1.3
Body LG · 思源黑体 400统一管理所有 AI 模型的调用入口，智能路由、成本可控。17px / 1.7
Body · 思源黑体 400让每一条业务流水线具备 AI 决策能力。15px / 1.7
Small · 思源黑体 400辅助说明文字与图说。13px / 1.6
Latin / 数字 · Space GroteskZAOWUYUN 2026 · 99.9%数字 / 英文
Kicker · Space GroteskTOKEN HUB11px · .16em
Code · 等宽client.chat(model)仅代码
--display
思源黑体 Bold 700 · 标题（中文不上 900/800）
--sans
思源黑体 · 正文/界面/默认
--latin
Space Grotesk · 拉丁/数字
--code
系统等宽 · 仅代码

关键 旧字栈把系统宋体 Songti / SimSun 排在第一且从不加载 web 字体，全站实际回落到又细又糙的 SimSun。现已统一为思源黑体并真正加载。--serif 仅保留为长文引用的可选项，不作默认标题字。正式上线建议把 woff2 子集化／自托管，进一步压首屏。

04·5

图标系统

Iconography

全站只用单色线性图标，不用 emoji 表情。统一 24×24 网格、stroke-width 1.5、圆角端点与连接（round），描边一律 currentColor 随上下文取色。点击任一图标即可复制其 SVG。

云
模型
API
搜索
设置
闪电
数据
对话
文档
校验
用户
箭头
16
18
24
32

IN CONTEXT · 图标在组件里

已校验 
按钮内 16px · 徽章内 16px · 卡片图标位 22px on --acBg · 输入框前缀 17px
同一套线性图标，随容器取尺寸、用 currentColor 取色，不另画一套。

规范 DO

  • 24×24 viewBox，描边 stroke-width 1.5
  • 端点/拐角 round；只描边、不填充
  • 颜色用 currentColor，跟随文字/主色
  • 显示档：16 / 18 / 24 / 32，等比缩放
  • 卡片图标位用 --acBg 圆角底承托
  • 组件内复用同一套，随容器取尺寸与色

禁忌 DON'T

  • 不用 emoji 表情（🤖📷✨…）当图标
  • 不混用实心填充与线性两种风格
  • 不在一处随意改 stroke 粗细破坏一致性
  • 不把多色/写实图标塞进单色体系
05

间距

Spacing

以 4px 为基数的阶梯。组件内部用小档（--s-2/3/4），区块之间用中大档（--s-5/6/7），页面级垂直节奏用 --s-8/9。

06

圆角 + 阴影

Radius + Shadows

圆角偏大、偏柔，呼应玻璃拟态的圆润气质。阴影多层叠加而非单层重模糊：近处 1–2px 锐影界定边缘，远处大模糊负扩散托起浮感；浅主题再叠一层 0 0 0 1px 发丝环，几乎无影却有真实托起。手法对标 Linear / Vercel / Anthropic 的真实阴影令牌。

RADIUS

--r-sm8px
--r-md12px
--r-lg18px
--r-xl22px
--r-pill999px

SHADOW

--sh-1浮起
--sh-2模态
--sh-glass玻璃卡
07

动效

Motion

三档时长 + 两条曲线。微交互 150ms、常规过渡 250ms、入场动画 700ms。常规用 ease，需要弹性时用 ease-bounce。单元素最多一种动画，一律尊重 prefers-reduced-motion。把鼠标移到方块上看效果。

Hover
Lift
transition:.25s
transform:translateY(-4px)
Pulse
2s ease infinite
scale 1 → 1.12
Fade
In Up
.7s ease
opacity + translateY
--t-fast 150ms--t-base 250ms--t-slow 700ms --ease cubic-bezier(.4,1,.6,1)--ease-bounce cubic-bezier(.45,1.5,.55,1)
08

按钮

Buttons

全部胶囊形（--r-pill）。主按钮承担页面唯一的核心动作，次按钮用玻璃描边，幽灵按钮用于低优先级。

<button class="btn primary">预约演示</button>
<button class="btn secondary">探索产品</button>
<button class="btn ghost">了解更多</button>
<button class="btn primary sm">小号</button>
09

卡片

Cards

玻璃拟态卡是造物云的标志性容器：半透明底 + 顶部高光 + 大圆角 + 背景模糊。hover 时上浮 4px 并提亮边框。

智核 · API HUB

统一接入 50+ 大模型，智能路由、灰度发布与成本管控，让模型能力像电力一样随取随用。

<div class="card-demo">
  <div class="ic"><!-- icon --></div>
  <h4>标题</h4>
  <p>描述文字</p>
</div>
10

徽章

Badges

用于产品状态（Core / New / Beta）与语义提示。拉丁字（Space Grotesk）、胶囊形、低饱和底色。可加左侧圆点表示“活动中”。

Core 运行中 New Beta 已弃用 标签 
<span class="badge brand">Core</span>
<span class="badge ok"><span class="dot"></span>运行中</span>
<span class="badge info">New</span>
<span class="badge outline">标签</span>
11

表单

Forms

输入控件用表面底色 + 细边框，聚焦时主色边框 + 柔光环。标签在上、帮助文字在下，保持纵向节奏一致。

用于生成专属方案，不对外公开。 
<div class="field">
  <label>企业名称</label>
  <input class="input" placeholder="请输入公司全称">
  <span class="help">帮助文字</span>
</div>
12

表格

Table

呈现结构化数据。表头用 Space Grotesk 小字 + fg3、下描 1px --bdr；行分隔用极淡 --bdr-soft；hover 整行以 --surf 提示；数字列右对齐并用 tabular-nums 对齐位数。

模型上下文供应商日均调用
GPT-4o128KOpenAI4.20M
Claude 3.5200KAnthropic3.15M
Qwen-Max32K阿里云2.08M
DeepSeek R164KDeepSeek1.74M
 
<table class="ds-table">
  <thead><tr><th>模型</th><th class="num">日均调用</th></tr></thead>
  <tbody><tr><td class="strong">GPT-4o</td><td class="num">4.20M</td></tr></tbody>
</table>
13

提示气泡

Tooltip

悬停解释次要信息。深底反色气泡（--fg 底 / --bg 字），带小箭头，150ms 淡入并轻微上移。仅承载短说明，不放交互元素。把鼠标移到下面元素上查看。

近 24 小时的模型调用次数 Beta功能开放中，接口可能调整 
<span class="tt">
  <button class="btn ghost">调用量 ?</button>
  <span class="tt-pop">近 24 小时的调用次数</span>
</span>
14

空状态

Empty State

列表 / 面板无数据时的占位。虚线描边 + 表面底 + 线性图标 + 一句说明 + 一个明确的下一步动作，避免“空白让人以为坏了”。

还没有接入任何模型

连接你的第一个大模型供应商，开始用统一网关调度调用。

接入模型 
<div class="empty">
  <div class="ic"><svg>…</svg></div>
  <h4>还没有数据</h4><p>说明文字</p>
  <a class="btn primary">下一步</a>
</div>
已复制