Design System & Docs Format · v1.1

Nuxare 设计系统与统一文档规范

黑底 × 渐变绿 —— 以 LOGO 渐变（#0CC8A3 → #65D31E）为品牌基因。本规范既定义视觉设计令牌与组件，也规定 docs 全部文档的统一格式，每份文档必须带 Nuxare LOGO，确保全站视觉一致、开发高效。

版本 v1.1 日期 2026-09-03 适用 全部页面 / 全部 docs 文档 LOGO 必备

01 · 设计原则

三条核心原则

所有设计决策都围绕这三条原则展开，确保品牌一致性和用户体验质量。

🎨

品牌统一

以 LOGO 渐变绿为唯一品牌色源，主色、激活态、按钮、高亮全部从渐变派生，界面与 LOGO 同源同构。

👁️

高对比可读

正文 / 次要 / 弱化三级文字在黑色底上保持 WCAG AA 对比度（≥ 4.5:1），长时间阅读不疲劳。

✨

渐变克制

渐变只用于焦点元素（主按钮、激活态、大标题）。大面积纯色保证安静、可读，避免花哨。

02 · 配色系统

从 LOGO 提取的品牌色板

以 LOGO 渐变的两个端点色为锚点，向下派生黑色底阶与文字色阶，向上保留渐变作为强调。所有色值均带绿色倾向，避免"纯黑 + 纯绿"的生硬拼接。

品牌渐变（LOGO 同源）

#0CC8A3 → #65D31E · 135°

渐变浅色底 rgba(12,200,163,.16) → rgba(101,211,30,.10)

CSS 变量使用方式

所有颜色统一使用 --accent、--accent2、--grad 等变量，禁止在组件样式中硬编码 hex 值。换主题只需修改 :root 变量一处。

黑色底阶（带绿倾向的近黑）

页面底 --bg

#060907

body 背景 / 最底层

卡片底 --bg2

#0B110E

卡片 / 面板 / 表格底

表头底 --bg3

#101813

表头 / 输入框 / 代码块

悬停底

rgba(12,200,163,.08)

hover 高亮 / 选中行

文字色阶

主文字 --ink

#E6F4EE

正文 / 标题（≈16:1）

次要文字 --muted

#8FA99D

说明 / 标签（≈7:1）

弱化文字 --faint

#5F7A6D

占位符 / 禁用（≈3.5:1）

强调文字

渐变绿

Logo / 大标题 / 关键数字

状态色（深色底优化）

成功 --success

#34D399

成功 / 已启用

警告 --warning

#FBBF24

提示 / 未保存

危险 --danger

#F87171

删除 / 错误

边框 --rule

rgba(12,200,163,.16–.30)

分隔 / 描边

渐变应用优先级

应用场景	渐变方式	说明
大标题 / Logo	`background-clip: text`	仅用于 Hero 大标题、关键数字等少量装饰性文字
主按钮 / CTA	`135° 渐变填充`	主操作按钮使用渐变填充 + 深色文字，视觉焦点
步骤编号 / 徽章	`渐变填充圆形`	步骤序号、状态徽章等小型强调元素
卡片图标底	`--grad-soft 浅色底`	卡片图标容器使用低透明度渐变底
Callout 背景	`--grad-soft 浅色底`	提示框的浅色渐变背景 + 左侧 3px 实线边框
氛围光晕	`径向渐变 overlay`	页面背景叠加低透明度径向渐变，增强沉浸感

克制原则

渐变只用于"焦点元素"（主按钮、激活态、大标题、步骤编号）。输入框、面板、正文一律纯色，保证大面积界面安静、可读。渐变文字仅限 2–3 处装饰性标题，避免满屏花哨。

03 · 字体系统

三级字体家族

标题用 Bricolage Grotesque 建立品牌感，正文用 Instrument Sans 保证可读性，代码/数据用 Geist Mono 保持等宽对齐。

🔤

标题字体

Bricolage Grotesque

--font-head

📝

正文字体

Instrument Sans

--font-body

⌨️

等宽字体

Geist Mono

--font-mono

字号阶梯

Hero 大标题 H1

