OKLch 色彩科学
全部颜色以 OKLch 定义，确保跨设备的感知均匀与色准，亮度阶梯可预测，深浅模式无缝映射。
同时面向人类与 Agent 的
编辑主义
克制温暖
可被复制
框架无关
编辑主义
设计系统
v2.9.2 · 开源设计系统 · 318 条结构化令牌
适配任何现代媒体平台
原生 HTML / CSS
React / Vue / Svelte
Astro / 静态站点
邮件 / 富文本适配
PDF / 打印
SVG / Penpot 导入
为什么选择它
克制、温暖、可被复制的系统
每一个视觉决策都被沉淀为令牌与语义化的 class，让设计意图在跨平台协作和 Agent 协作中保持更一致。
令牌驱动
295 个 CSS 自定义属性覆盖色彩、字体、间距、圆角、阴影、动效与层级。改一个变量，全局即时更新。
编辑主义排版
衬线 Display + 无衬线 Body 的经典搭配，针对中英文混排的字距、行高与标点做了专门优化。
框架无关
没有构建工具、没有运行时依赖。一份 CSS 可用于网页与打印场景；邮件或富文本可转为兼容的静态样式。
暗色模式
暗色令牌覆盖核心颜色，暖灰基底而非纯黑，强调色自动亮化。支持系统偏好与本地持久化。
动效系统
统一的时长与缓动令牌、滚动揭示、SVG 描边与微交互，并完整尊重 prefers-reduced-motion。
可访问性
内置基础可访问性规则：语义化标签、焦点可见、键盘可达，并用验证器检查常见对比与标题结构。
AI 就绪
把整套规范浓缩为可复制的系统提示词与 Skill，帮助 Agent 按 EDIC 规则生成代码与文档。
系统规模
足够全面，又足够轻盈
覆盖常见视觉决策，低门槛接入——EDIC 在覆盖面与简洁性之间找到平衡。
318
结构化令牌
39
核心组件
209
SVG 图标
0
构建依赖
精简提示词 · Quick Prompt
你是 EDIC 设计系统的执行者。网页、文档与 UI 输出按以下规则执行；邮件或富文本按兼容静态样式处理： · 风格：编辑主义 × 橄榄绿，暖白纸色基底，克制留白。 · 颜色：一律用 OKLch。强调色 --ds-accent = oklch(52% 0.08 115)； 背景 oklch(97% 0.012 80)；正文 oklch(20% 0.02 60)。 · 字体：标题用衬线(Playfair/Iowan/Charter/Georgia)，正文/UI 用无衬线， 代码用等宽(JetBrains Mono)。中英混排开启字距优化。 · 间距：4 px 基准比例（4/8/12/16/24/32…）。圆角核心 8–16 px。 · 令牌优先：用 var(--ds-*) 变量，禁止硬编码魔法数字。 · 组件 class：ds-btn / ds-card / ds-badge，变体用 ds-btn--primary。 · 暗色：用 [data-theme="dark"]，基底用暖灰而非纯黑。 · 可访问性：语义化标签、焦点可见、键盘可达；正文对比目标 WCAG AA。 · 中文排版：中英文之间加空格，使用全形标点（。，！？「」）， 数字用半形，与单位之间加空格（如 16 px）。 收到后，请用上述规范产出我接下来要求的内容。
约 230 字 · 适合对话开场需要完整版？→
复制一段提示词，即刻对齐
让任何 Agent
查看全部提示词与 Skill
让任何 Agent
说同一种设计语言
无需安装、无需训练。把提示词粘贴给 ChatGPT、Claude、Cursor、Kiro 或任意编码助手——即使你不懂设计，它也能按 EDIC 的令牌、组件与排版规范，帮你产出更一致的作品。
1
复制提示词
从「提示词」页一键复制系统提示词或精简版。
2
粘贴给 Agent
作为系统/项目指令，或对话开场白发送。
3
获得规范产出
组件、落地页、文档按规范生成；邮件按兼容模式适配。
系统组成
从令牌到组件，一应俱全
每个模块都在视觉手册中以 live 形式展示，并在使用文档中配有代码与规范说明。
真实示例
用系统本身构建的页面
这些页面与文档完全基于 EDIC 设计系统构建——是规范最好的证明。