EDIC 设计系统技能

当此技能激活时，您生成的每一项视觉成果——组件、页面、落地页区块、文档、邮件、报告等——都必须遵循 EDIC 设计系统规范。优先使用设计令牌（CSS 自定义属性）。禁止硬编码魔法数字。

设计基调

• 编辑型 × 橄榄绿：杂志级克制感，留白充足，衬线标题搭配无衬线正文，温暖纸张背景，以及自信但不喧闹的橄榄绿色强调色。
• 参考情绪：Monocle（排版克制）、Stripe（温暖实用性）、Mercury（精致沉静）。

硬性规则（反模式）

• 所有颜色定义均需使用 OKLch 色彩空间；通过 color-mix(in oklch, …) 进行混合。
• 每个视觉值必须使用 var(--ds-*) 令牌；禁止直接写入 #fff 或 16px 等硬编码值。
• 深色模式中不得使用纯黑 #000 —— 应使用暖灰色 oklch(15% 0.008 75)。
• 在深色模式下，强调色亮度相比浅色模式提升约 5–10%。
• 组件采用基础类 + 修饰类结构：ds-btn / ds-btn--primary。
• 仅在真正动态的场景下允许使用内联 style=（例如交错动画中的 --d）。
• 图标按钮必须包含 aria-label；装饰性 SVG 必须设置 aria-hidden="true"。

颜色令牌（核心）

浅色模式（:root）：

--ds-color-bg: oklch(97% 0.012 80)          /* 温暖纸张背景 */
--ds-color-surface: oklch(99% 0.005 80)
--ds-color-surface-raised: oklch(100% 0 0)  /* 弹出层 / 对话框 */
--ds-color-border: oklch(89% 0.012 80)
--ds-color-muted: oklch(48% 0.015 60)       /* 次要文字 */
--ds-color-fg: oklch(20% 0.02 60)           /* 正文文本 */
--ds-color-fg-strong: oklch(14% 0.025 60)   /* 标题文本 */

橄榄色渐变系列 --ds-color-olive-50…900；强调色：

--ds-color-olive-400: oklch(52% 0.08 115)   /* === --ds-accent === */
--ds-accent-hover: var(--ds-color-olive-500)
--ds-accent-soft:  var(--ds-color-olive-100)

语义色（每种均有 -bg 淡化版本）：

• 成功：oklch(55% 0.1 145)
• 警告：oklch(65% 0.1 85)
• 错误：oklch(50% 0.14 30)
• 信息：oklch(55% 0.08 240)

深色模式（[data-theme="dark"]）：

• 基础色：oklch(15% 0.008 75)
• 正文色：oklch(84% 0.008 72)
• 强调色：oklch(57% 0.065 115)

排版

--ds-font-display: "Iowan Old Style","Charter",Georgia,"Noto Serif SC",serif
--ds-font-body / --ds-font-ui: "Noto Sans SC",-apple-system,system-ui,sans-serif
--ds-font-mono: "JetBrains Mono","IBM Plex Mono",monospace

字号比例（rem）：

• 标注：0.75
• 小正文：0.875
• 正文：1
• 大正文：1.125
• 引言：1.25
• h4：1.5
• h3：1.875
• h2：2.25
• h1：3
• 展示级：3.75
• 主标题：4.5

• 标题：使用展示字体族 + --ds-leading-tight（1.1） + --ds-tracking-tight（-0.01em）
• 正文：行高 1.55，行宽 65–75 字符（约 540px / 72ch）
• 中英文混排：正文字间距 0.03em，标题字间距 0.06em；全角中文标点

间距 / 圆角 / 阴影 / 动效

• 间距：基础单位 4px，--ds-space-1..32（4→128px）
• 圆角：sm 2 · md 4 · lg 8 · xl 12 · 2xl 16 · full；核心范围 8–16px
• 阴影：--ds-shadow-xs..2xl
• 动效：持续时间 --ds-duration-150..500；缓动函数 --ds-ease-out: cubic-bezier(.16,1,.3,1)，--ds-ease-spring；始终尊重 prefers-reduced-motion: reduce

组件类名目录

布局

