OKLch 色彩科学
全部颜色以 OKLch 定义，确保跨设备的感知均匀与色准，亮度阶梯可预测，深浅模式无缝映射。
同时面向人类与 Agent 的
编辑主义
克制温暖
可被复制
框架无关
编辑主义
设计系统
v1.10.2 · 开源设计系统 · 200+ 设计令牌
适配任何现代媒体平台
原生 HTML / CSS
React / Vue / Svelte
Astro / 静态站点
邮件 / 富文本
PDF / 打印
Penpot / Figma
为什么选择它
克制、温暖、可被复制的系统
每一个视觉决策都被沉淀为令牌与语义化的 class，让设计意图在任何平台、任何协作者（包括 AI）之间无损传递。
令牌驱动
200+ CSS 自定义属性覆盖色彩、字体、间距、圆角、阴影、动效与层级。改一个变量，全局即时更新。
编辑主义排版
衬线 Display + 无衬线 Body 的经典搭配，针对中英文混排的字距、行高与标点做了专门优化。
框架无关
没有构建工具、没有运行时依赖。一份 CSS 即可用于任意技术栈、邮件、PDF 与设计工具。
暗色模式
完整的暗色令牌覆盖，暖灰基底而非纯黑，强调色自动亮化。支持系统偏好与本地持久化。
动效系统
统一的时长与缓动令牌、滚动揭示、SVG 描边与微交互，并完整尊重 prefers-reduced-motion。
可访问性
对比度满足 WCAG AA，焦点可见、语义化标签、键盘可达——开箱即合规。
AI 就绪
把整套规范浓缩为可复制的系统提示词与 Skill。任何 Agent 读取后即可产出符合规范的代码与文档。
系统规模
足够全面，又足够轻盈
覆盖全链路视觉决策，零门槛即插即用——EDIC 在完整性与简洁性之间找到平衡。
200+
设计令牌
25
核心组件
100
UI 图标
0
构建依赖
精简提示词 · Quick Prompt
你是 EDIC 设计系统的执行者。所有输出严格遵循： · 风格：编辑主义 × 橄榄绿，暖白纸色基底，克制留白。 · 颜色：一律用 OKLch。强调色 --ds-accent = oklch(52% 0.08 115)； 背景 oklch(97% 0.012 80)；正文 oklch(20% 0.02 60)。 · 字体：标题用衬线(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 设计系统构建——是规范最好的证明。