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

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

由晶体标记（白色超椭圆底板 + 三面紫色晶体）与“造物云”字标组成。字标为独立 SVG，用 currentColor 随背景反相。深、浅、紫底都用同一枚完整标记——浅底只多补一层承托投影 + 发丝边，绝不拆掉白底板。三面明度顺序「顶亮 · 左深」不可改。

全部色值以 CSS 变量管理，明暗双主题各一套（点右上角切换）。主色为靛紫 #5B4FE6，承担链接、强调与 CTA；语义色仅用于状态反馈。点击任意色块复制其变量名。
主题分工：营销页（首页 / 关于）用浅色单主题，设计系统文档与控制台用明暗双主题——共享同名令牌，切 data-theme 换肤。

一款中文字体撑全站：思源黑体（Noto Sans SC）。标题与正文同字体，靠字号 + 字重分层——展示标题用 SemiBold 600（中文大字号下 700/900 偏方偏重，600 更清透、更接近 Google/Gemini 的从容气质）。拉丁字母、数字与 kicker 用 Space Grotesk。

全站只用单色线性图标，不用 emoji。统一 24×24 网格、描边 1.5、圆角端点，描边一律 currentColor 随上下文取色。

规范：统一 24×24 网格、描边 1.5、圆角端点；按钮内 16px、徽章内 14px、卡片图标位 22px；颜色一律 currentColor，随容器取色，不另画实心版。

以 4px 为基数的阶梯。组件内部用小档，区块之间用中大档，页面级垂直节奏用 64 / 96。

圆角偏大偏柔，呼应玻璃拟态。阴影多层叠加而非单层重模糊：近处锐影定边界，远处大模糊负扩散托浮起；浅色主题再叠一层发丝环。

同一层玻璃在不同透明度下承担不同层级。整站遵循一条表面阶梯：底 → 分区面 → 表面 / 卡片 → 玻璃浮层，越靠前的元素越透、越亮。相邻区域用「底色交替 + 发丝分隔线」建立呼吸节奏，重点区（Hero / CTA）才铺满主色光晕与点阵肌理。

玻璃质感只有在“背后有内容”时才看得出。下方底板固定为一张彩色图形＋网格的忙背景（不随主题变），三张卡用同一套白色、不同不透明度＋模糊叠加——透得越多、越能看到背后的图形，就是越“轻”的玻璃。

全站统一：1600px 容器 · 40px 页边距 · 12 栏栅格。内容按可读宽度设上限，区块用固定的纵向节奏；正文左对齐，仅 Hero / CTA / 巨幕居中。

三档时长 + 两条曲线：微交互 150ms、常规 250ms、入场 700ms。此外还有一层“呼吸”底噪——借鉴 Gemini 的科技质感：背景对话与光晕缓慢起伏，聚焦输入时转为“深呼吸”。一律尊重 prefers-reduced-motion。

动效哲学：深度靠“连续”而非“花哨”。状态之间用缓动过渡而非硬切；处理/思考用循环微动表达“系统在运转”；重点元素才叠加光晕与呼吸。任何一次交互只用一种动画，且都尊重 prefers-reduced-motion。

全站顶栏的唯一规范。三段式：品牌锁版 · 主导航 · 行动区。高 64px、粘顶、玻璃模糊；背景通栏、内容收进 1600 居中带、左右各 40 边距，与下方正文同宽对齐。信息架构对齐战略：产品（内核/产品分栏）→ 解决方案（按行业）→ 客户案例 → 定价 → 关于。行动区永远是「登录 + 预约演示」，CTA 是全站唯一的实心主色胶囊。

全站页尾的唯一规范。深色锚背景，三段式：品牌锚区 · 三栏导航 · 底栏合规。容器与正文同宽 1600 居中、左右各 40，粘在文档末尾（非 sticky）。品牌锚区含 logo、一句话定位、预约演示 CTA 与社媒；导航固定 Products / Solutions / Company 三栏；底栏放版权、ICP 与公安备案、法务链接。深浅主题各一套页脚令牌（--ftrBg / --ftrStrong / --ftrText / --ftrFaint）。

按钮全部胶囊形；卡片为玻璃拟态；徽章用于状态与产品标记；表单聚焦时主色描边 + 柔光环。

整页可直接复用的复合区块——由令牌与组件拼装而成，落地页从这里取用。色值全部走令牌，随主题自适应；CTA 带的品牌紫为固定值。

资产账本、复利曲线、用量看板——数据是造物云讲"资产化"故事的主角。图表语言统一：靛紫承载"你的资产"，湖蓝承载第二序列 / 对比维度，中性灰承载"成本 / 损耗"；网格极淡、坐标克制，让数字自己说话。

内容容器统一 1600 居中，桌面左右留白 40、移动 20。12 列栅格、列间距 24；断点自小到大逐级放开，先保证移动端可读，再往上补充。

系统对用户的回话：Alert 常驻页内、Toast 短暂浮层、Modal 打断确认。四种语义色各司其职，图标 + 文案双通道，不靠颜色单独传达。

空、加载、出错也是产品的一部分。空状态给下一步、加载用骨架占位、错误页给出路。语气保持笃定友好，不卖惨、不甩锅。

好设计对所有人成立。对比达 WCAG AA、焦点永远可见、命中区 ≥44px、颜色不作唯一信号、尊重减弱动效。

专业、笃定、有洞见。像一位懂技术也懂业务的顾问——说人话、给判断，不堆砌术语，不喊口号。中文一律用弯引号“”，不用 emoji。