• 基础布局：ds-wrapper ds-section（--alt/--tight） ds-stack（--sm/--lg） ds-cluster（--center） ds-prose ds-flex-row
• 网格系统：ds-grid-2 ds-grid-3 ds-grid-4 ds-grid-6 ds-grid-icons ds-feature-grid
• 区块元素：ds-section-head（--center） ds-section-header
• 间距工具：ds-mt-* ds-mb-* ds-pt-0 ds-gap-16 ds-mx-auto ds-items-center ds-justify-start
• 间距可视化：ds-spacing-vis ds-spacing-block ds-radius-vis ds-shadow-vis

按钮与交互

• 按钮：ds-btn + --primary/--secondary/--ghost + --sm/--lg
• 图标按钮：ds-icon-btn
• 复制按钮：ds-copy-btn（--light）

卡片与表面

• 卡片：ds-card + --hoverable/--flat
• 玻璃卡片：ds-glass-card（--sm/--lg） ds-glass-meta ds-glass-demo-bg
• 组件预览：ds-component-preview ds-component-group ds-component-label

表单

• 基础表单：ds-input（--error） ds-label ds-hint ds-select ds-checkbox ds-radio ds-toggle（--track/--thumb）
• 扩展表单：ds-form-input ds-form-textarea ds-form-select ds-form-row ds-form-group ds-form-label ds-form-checkbox ds-form-hint（--error） ds-form-submit ds-form-required

反馈

• 徽章：ds-badge（--default/--accent/--success/--warning/--error）
• 警告框：ds-alert（--info/--success/--warning/--error） ds-alert-icon ds-alert-title
• 通知：ds-toast（--error/--success/--warning） ds-toast-group ds-toast-icon ds-toast-text ds-toast-close

导航

• 导航栏：ds-navbar（--scrolled） ds-navbar-inner ds-navbar-brand ds-navbar-links ds-navbar-link（--active） ds-navbar-actions ds-navbar-cta ds-navbar-icon-link
• 移动端菜单：ds-mnav-trigger ds-mnav-trigger-bar ds-mnav-backdrop
• 页面导航：ds-pagenav（--rail/--hidden） ds-pagenav-disclosure ds-pagenav-summary ds-pagenav-chevron ds-pagenav-list ds-pagenav-link（--active） ds-pagenav-num ds-pagenav-text
• 标签页：ds-tabs ds-tab（--active） ds-tab-content（--active）
• 面包屑：ds-breadcrumb ds-breadcrumb-current ds-breadcrumb-sep
• 分页：ds-pagination ds-page-btn（--active）
• 侧边导航：ds-nav ds-nav-item（--active） ds-nav-icon ds-nav-section-label
• 霜冻导航：ds-frosted-nav
• 主题切换：ds-theme-toggle-btn（--fixed）

数据展示

• 表格：ds-table ds-table-wrap ds-table-mini ds-table-mini-row
• 进度条：ds-progress ds-progress-bar ds-progress-fill ds-progress-label
• 头像：ds-avatar（--sm/--lg）
• 芯片/标签：ds-chip（--active） ds-chip-remove
• 骨架屏：ds-skeleton
• 色卡：ds-swatch ds-swatch-color ds-swatch-info ds-swatch-name ds-swatch-value
• 类型标签：ds-type-label ds-type-label-meta

遮罩层与玻璃效果

• 遮罩层: ds-overlay-sample ds-overlay-bg ds-overlay-layer ds-overlay-strong ds-overlay-light ds-overlay-label
• 模态框: ds-modal ds-modal-header ds-modal-body ds-modal-footer ds-modal-close
• 工具提示: ds-tooltip-demo ds-tooltip-bubble
• 下拉菜单: ds-dropdown ds-dropdown-item ds-dropdown-divider

排版

• 标题: ds-display ds-hero ds-h1 ds-h2 ds-h3 ds-h4 ds-h5 ds-subtitle
• 正文: ds-lead ds-caption ds-eyebrow ds-serif ds-mono ds-meta ds-cover
• 中文排版: ds-text-cjk ds-text-cjk-heading ds-text-mixed ds-text-indent ds-hanging-punctuation ds-text-emphasis ds-text-highlight
• 引用: ds-quote-cjk ds-no-orphan ds-num-unit
• 工具: ds-text-center ds-text-muted ds-text-accent ds-text-balance ds-text-pretty ds-inline-code ds-body-sm

文章目录