clamp(34px, 5.2vw, 54px) · Bold · Bricolage Grotesque · 渐变文字

章节标题 H2

clamp(24px, 3.4vw, 32px) · Bold · Bricolage Grotesque

小节标题 H3

19px · Bold · Bricolage Grotesque

正文段落 — 这是一段正文示例文字，展示 16px 字号在深色背景下的阅读效果。行高 1.75 保证良好的可读性。

16px · Regular · Instrument Sans · line-height: 1.75

辅助说明文字，用于标签、描述等次要信息

13px · color: var(--muted) · 用于说明/标签

MONO LABEL · 等宽标签

12.5px · Geist Mono · 用于章节编号/数据标签

中文字体回退

字体栈顺序

所有字体定义均包含中文回退：'PingFang SC', 'Microsoft YaHei', sans-serif。确保在没有英文字体的环境下，中文也能正常显示。

04 · 间距系统

8px 基准网格

所有间距都是 4px 的倍数，以 8px 为基础单位。保持视觉节奏一致，减少随意性。

间距刻度

--space-1

4px · 紧凑内边距

--space-2

8px · 元素间距

--space-3

12px · 紧凑卡片内边距

--space-4

16px · 标准内边距 / 网格 gap

--space-5

20px · 卡片内边距

--space-6

24px · 章节间距

--space-8

32px · 大间距

--space-12

48px · Section 顶部间距

布局容器

变量名	值	用途
`--radius`	10px	所有圆角统一使用此变量
`.wrap max-width`	1060px	内容区域最大宽度
`.wrap padding`	0 24px	移动端左右内边距
Section 间距	52px 0 8px	章节之间的垂直间距

05 · 组件规范

常用组件样式标准

以下是页面中最常用的组件，开发时直接复用对应 class，确保一致。

5.1 卡片 Card

卡片是最基础的容器组件，用于分组展示信息。

💡

带图标卡片

使用 .card .icon 类，图标放在渐变底的圆角方块中。

纯文字卡片

直接使用 .card 类，内部放标题和正文。

<!-- 基础卡片 -->
<div class="card">
  <h4>标题</h4>
  <p>描述文字</p>
</div>

<!-- 带图标卡片 -->
<div class="card">
  <div class="icon">💡</div>
  <h4>标题</h4>
  <p>描述文字</p>
</div>

<!-- 网格布局：grid-2 / grid-3 / grid-4 -->
<div class="grid-3">
  <div class="card">...</div>
  ...
</div>
    

5.2 提示框 Callout

四种状态的提示框，用于突出重要信息。

普通提示

使用 .callout 类，默认绿色左边框 + 浅色渐变底。

警告提示

添加 .warn 类，黄色左边框 + 黄色浅色底。

危险提示

添加 .danger 类，红色左边框 + 红色浅色底。

重要提示

添加 .important 类，亮绿（accent2）左边框 + 亮绿浅色底。

5.3 步骤 Steps

用于展示流程步骤，自动编号。

第一步标题

步骤描述文字，说明这一步要做什么。

第二步标题

步骤描述文字，说明这一步要做什么。

第三步标题

步骤描述文字，说明这一步要做什么。

5.4 表格 Table

数据表格使用 .table-wrap 包裹，支持横向滚动和表头吸顶。

列标题 1	列标题 2	列标题 3
数据行 1-1	数据行 1-2	数据行 1-3
数据行 2-1	数据行 2-2	数据行 2-3
数据行 3-1	数据行 3-2	数据行 3-3

5.5 标签 Tag

5.6 指标卡 Metric

99+

数据项

24h

响应时间

98%

满意度

∞

复利增长

06 · 页面结构

标准页面骨架

所有页面遵循统一的 HTML 结构，确保样式一致、维护方便。

完整 HTML 结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>页面标题 | Nuxare</title>
  <style>
    /* 1. Fonts（复用 _shared/fonts 下的字体） */
    /* 2. :root 变量（从本规范复制） */
    /* 3. 基础样式（body, .wrap, 排版） */
    /* 4. 组件样式（card, callout, table...） */
    /* 5. 响应式 + 打印样式 */
  </style>
