跳至主要内容
使用文档

使用文档

从零开始把 EDIC Design System 接入任意项目。EDIC 保持纯静态、零运行时依赖和编辑主义设计语言，并把结构化令牌、manifest、Agent 规则、组件覆盖与验证体系纳入同一套开发流程。下面的每个片段都可直接复制。

简介与设计哲学

EDIC 设计系统是一套纯静态、零构建的设计系统：所有视觉决策都被沉淀为 CSS 自定义属性（设计令牌），组件以语义化的 ds-* class 暴露。它的气质是编辑主义 × 橄榄绿——杂志般克制的排版、温暖的暖白纸色基底，以及自信而不喧哗的橄榄绿强调色。

  • 令牌优先：先改变量，再谈样式。不写魔法数字。
  • 框架无关：一份 styles.css 可用于原生 HTML、React、Vue、Svelte 与打印；邮件和富文本可按兼容静态样式转换。
  • 双主题：浅色 / 暗色由 [data-theme] 切换，强调色可一键替换。
  • 中英混排：针对 CJK 与拉丁文混排做了字距、行高与标点优化。
设计系统的价值不在于「好看」，而在于「可被一致地复制」——无论复制者是人还是 AI。

安装与引入

无需 npm、无需打包器。把 styles.css 与 scripts.js 拷贝到你的项目，并在页面中引入即可。

html
<!doctype html>
<html lang="zh-CN" data-theme="">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/svg+xml" href="favicon.svg">
    <link rel="stylesheet" href="styles.css?v=2.9.2">
  </head>
  <body>
    <!-- 你的内容 -->
    <script src="scripts.js?v=2.9.2"></script>
  </body>
</html>

scripts.js 是可选的——它负责暗色模式持久化、滚动揭示、复制按钮、标签页与图标渲染等渐进增强。即便不引入，所有样式依然完整可用。

使用设计令牌

令牌定义在 :root 中，命名遵循 --ds-{类别}-{名称}。在任意属性中用 var() 引用，永远不要硬编码具体数值。

css
.promo-card {
  background: var(--ds-color-surface-raised);
  color: var(--ds-color-fg);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-xl);   /* 12px */
  padding: var(--ds-space-6);            /* 24px */
  box-shadow: var(--ds-shadow-md);
  transition: box-shadow var(--ds-duration-200) var(--ds-ease-out);
}
.promo-card:hover { box-shadow: var(--ds-shadow-lg); }

令牌分为这些类别：color、font、text（字号）、weight、leading、tracking、space、radius、shadow、duration、delay、ease、bp、breakpoint、blur、glass、border、opacity、grid、gutter、z、focus、motion、depth。完整清单见令牌索引，结构化数据见 tokens.json。

色彩与语义

所有颜色以 OKLch 定义，保证跨设备的感知均匀与可预测的明度阶梯。三大色组：

  • 中性色：从 --ds-color-bg 到 --ds-color-fg-strong，构成背景、表面、边框与文字层级。
  • 橄榄绿：--ds-color-olive-50…900 十级色阶，--ds-accent 默认指向 olive-400。
  • 语义色：success / warning / error / info，各自带 -bg 浅底变体。

需要混色时使用 color-mix(in oklch, …)，以保持色彩空间一致：

css
.ring {
  box-shadow: 0 0 0 3px
    color-mix(in oklch, var(--ds-accent) 15%, transparent);
}

暗色模式

暗色由 <html data-theme="dark"> 触发，核心颜色令牌会切换为暖灰基底（而非纯黑），强调色随暗色令牌亮化 5–10%。scripts.js 提供 toggleDarkMode() 并做了系统偏好兜底与 localStorage 持久化。

html
<button id="theme-toggle-btn-fixed" aria-label="切换主题">切换</button>

<!-- 想默认暗色，直接写在 html 上： -->
<html lang="zh-CN" data-theme="dark">
提示
暗色模式不要使用 #000，请沿用令牌；自定义组件优先使用 var(--ds-*)，可获得一致的深浅主题基础。

排版规范

