Design System
Design System

新魔方的视觉和表达系统

统一公司介绍、BP、路演材料、官网、海报和技术图的品牌口径、颜色、字体、组件和使用规则。

GitHub 打开设计系统仓库 Internal 返回内部工作台
新魔方设计系统总览图
Versionv1.4Product Clarity + Editorial Warmth
Sourcenovocube/design-systemtokens.mjs 是颜色、字体、间距的单一真源
SyncHEAD ab69d07internal 消费源仓库 token、组件和内容规范。
Rule8px max radius克制边框、少阴影、少装饰
Brand

品牌定位

设计系统服务于一个稳定表达：新魔方是智能体时代的智能生产基础设施公司。

30HTML / PPT 组件映射
8Gallery 样张
2Light / Dark 主题
v1.4Product Clarity + Editorial Warmth
品类 AI Production Infrastructure

智能生产基础设施

Slogan Where Intelligence Runs.

让智能运行在客户自己的边界内

产品口径 HyperNode + AIR

HyperNode 生产 Token，AIR 运行智能体，客户沉淀自己的智能资产。

Voice

表达规则

新魔方的表达要清楚、克制、工程化、可被尽调，不把未验证数字讲成事实。

推荐表达

  • 新魔方做的是 AI Production Infrastructure，智能生产基础设施。
  • HyperNode 生产 Token，AIR 运行智能体，客户沉淀自己的智能资产。
  • 从付费 PoC 验证可部署、可付费、可复制。

避免表达

  • 不说“替代云厂商”。
  • 不把新魔方讲成“GPU 服务器公司”。
  • 不使用空泛宏大、全行业通吃式表述。
v1.4

产品级秩序与编辑式温度

最新设计系统明确了风格方向：借鉴 Apple 的产品级秩序，借鉴 Anthropic 的编辑式温度，但保留新魔方自己的深潭青配色与工程表达。

保留

  • 深潭青、暖纸底、金色一次、Menlo 标签。
  • 真实产品图和产品级渲染图。
  • 清晰、克制、可读的技术说明气质。

不使用

  • 不复制外部品牌字体、色盘或资产。
  • 不使用赛博渐变、抽象光球、厚阴影或卡片墙。
  • 不做通用 AI 科技海报式装饰。
Foundations

基础规范

核心风格是编辑式数据严谨主义，配合克制的深潭青工程美学；页面要像产品公司写出的技术说明，而不是通用 AI 视觉模板。

Single Source

内部网页消费设计系统，不重新定义设计系统

`novocube/design-system` 是品牌、token、组件、图标、官网、app、报告和 PPT 的源；本页只展示当前 internal 如何使用这套规范。

Repository novocube/design-system Consumer novocube/novocube-internal

颜色

teal950#03191A
teal900#06292A
teal700#0B5755
teal500#1EAFA1
teal400#55D6C2
paper#F6F2EA
ink#1B1A17
goldDeep#846826
gold#C9A85C

字体

System Sans 中文正文优先 PingFang SC / Microsoft YaHei，英文和数字使用系统字体；技术标签使用 Menlo。
Display · 56新魔方封面大字 / 大数字
H1 · 44智能生产基础设施章节页标题
H2 · 34Where Intelligence Runs.页面标题
H3 · 28HyperNode + AIR图表标题 / 分区标题
Title · 22可靠 Token 生产卡片标题
Lead · 18让智能体从 demo 变成可治理的生产系统。引文 / 重点句
Body · 16客户系统跑在 AIR 之上，AIR 跑在 HyperNode 之上。正文最小可读字号
Label · 14AI Production Infrastructure标签 / 注释

原则

  • 少装饰、少边框、少口号。
  • 一页只允许一个金色强调时刻。
  • 任何文字不低于 14px，正文优先 16px 以上。
  • 优先使用真实或产品级渲染图。
Dark Theme teal950 / darkSurf / teal400 / gold

适合封面、章节幕、宣言页和深色海报。金色只用于唯一强调。

Light Theme paper / surface / ink / teal700 / goldDeep

适合 BP 正文、数据分析、团队页、官网内容页和技术说明。

Primary Surface paper / surface

正文页和内网页以暖纸底承载内容，避免深色大面积压迫阅读。

Brand Surface teal950 / teal400

封面、侧栏、关键入口使用深潭青，青绿色只用于状态和可点击信号。

Accent gold / goldDeep

每页最多一个金色强调，优先用于品类判断、版本或关键结论。

Typography system sans / Menlo label

正文走系统字体，技术标签、页码、token 名称使用 Menlo。