</head>
<body>

  <!-- HERO 区 -->
  <header class="hero">
    <div class="wrap">
      <!-- Logo, kicker, h1, subtitle, meta -->
    </div>
  </header>

  <!-- 主内容区 -->
  <div class="wrap">
    <section id="s1">
      <div class="sec-head">
        <div class="sec-num">01 · 章节编号</div>
        <h2 class="sec-title">章节标题</h2>
        <p class="sec-desc">章节描述</p>
      </div>
      <!-- 章节内容 -->
    </section>
  </div>

  <!-- Footer -->
  <footer>
    <div class="wrap">
      <!-- 品牌 Logo：内联 SVG（由 nuxare-components.js 注入），勿引用外部文件 -->
      <p>页脚文字</p>
      <span class="tag">v1.0</span>
    </div>
  </footer>

</body>
</html>
    

Do / Don't

✅ 推荐做法

所有颜色使用 CSS 变量，不硬编码 hex
间距使用 4/8/12/16/20/24/32/48 刻度
标题用 Bricolage Grotesque，正文用 Instrument Sans
渐变只用于焦点元素，大面积用纯色
表格用 .table-wrap 包裹，支持滚动
移动端适配：820px 和 520px 两个断点

❌ 避免做法

不要在组件内联样式中写死颜色值
不要随意使用间距数字（如 7px、13px）
不要给正文也加渐变文字效果
不要用纯黑 #000 做背景（缺少品牌倾向）
不要给所有卡片都加 hover 动效（克制）
不要忽略移动端的可读性和触控面积

07 · 统一文档格式

docs 全部文档的统一格式

所有 docs / 页面（产品文档、设计方案、规范、手册）必须遵循同一 HTML 骨架与共享资源，复用 _shared/css/nuxare-docs.css 与 _shared/js/nuxare-components.js，并 必备 Nuxare LOGO。本规范即全站统一格式的唯一依据。

7.1 必须引入的共享资源

<link rel="icon" type="image/svg+xml" href=(root)/favicon.svg>
<link rel="stylesheet" href=(root)/_shared/css/nuxare-fonts.css>
<link rel="stylesheet" href=(root)/_shared/css/nuxare-docs.css>
<!-- 正文末尾 -->
<script src=(root)/_shared/js/nuxare-common.js defer></script>
<script src=(root)/_shared/js/nuxare-components.js defer></script>
/* (root) 相对前缀由 computeRoot() 依据脚本路径自动推算，页面层级任意 */

共享机制

顶部导航、页脚、文档侧栏均由此分析脚本按 DOCS / NAV 数据注入；新增页面只需在 nuxare-components.js 的 DOCS 数组追加一项，侧栏与索引页自动同步。LOGO（brandSVG()）随导航与页脚自动注入，无需手写。

7.2 标准页面骨架（三段式）

① 顶部：导航 + Hero

#nuxare-nav 注入导航（含 LOGO）；页面开头 hero 区放置 .hero-logo（LOGO 符号）与 kicker。

② 主体：双栏文档布局

.docs-layout 内放 .docs-side（侧栏）与 .docs-main（正文），正文含 .doc-breadcrumb、.toc、若干 .section（.sec-head 起步）。

③ 底部：页脚带 LOGO

#nuxare-footer 注入共享页脚（含 .footer-logo 品牌字标）。

<body>
  <div id="nuxare-nav"></div>   <!-- 导航 + LOGO（JS 注入）-->
  <div class="docs-layout">
    <aside id="docs-side" class="docs-side"></aside>  <!-- 文档侧栏（JS 注入）-->
    <main class="docs-main">
      <header class="hero"> <!-- .hero-logo(LOGO) + .hero-kicker + h1 + .hero-sub + .hero-meta --> </header>
      <div class="wrap">
        <nav class="doc-breadcrumb">…</nav>
        <nav class="toc">…</nav>
        <section class="section" id="s1"><div class="sec-head">...</div>…</section>
      </div>
    </main>
  </div>
  <div id="nuxare-footer"></div>  <!-- 页脚 + LOGO（JS 注入）-->