四个字族：Display（衬线，标题）、Body（无衬线，正文）、UI（控件）、Mono（代码）。字号采用 --ds-text-* 比例尺，从 caption(12px) 到 hero(72px)。

  • 标题用 --ds-font-display + --ds-leading-tight + --ds-tracking-tight。
  • 正文行长控制在 65–75 字符（约 540px 或 72ch）。
  • 段间距用 margin-bottom: var(--ds-space-6)，避免 margin 折叠混乱。
  • 大写小标签（Caption/Eyebrow）加 --ds-tracking-wider。
html
<h1 class="ds-display ds-h1">色彩定义情绪</h1>
<p class="ds-measure">正文使用 Body 字族，行长受 65ch 约束。</p>
<span class="ds-caption">SECTION LABEL</span>

间距与布局

间距基于 4px 系统，所有值均为 4 的倍数（--ds-space-1=4px … --ds-space-32=128px）。布局优先使用内置工具类，减少一次性 CSS：

  • .ds-wrapper：最大宽度 1200px 的居中容器。
  • .ds-stack / .ds-cluster：纵向 / 横向自动间距布局。
  • .ds-grid-2 / .ds-grid-3 / .ds-feature-grid：响应式栅格。
  • .ds-section：标准纵向区块留白与分隔线。

组件用法

组件以基类 + 修饰符表达：ds-btn 是基类，ds-btn--primary 是变体。下面是按钮、徽章与卡片的组合示例（在浅色与暗色下表现一致）。

Accent Success
html
<button class="ds-btn ds-btn--primary">主要按钮</button>
<span class="ds-badge ds-badge--accent">Accent</span>

<article class="ds-card ds-card--hoverable">
  <h4>卡片标题</h4>
  <p>使用令牌的卡片，悬停浮起。</p>
</article>

44 个核心组件家族的 live 形态、变体与状态，请见视觉手册 · 组件库；本页内同时保留常用用法、ARIA 契约与可复制代码。

响应式导航 · Mobile Drawer

导航栏 .ds-navbar 在桌面端为水平实底浮动导航（纸色 + 发丝下边框），在移动端与平板（<1024px）转为右侧滑出抽屉。移动端导航复用已有设计令牌。

设计决策与使用令牌

  • 顶部导航栏：全程实底 --ds-color-surface，不使用 backdrop-filter——纸面编辑风格保持安静，也避免毛玻璃的性能与可读性问题。
  • 汉堡按钮：44×44px 触控目标、圆角 --ds-radius-md、3 条线到 X 的状态动画；悬停/按下时使用 --ds-accent-soft 背景与 --ds-accent 图标色。
  • 遮罩层：使用 --ds-color-overlay-light（12% 黑色）——提供微妙的层级暗示但不会让整页变暗。不使用 --ds-color-overlay（40%）——那是模态框专用的重级遮罩。动画使用 --ds-duration-300 + --ds-ease-out。
  • 抽屉面板：实底 --ds-color-surface-raised、左侧边框 --ds-color-border、阴影 --ds-shadow-2xl（最深级别，表达最高抬起层级）。滑入动画使用 --ds-duration-300 + --ds-ease-out。
  • 导航链接：遵循 ds-nav-item 模式——padding --ds-space-3 / --ds-space-4（≥44px 触控目标）、圆角 --ds-radius-lg、悬停态 --ds-accent-soft 背景 + --ds-accent 文字。活跃态使用 --ds-accent-muted 浅底。
  • 层级：遮罩 z-index: var(--ds-z-overlay)，打开态导航壳 z-index: var(--ds-z-modal)，抽屉与触发按钮在导航壳内递进抬升。
  • 键盘可达：按 Escape 关闭，点击链接关闭，aria-expanded 同步。
html
<nav class="ds-navbar">
  <div class="ds-navbar-inner">
    <a href="/" class="ds-logo">…</a>
    <button class="ds-mnav-trigger" id="mnav-trigger"
            aria-label="打开导航菜单" aria-expanded="false"
            aria-controls="mnav-panel">
      <span class="ds-mnav-trigger-bar"></span>
      <span class="ds-mnav-trigger-bar"></span>
      <span class="ds-mnav-trigger-bar"></span>
    </button>
    <div class="ds-navbar-links" id="mnav-panel">
      <a href="#" class="ds-navbar-link ds-navbar-link--active">首页</a>
      <a href="#" class="ds-navbar-link">文档</a>
    </div>
  </div>