• 目录: ds-toc ds-toc-article ds-toc-article-title ds-toc-list ds-toc-link (--active/--h3) ds-toc-indicator ds-toc-badge ds-toc-grid ds-toc-item ds-toc-num

时间线

• 时间线: ds-timeline ds-timeline-item ds-timeline-dot ds-timeline-content ds-timeline-date ds-timeline-title ds-timeline-tag

日期与日历

• 日期组: ds-date-group ds-date-wrap ds-date-input ds-date-icon ds-date-calendar
• 日历: ds-cal-header ds-cal-nav ds-cal-month-year ds-cal-month ds-cal-year ds-cal-weekdays ds-cal-grid-new ds-cal-day ds-cal-today ds-cal-selected ds-cal-muted ds-cal-weekend ds-cal-weekend-col ds-cal-footer ds-cal-btn (--primary)

滑块

• 滑块: ds-slider-group ds-slider-label-row ds-slider-value ds-slider-track-wrap ds-slider-track ds-slider-fill ds-slider ds-slider-labels

手风琴

• 手风琴: ds-accordion ds-accordion-item ds-accordion-header ds-accordion-arrow ds-accordion-content

代码块

• 代码: ds-code ds-code-bar ds-code-lang

品牌与 Logo

• Logo: ds-logo (--lg) ds-logo-mark ds-logo-text ds-logo-word ds-logo-sub ds-logo-hero ds-logo-draw
• 品牌预览: ds-brand-preview (--paper/--ink)

站点结构

• 英雄区: ds-hero-section ds-hero-inner ds-hero-badge ds-hero-title ds-hero-lead ds-hero-actions ds-hero-meta ds-hero-mark-wrap ds-gradient-text
• 数据统计: ds-stat-grid ds-stat ds-stat-num ds-stat-label
• 步骤列表: ds-steps ds-step ds-step-num ds-step-body
• 兼容徽章: ds-compat-grid ds-compat-item ds-cta-h2
• 特性卡片: ds-feature-card ds-feature-ico
• 下载卡片: ds-dl-grid (--two-rows) ds-dl-card ds-dl-top ds-dl-ico ds-dl-meta ds-dl-actions
• 文档布局: ds-docs ds-docs-aside ds-docs-main ds-doc-block
• 提示卡片: ds-prompt ds-prompt-head ds-prompt-title ds-prompt-body ds-prompt-foot
• 富页脚: ds-footer-rich ds-footer-cols ds-footer-brand ds-footer-col-heading ds-footer-links ds-footer-bottom

动效与动画

• 滚动揭示: ds-reveal (--left/--right/--scale, 通过内联 --d 实现交错)
• 连续动效: ds-anim-float ds-anim-spin-slow ds-anim-pulse ds-anim-fade-in ds-anim-rise ds-anim-glow-breathe

重力与发光（深色模式强调）

• 发光效果: ds-glow-border ds-aura ds-surface-glow ds-heading-glow

装饰元素

• 边缘装饰: ds-edge-decor (--tl/--tr/--bl/--br)
• 背景斑点: ds-bg-blob (--1/--2/--3)

无障碍设计

• 无障碍: ds-sr-only ds-skip #ds-main

输出要求

• 生成完整、可运行的 HTML 片段，假设已链接 styles.css（可选 scripts.js）。
• 若宿主无样式表，包含最小化 <style> 标签，仍使用 OKLch 及等效令牌值。
• 使用语义化结构（header/main/section/nav/footer），并保持正确的标题层级。
• 默认采用浅色主题，并确保相同标记在 [data-theme="dark"] 下正常工作。
• 当不确定时，优先选择更克制、留白更多、更具编辑感的设计方案。

示例：基于令牌的卡片

<article class="ds-card ds-card--hoverable">
  <span class="ds-badge ds-badge--accent">新</span>
  <h4 class="ds-serif ds-mt-3">橄榄园笔记</h4>
  <p class="ds-text-muted">使用令牌的卡片，悬停浮起，深浅主题自适配。</p>
  <a class="ds-btn ds-btn--primary ds-mt-4" href="#">阅读全文</a>
</article>

参考资料

• 官方网站: https://edic.cgartlab.com/
• 使用文档: https://edic.cgartlab.com/docs.html
• 结构化令牌: https://edic.cgartlab.com/tokens.json