</body>

7.3 必须包含 LOGO（必备）

LOGO 呈现位置

① 顶部导航左侧 .nav-brand（brandSVG() 内联字标，LOGO 渐变）；② Hero 区 .hero-logo 符号大图（带光晕浮动动画）；③ 页脚 .footer-logo。三处由共享脚本自动注入。

LOGO 文件

符号款：/favicon.svg（40×40，绿渐变 #0CC8A3→#65D31E，含 #fff 辅助）。字标款：内联渐变字标（见 nuxare-components.js 的 brandSVG()，勿放外部文件）。

✅ LOGO 使用规范

使用共享脚本注入的 brandSVG() / favicon，禁止引用外部图床
尽量使用原始渐变绿，浅色底 / 深色底上均保证对比清晰
周围留白不小于 LOGO 高度的一半，不贴边、不重叠文字
符号款用于 Hero / 图标，字标款用于导航 / 页脚

❌ 禁止做法

拉伸、压扁、旋转或倍率随意缩放破坏比例
替换为红 / 蓝 / 纯白等非品牌色
直接 <img src="favicon.svg"> 当导航字标（应走 brandSVG 注入）

7.4 章节与复用组件清单

每个 .section 以 .sec-head（.sec-num + .sec-title + .sec-desc）开头；正文复用下列共享类即可保持一致：

布局 / 容器

.grid-2/3/4、.card、.kv-row、.metric-row/.metric-card、.doc-grid/.doc-card、.fig

内容组件

.callout（.warn/.danger/.important）、.steps/.step、.tag-cloud/.tag、.sub-h、.palette-grid/.swatch、.code-block、.dodont

表格 / 树

.mod-table、.table-wrap（普通表）、.tree-block（目录树，.d/.f/.c 着色）

元信息

.badge（.new/.gray）、.kv-row 的 .k/.v、.type-specimen、mark.key

章节编号

.sec-num 统一 01 · 标题 格式；.toc 自动十进制编号

图表

echarts（.chart）/ mermaid（pre.mermaid），统一 _shared/js/ 加载

硬性要求

① 不得再为文档页单独复制整套非 nuxare-docs.css 的重复样式（可用少量页面局部覆盖）；② 颜色 / 间距 / 字体一律使用 :root 令牌；③ 每份文档必须带 LOGO；④ 风格与骨架以本规范为唯一标准。

08 · 快速引用

开发速查表

复制粘贴即用的核心代码片段。

:root 变量完整清单

:root {
    --bg: #060907;
    --bg2: #0B110E;
    --bg3: #101813;
    --ink: #E6F4EE;
    --muted: #8FA99D;
    --faint: #5F7A6D;
    --rule: rgba(12, 200, 163, 0.16);
    --rule-strong: rgba(12, 200, 163, 0.30);
    --accent: #0CC8A3;
    --accent2: #65D31E;
    --grad: linear-gradient(135deg, #0CC8A3 0%, #65D31E 100%);
    --grad-soft: linear-gradient(135deg, rgba(12,200,163,0.16), rgba(101,211,30,0.10));
    --danger: #F87171;
    --warning: #FBBF24;
    --success: #34D399;
    --radius: 10px;
    --font-head: 'BricolageGrotesque', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-body: 'InstrumentSans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-mono: 'GeistMono', ui-monospace, Consolas, monospace;
}
    

文件目录结构

project/
├── _shared/               /* 共享资源（所有页面复用） */
│   ├── fonts/             /* 字体文件 */
│   │   ├── BricolageGrotesque-Regular.ttf
│   │   ├── BricolageGrotesque-Bold.ttf
│   │   ├── InstrumentSans-Regular.ttf
│   │   ├── InstrumentSans-Bold.ttf
│   │   └── GeistMono-*.ttf
│   └── js/                /* JS 库: echarts.min.js */
├── assets/                /* 页面特有资源 */
│   ├── about-photo.webp
│   ├── theme-poster.webp
│   └── js/
│       └── nuxare-foreign-trade-playbook.js
├── design-system.html     /* ← 本规范文档 */
└── your-page.html         /* 你的页面 */
    