</nav>
<div class="ds-mnav-backdrop" id="mnav-backdrop"></div>

令牌对照表

元素令牌桌面端移动端
导航栏背景--ds-color-surface实底纸色 · 发丝下边框实底表面，无 blur
触发按钮ds-mnav-trigger隐藏44px · 3-bar → X 动画
遮罩--ds-color-overlay-light无12% 黑色 · 点击关闭
抽屉阴影--ds-shadow-2xl无最深投影
动画时长--ds-duration-300—300ms
动画缓动--ds-ease-out—cubic-bezier(.16,1,.3,1)
移动端规范
  • 导航栏不使用毛玻璃（--ds-glass-bg 仅保留给玻璃组件演示）——实底纸色更安静，也避免低端设备上的性能与可读性问题。
  • 遮罩层使用 --ds-color-overlay-light（12%），不使用 --ds-color-overlay（40%）——后者是模态框级别。
  • 触控目标不小于 44×44px（符合 WCAG 2.5.5）。

动效与滚动揭示

动效统一由 --ds-duration-* 与 --ds-ease-* 令牌驱动。给元素加 .ds-reveal 即可在进入视口时淡入上移；用内联自定义属性 --d 设置错峰延迟。

html
<div class="ds-reveal">进入视口淡入</div>
<div class="ds-reveal" style="--d:80ms">延迟 80ms</div>
<div class="ds-reveal ds-reveal--left">从左滑入</div>
<span class="ds-anim-float">持续漂浮</span>

所有动效都尊重 prefers-reduced-motion: reduce——用户开启「减少动态效果」时会自动停用，内容立即可见。

代码样式

本站所有代码块保持零运行时依赖——语法高亮由 scripts.js 内置的轻量高亮器在页面加载时生成，不引入任何第三方高亮库。代码块统一使用 <figure class="ds-code"> 结构，由语言标签栏 + 可复制代码区组成；代码内容按 HTML 实体转义后直接展示，复制所得与源码逐字一致。

基本用法

在 <pre> 或 <code> 上添加 class="language-xxxx"（如 language-html、language-css），用于标识代码语言，并触发内置语法高亮、便于复制与文档生成时解析：

html
<figure class="ds-code">
  <pre><code class="language-html">
    &lt;!-- 代码内容 —— 需转义 &lt; &amp; ——&gt;
  </code></pre>
</figure>

支持的语言

常用示例覆盖 HTML（含 SVG/XML）、CSS、JavaScript、JSON、Bash 与纯文本；标记为 language-text 的代码不做着色。文字与标记颜色通过 CSS 变量 --ds-token-* 统一控制，与设计系统的 OKLch 色彩体系一致。

主题令牌

语法高亮颜色由以下 CSS 变量定义，可通过覆盖变量整体换肤：

令牌用途浅色模式值暗色模式值
--ds-code-bg代码块背景var(--ds-code-bg)var(--ds-code-bg)
--ds-code-text基础文字色var(--ds-code-text)var(--ds-code-text)
--ds-token-comment注释var(--ds-token-comment)var(--ds-token-comment)
--ds-token-keyword关键字var(--ds-token-keyword)var(--ds-token-keyword)
--ds-token-string字符串var(--ds-token-string)var(--ds-token-string)
--ds-token-function函数 / 类名var(--ds-token-function)var(--ds-token-function)
--ds-token-number数字 / 布尔var(--ds-token-number)var(--ds-token-number)
--ds-token-tagHTML 标签var(--ds-token-tag)var(--ds-token-tag)
--ds-token-attr-name属性名var(--ds-token-attr-name)var(--ds-token-attr-name)
--ds-token-operator运算符var(--ds-token-operator)var(--ds-token-operator)
--ds-token-punctuation标点var(--ds-token-punctuation)var(--ds-token-punctuation)

代码块背景随主题切换（浅色为暖纸色、暗色为暖夜色），语法令牌在两种主题下各有对应取值。高亮输出的 class 固定为 ds-tok--*，换肤只需覆盖 --ds-token-* 变量。

代码块组件