Layout

版式和节奏

页面使用稳定网格、明确层级和少量高质量图像；密度服务阅读，不用装饰填充空白。

Hero Pattern 判断句 + 证据入口 + 产品图
Content Pattern 标题 / 说明 / 并列模块
Spacing Scale 8 / 12 / 16 / 24 / 34
Components

表达组件

组件覆盖 BP、官网视觉稿、海报转页和 Figma 组件化。仓库中已有 30 个 HTML / PPT 组件映射。

Action Title

客户需要自有智能生产能力，而不是只购买远端结果。

标题必须是判断句，直接回答“为什么重要”。

AIR Agent Runtime 任务 · 记忆 · 编排 · 治理 · 恢复 · 观测
Proof Row 22 Company profile slides using the system
Action Title判断句标题，不用空泛名词。
Thesis Panel承载全页唯一核心判断。
Capability Cards展示并列能力模块。
Stat Row3-4 个关键数字、阶段或验证指标。
Compare Table和云、服务器、模型公司、Agent 应用做维度对比。
Timeline路线图、商业化阶段、产品演进。
Architecture Stack表达 HyperNode / AIR / 客户系统分层。
Process Flow输入、运行层、客户结果。
Data Boundary强调客户数据与治理边界。
Runtime Trace展示智能体运行、状态与恢复路径。
Token Factory表达高质量 Token 生产过程。
Proof Wall集中展示证据、验证和交付资产。
Examples

正确使用和避免事项

设计系统不只规定颜色和字号，也规定信息密度、证据表达和视觉克制程度。

Do 用一句判断带出页面

客户需要自有智能生产能力，而不是只购买远端结果。

Don't 不要堆砌抽象口号

开启全新 AI 时代，重塑未来生产方式。

Do 用真实结构解释产品

客户系统跑在 AIR 之上，AIR 跑在 HyperNode 之上。

Don't 不要把新魔方讲成硬件采购

我们是一家 GPU 服务器公司。

Quality Gate

设计系统使用门槛

每次新增页面、PPT 或官网模块，都按这些规则检查，避免页面越做越散。

01先判断，后装饰

标题先表达业务判断，再决定图形和布局。

02真实资产优先

产品、架构、运行状态优先使用真实图或产品级渲染图。

03一页一个强调

金色、深色幕布、超大字号都只服务一个核心信息。

04移动端无横向溢出

所有内网页和演示控件必须在 390px 宽度下可操作。

Profile Mapping

公司介绍已接入设计系统

公司介绍是当前设计系统的可演示实例：颜色、字体、组件、交互和导出规则都来自同一套规范。

Token 颜色与字体

公司介绍使用深潭青、暖纸底、金色强调、Menlo 标签和统一正文层级；后续应从 design-system 的 tokens.css / tokens.mjs 同步。

Components 组件映射

Action Title、Capability Cards、Architecture Stack、Timeline、Proof Wall 已落到公司介绍中。

Interaction 演示控件

目录、讲稿、帮助、复制链接、全屏演示和打印/PDF 是演示页交互组件，遵循浮层互斥和焦点回退规则。

Output 交付规则

公司介绍保持 16:9，桌面和移动端无横向溢出；打印模式隐藏内部控件，只输出演示稿正文。

Live Deck 打开当前公司介绍 Source 查看设计系统仓库
Website

官网页面结构

官网可复用同一套 token，深色首页承载品牌判断，浅色内容页承载产品和技术说明。

HeroAI Production InfrastructurePoster Module / System Blueprint / Product visual
ProductHyperNode / AIR / Owned Intelligence AssetsCapability Cards / Runtime Trace
TechnicalAIR five-layer architectureArchitecture Stack / Data Boundary / Reliability Panel
Use Cases园区、能源、智算、制造Use Case Grid / Value Ladder
Usage

使用方式

设计系统的单一真源是 `tokens.mjs`。需要改色、字号、间距时先改 token，再重新构建导出文件。

读文档 BRAND → FOUNDATIONS → COMPONENTS → CONTENT → USAGE
构建 npm install / npm run build / npm run validate
交付检查 品牌名小写 novocube；保留 Where Intelligence Runs.；避免空泛口号。
Figma 同步 tokens.json 导入 Variables；组件命名使用 NC / Component / Action Title 等规则。
Internal 同步 新增页面先查 design-system token 和组件；只在 internal 写业务内容和运营状态。
同步状态 当前 internal 已建立 Data Room、PoC、风险、周报页面；下一步收敛硬编码颜色到 tokens.css。