使用 ds-code 系列 class 构建代码块。推荐的结构：

  • .ds-code — 容器（圆角 + 暗背景 + 边框）
  • .ds-code-bar — 顶栏（语言标签 + 复制按钮）
  • .ds-code-lang — 语言标签（大写小字，mono 字族）
  • .ds-copy-btn[data-copy="#id"] — 复制按钮（关联 <pre id="...">）
  • <pre><code class="language-*"> — 语言标记代码区

EDIC 不引入外部高亮脚本：高亮由内置的零依赖高亮器完成——它识别 language-* 类，把代码文本输出为 <span class="ds-tok--*"> 标记，颜色取自 --ds-token-* 令牌。消费方也可按相同 class 结构在应用层接入自己的高亮方案。

图标用法

209 枚 1.5px 线性图标，遵循 24×24 视框、currentColor 描边，因此颜色随文字自动变化。图标元数据由 icons.json 提供，可用于搜索、AI 推荐和文档生成；浏览器展示见图标库。

html
<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
     stroke="currentColor" stroke-width="1.5"
     stroke-linecap="round" stroke-linejoin="round">
  <circle cx="11" cy="11" r="8"/>
  <line x1="21" y1="21" x2="16.65" y2="16.65"/>
</svg>

可访问性

  • 正文与背景对比目标为 WCAG AA（≥ 4.5:1）。
  • 交互元素提供可见的 :focus-visible 焦点环。
  • 图标按钮务必加 aria-label；纯装饰图标加 aria-hidden="true"。
  • 颜色不作为唯一信息载体（语义色配图标 / 文案）。
  • 尊重 prefers-reduced-motion 与 prefers-color-scheme。

定制与扩展

替换强调色只需覆盖 --ds-color-olive-* 强调色阶与 --ds-accent 系列——其余组件无需改动即可整体换肤：

css
:root {
  /* 覆盖强调色阶；按品牌色重新定义 OKLch 明度、彩度与色相 */
  --ds-color-olive-400: oklch(0% 0 0);
  --ds-color-olive-500: oklch(0% 0 0);
  --ds-accent: var(--ds-color-olive-400);
  --ds-accent-hover: var(--ds-color-olive-500);
}

新增组件时遵循命名约定：基类 ds-{组件}，变体 ds-{组件}--{变体}，并优先使用令牌——这样可以复用系统已有的深浅主题、动效与可访问性基础。

质量验证

EDIC 把质量检查纳入开发循环。提交前运行 npm run audit，它会聚合验证器、视觉基线、体积预算、变更日志和单元测试。

bash
npm run validate
npm run audit
npm test

覆盖范围

token 同步、manifest ↔ CSS、组件命名、ARIA、暗色模式、版本戳、图标数量、视觉基线、gzip 体积与 changelog。

质量门槛

所有 manifest 核心组件必须在 styles.css 中存在；所有交互组件必须有焦点与键盘路径；所有颜色必须走 OKLch token。

AI 协作

EDIC 同时面向人和 AI 可用。生成 UI 时应遵循 manifest-first：先读取能力清单，再使用既有 ds-* class，不发明平行命名。

生成规则

  • 颜色只用 OKLch 与 var(--ds-*)，组件规则不裸写十六进制、RGB 或 HSL。
  • 新组件先落到 styles.css，再出现在文档或示例页面。
  • 交互组件必须包含 ARIA、键盘路径、焦点环与暗色模式。
  • 新视觉值必须来自 token；确实动态的值才使用内联自定义属性。
  • 不要删除或静默重命名已有 token、组件或图标。

推荐读取顺序

text
edic-manifest.json
tokens.json
icons.json
AGENT-GUIDE.md
skills/edic-design-system/SKILL.md

机器可读资源

EDIC 把面向工具的结构化数据作为一等交付物：Agent、CI、设计工具和文档生成器可以直接读取 manifest、令牌、图标和规则，而不需要从页面反推能力边界。

json
{
  "version": "2.9.2",
  "schema": "2.0.0",
  "tokens": [
    {
      "name": "color-surface-primary",
      "value": "var(--ds-color-surface)",
      "category": "color",
      "description": "Primary app surface.",
      "aliases": ["color-bg"],
      "dark": "var(--ds-color-surface-dark)",
      "deprecated": false,
      "status": "stable"
    }
  ]
}
文件用途读取者
edic-manifest.json系统能力、组件、图标、约束与验证器清单Agent / CI / docs generator
tokens.json结构化 token registry 与兼容层设计工具 / AI / 验证器
icons.json209 枚图标的分类、关键词与 viewBox搜索 / 推荐 / Penpot
AGENT-GUIDE.md生成 EDIC UI 时必须遵守的规则Agent
skills/edic-design-system/SKILL.mdCodex 自动加载的设计系统上下文Codex

语义别名

新代码优先使用语义别名，而不是直接选择原始色阶。语义别名仍然解析到 --ds-* 原始令牌，因此旧项目无需改动即可继续运行。

  • 表面：--ds-color-surface-primary、--ds-color-surface-raised、--ds-color-surface-overlay。
  • 文本：--ds-color-text-primary、--ds-color-text-secondary、--ds-color-text-strong。
  • 边框：--ds-color-border-default、--ds-color-border-strong、--ds-color-border-subtle。
  • 控件：--ds-border-radius-control、--ds-motion-default、--ds-z-dropdown。
保持向后兼容
_legacyTokens 保留 1.x 扁平结构，旧验证器与脚本不会因 schema 升级而失效。

迁移指南

EDIC 的升级以增量方式进行。现有 1.x 项目只需要更新 styles.css 和 scripts.js 的版本戳即可继续工作；新代码再逐步采用结构化 token、manifest 与语义别名。

html
<link rel="stylesheet" href="styles.css?v=2.9.2">
<script src="scripts.js?v=2.9.2"></script>

可选迁移步骤

  1. 用 tokens.json 审计旧样式中的裸色值，替换为语义 token。
  2. 用 icons.json 搜索现有图标，替换重复 SVG。
  3. 对新增 UI 使用 AGENT-GUIDE.md 约束生成结果。
  4. 运行 npm run audit 作为发布前质量门槛。

常见问题

需要 npm 或构建工具吗？
不需要。它是纯静态的 CSS + 原生 JS，复制文件、引入即可用。

视觉手册 · 色彩系统

基于暖白纸色基底 + 橄榄绿强调色。所有颜色以 OKLch 定义。

中性色 — Neutral

Background
--ds-color-bg
Surface
--ds-color-surface
Surface Raised
--ds-color-surface-raised
Border Subtle
--ds-color-border-subtle
Border
--ds-color-border
Border Strong
--ds-color-border-strong
Muted Text
--ds-color-muted
FG Subtle
--ds-color-fg-subtle
Foreground
--ds-color-fg
FG Strong
--ds-color-fg-strong

强调色 — Olive Green

Olive 50
--ds-color-olive-50
Olive 100
--ds-color-olive-100
Olive 200
--ds-color-olive-200
Olive 300
--ds-color-olive-300
Olive 400 ★
--ds-color-olive-400
Olive 500
--ds-color-olive-500
Olive 600
--ds-color-olive-600
Olive 700
--ds-color-olive-700
Olive 800
--ds-color-olive-800
Olive 900
--ds-color-olive-900

语义色 — Semantic

Success
--ds-color-success
Warning
--ds-color-warning
Error
--ds-color-error
Info
--ds-color-info

视觉手册 · 字体系统

衬线 Display + 无衬线 Body 经典编辑主义搭配。

Display

Playfair Display / Iowan / Charter / Georgia

标题用衬线，克制且自信

Body

SF Pro / system-ui / Noto Sans SC

正文无衬线，确保可读性

Mono

JetBrains Mono / IBM Plex Mono

const token = "ds-system"

UI

system-ui / Noto Sans SC

Button / Input / Nav

Type Scale — 比例尺

Hero / 4.5 rem · 72 px 700 ／ --ds-leading-tight 1.1 ／ --ds-tracking-tight -0.01 em

AG 设计系统

Display / 3.75 rem · 60 px 700 ／ --ds-leading-tight 1.1 ／ --ds-tracking-tight -0.01 em

阅读是设计

H1 / 3 rem · 48 px 700 ／ --ds-leading-tight 1.1 ／ --ds-tracking-tight -0.01 em

色彩定义情绪

H2 / 2.25 rem · 36 px 700 ／ --ds-leading-snug 1.25 ／ --ds-tracking-normal 0.02 em

文字承载信息

H3 / 1.875 rem · 30 px 700 ／ --ds-leading-snug 1.25 ／ --ds-tracking-normal 0.02 em

小组件标题

H4 / 1.5 rem · 24 px 700 ／ --ds-leading-snug 1.25 ／ --ds-tracking-normal 0.02 em

卡片标题

Body / 1rem · 16 px 400 ／ --ds-leading-normal 1.55 ／ --ds-tracking-normal 0.02 em

正文文本，行长受 65ch 约束。中英混排优化字距与标点悬挂。

Body SM / 0.875 rem · 14 px 400 ／ --ds-leading-normal 1.55 ／ --ds-tracking-normal 0.02 em

辅助说明、图注、表单提示。

Caption / 0.75 rem · 12 px 400 ／ --ds-leading-normal 1.55 ／ --ds-tracking-wide 0.04 em

LABEL / 标签大写更清晰

段落间距规范

The quick brown fox

Jumps over the lazy dog. This is body text.

The second paragraph continues.

margin-bottom: var(--ds-space-2) · 8px

Text Align

text-align: left
The quick brown fox
text-align: center
The quick brown fox
text-align: right
The quick brown fox

字体组合参考

Gravitas 5
Display · Heading · Hero
Glow Sans
Heading · Title · Sub
Source Han Sans
Body · Content · Code
Noto Sans
UI · Caption · Label

排版规范

Line Height
1.2Heading
1.5Body
1.6Content
Letter Spacing
-0.02emDisplay
-0.01emHeading
0emBody
0.08emCaption / Label
Blockquote

Design is the silent ambassador of your brand.

视觉手册 · 间距 & 尺寸

基于 4px 系统，所有值为 4 的倍数。

间距比例尺

--ds-space-1 · 4 px
--ds-space-2 · 8 px
--ds-space-3 · 12 px
--ds-space-4 · 16 px
--ds-space-6 · 24 px
--ds-space-8 · 32 px
--ds-space-12 · 48 px
--ds-space-16 · 64 px
--ds-space-24 · 96 px

阴影

xs
sm
md
lg
xl
2xl

圆角

0
sm
md
lg
xl
2xl
∞

视觉手册 · 组件库

当前覆盖 44 个核心组件家族，包含常用变体、状态、ARIA 契约与可复制代码。每个组件都保持纯 CSS + HTML 示例，可直接复制到项目中使用。

01 · Button
02 · Card

Card Title

A raised card with border.

Hover Card

Hover for shadow transition.

Flat Card

Borderless with subtle shadow.

03 · Text Input

At least 8 characters

Please enter a valid email

04 · Select
05 · Checkbox
06 · Radio
07 · Toggle / Switch
08 · Badge
Default New Live Pending Error
09 · Chip / Pill
React Vue Svelte × Angular ×
10 · Alert
Info
Your session expires in 5 min.
Saved
Changes saved successfully.
Warning
Storage almost full.
Error
Something went wrong.
11 · Modal
Alert Dialog
12 · Tabs
13 · Avatar
ED
EDIC
Design System
14 · Progress
15 · Tooltip
Hover me
16 · Skeleton
Spinner
Form Field
用于接收通知
密码至少 8 位
File Upload

点击选择或拖拽文件到此处

    17 · Divider
    Above content
    Below content
    18 · Breadcrumb
    19 · Pagination
    20 · Empty State

    No items yet

    Create your first item to get started.

    21 · Accordion
    What is this design system?▾
    Design tokens and components for EDIC. OKLch color, editorial type, olive green accent.
    22 · Table
    NameRoleStatusActive
    Elena ChenDesignerActive2 min ago
    Marcus LiuDeveloperOnlineJust now
    Sofia ParkPMAway1 hour ago
    23 · Navigation & Dropdown
    Edit
    Duplicate
    Delete
    Menu
    24 · Icon Button / Toolbar
    25 · Slider
    65%
    0%100%
    40%
    0%100%
    26 · Date / Time Picker
    五月 2026
    一二三四五 六日
    27282930123 45678910 11121314151617 18192021222324 25262728293031 1234567
    27 · Article TOC
    附加 · Contact Form
    28 · Switch
    29 · Radio Group
    主题
    30 · Combobox
    31 · Date Picker
    32 · Tooltip
    保存到草稿
    33 · Steps
    1. 1
      定义

      确定目标与范围

    2. 2
      设计

      建立令牌与原型

    3. 3
      交付

      验证并发布

    34 · Description List
    版本
    2.1.3
    许可证
    CC BY 4.0
    运行时依赖
    无
    35 · Stat
    44核心组件
    295设计令牌
    209图标
    36 · Drawer
    37 · Popover
    38 · Command Palette

    视觉手册 · 图表库

    10 种图表类型（环形图含单值与多组双变体）由统一 SVG 引擎渲染，零运行时依赖，支持 hover tooltip、键盘聚焦与过渡动画。视觉样式通过 --ds-chart-* 配置变量调整。

    柱状图 · Bar
    月度销售额柱状图：一月 65，二月 80，三月 45，四月 92，五月 70，六月 88
    条形图 · Bar (Horizontal)
    设备使用分布：桌面端 55%，移动端 35%，平板 10%
    堆叠柱状图 · Stacked Bar
    季度营收堆叠柱状图：Q1 产品A 40 产品B 30，Q2 产品A 50 产品B 45
    饼图 · Pie
    流量来源分布：搜索引擎 35%，社交媒体 30%，直接访问 20%，其他 15%
    环形图 · Donut
    完成率 73%
    多组环形图 · Donut (Multi)
    月度完成率：1月 75%，2月 42%，3月 完成60% 进行30% 失败10%
    迷你趋势图 · Sparkline
    近 7 日趋势：上升趋势
    +12.4%
    折线图 · Line
    7 天用户活跃度趋势：从 30 逐步上升至 72
    面积图 · Area
    月访问量面积图，从 40 增长至 85
    多系列折线图 · Multi-line
    桌面端和移动端用户数趋势对比
    组合图 · Combo (Bar + Line)
    收入与增长率组合图

    视觉手册 · 图标库

    209 枚 SVG 图标，24×24 viewBox，1.5 px 描边。每个图标同步导出到 icons.json，供搜索、分类、AI 推荐和工具链集成使用。

    完整图标文件：icons.svg（配套生成）— 可直接导入 Penpot。机器可读索引：icons.json。

    视觉手册 · Overlay & Blur

    透明度和背景模糊在编辑风格中的正确用法。全部基于 OKLch alpha 通道和 backdrop-filter，与系统色彩体系无缝衔接。

    遮罩层 — Scrim
    40%
    --ds-color-overlay — 40% scrim
    12%
    --ds-color-overlay-light — 12% scrim
    玻璃卡片 — Glass Card

    Olive Grove

    玻璃卡片使用 backdrop-filter: blur(24px)，背景为系统色盘中相邻色的渐变。

    EDIC Design System v2.9.2
    毛玻璃导航 — Frosted Nav
    通知弹层 — Toast
    操作成功 · 设计系统已更新
    这是一条普通通知，毛玻璃背景衬托
    出错了 · 请检查后重试
    玻璃按钮 — Glass Button

    视觉手册 · 时间轴

    Timeline 组件展示设计系统发展历程。

    发布
    2026.09 — v2.9.2
    设计基础设施升级

    结构化 tokens、manifest、AGENT-GUIDE、209 枚图标索引、44 个核心组件契约，以及 15 个验证器组成的质量门槛；HTML 校验覆盖主内容区、外部资源、`javascript:`、内联事件与标题数量。

    迭代
    2026.05 — v1.1.0
    多页站点与动效系统

    6 页静态网站、品牌 Logo、动效系统、暗色模式完善、AI 协作交付物（提示词 + Skill）、icons.svg 图标 sprite。

    设计
    2026.05 — v1.0.0
    设计系统正式发布

    首版设计系统发布：OKLch 色彩体系、暗色模式、编辑主义排版、GitHub Pages 部署与静态组件示例。

    视觉手册 · 联系表单

    Contact Form 组件完整展示。

    令牌索引

    全部 — 个 CSS 自定义属性汇总，含暗色模式取值。可直接复制使用。

    TokenLightDark

    「—」表示该令牌无独立暗色覆盖，暗色模式下沿用浅色值。表格可横向滚动以查看完整取值。