{"id":"99439fb5-6be0-497f-994d-3fed47fa0b07","entityType":"agent","slug":"clawhub-cgartlab-edic-design-system","name":"EDIC 设计系统","canonicalUrl":"https://www.xpersona.co/agent/clawhub-cgartlab-edic-design-system","canonicalPath":"/agent/clawhub-cgartlab-edic-design-system","generatedAt":"2026-10-11T03:54:31.003Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-10T23:56:23.154Z","emptyReason":null},"description":"Generate UI components, full pages, documents, emails, and assets aligned with the EDIC design system (Editorial × Olive Green, OKLch tokens for web/UI, dark-mode ready, CJK-optimized; emails use compatible static styles). Use this skill whenever the user asks to build, style, or refactor anything for EDIC, or explicitly requests the EDIC / \"editorial olive\" design system. Output token-driven, accessible, framework-agnostic HTML/CSS. Skill: EDIC 设计系统 Owner: cgartlab Summary: Generate UI components, full pages, documents, emails, and assets aligned with the EDIC design system (Editorial × Olive Green, OKLch tokens for web/UI, dark-mode ready, CJK-optimized; emails use compatible static styles). Use this skill whenever the user asks to build, style, or refactor anything for EDIC, or explicitly requests the EDIC / \"editorial olive\" design system. Ou","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1.2K downloads reported by the source. Last updated 10/10/2026.","installCommand":"clawhub skill install s170q5xetyqnsqsqvq5av2rpz58847mv:edic-design-system","sourceUrl":"https://clawhub.ai/cgartlab/edic-design-system","homepage":"https://clawhub.ai/cgartlab/skills/edic-design-system","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/cgartlab/edic-design-system","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/cgartlab/skills/edic-design-system","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":62,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"Generate UI components, full pages, documents, emails, and assets aligned with the EDIC design system (Editorial × Olive Green, OKLch tokens for web/UI, dark-mo"},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-10T23:56:23.154Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-10T23:56:23.154Z","emptyReason":null},"stars":null,"forks":null,"downloads":1225,"packageName":null,"latestVersion":"2.8.0","tractionLabel":"1.2K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-10T23:56:23.096Z","emptyReason":null},"lastUpdatedAt":"2026-10-10T23:56:23.154Z","lastCrawledAt":"2026-10-10T23:56:23.096Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-11T23:56:23.096Z","lastVerifiedAt":null,"highlights":[{"version":"2.8.0","createdAt":"2026-09-24T10:20:37.332Z","changelog":"新增 · publish skill to ClawHub in release pipeline (#299)","fileCount":10,"zipByteSize":47691},{"version":"2.5.0","createdAt":"2026-09-20T12:55:10.346Z","changelog":"**Major update: Manifest-first workflow, stricter design/token rules, and catalog improvements.** - Introduced manifest-first workflow: components and tokens must adhere to canonical source files and component contracts. - Expanded hard rules: enforce semantic token aliases and stricter anti-patterns. - Updated color tokens and adjusted `--ds-color-muted` for better accessibility. - Greatly expanded the component class catalog, including new classes for fields, file upload, loading indicators, and more. - Updated documentation to clarify separation between web/UI tokens and email/static styles. - Removed legacy file `skill-card.md`.","fileCount":10,"zipByteSize":47179},{"version":"1.9.4","createdAt":"2026-09-03T11:21:30.327Z","changelog":"- Added design tokens file: `tokens.json` - Removed documentation file: `skill-card.md`","fileCount":10,"zipByteSize":37859},{"version":"1.9.3","createdAt":"2026-08-15T10:40:28.381Z","changelog":"- Updated version to 1.10.2 in SKILL.md with minor documentation revisions. - Removed the skill-card.md file. - Made content and documentation edits in README.md, SKILL.md, and references/TOKENS.md for clarity and consistency.","fileCount":9,"zipByteSize":35350},{"version":"1.9.2","createdAt":"2026-08-14T03:46:54.799Z","changelog":"Version 1.10.0 — Major documentation and reference update. - Added comprehensive reference docs: ANTI-PATTERNS.md, EXAMPLES.md, PATTERNS.md, RECIPES.md, TOKENS.md. - Removed outdated files: skill-card.md and tokens.json. - Updated README.md and SKILL.md for improved clarity and coverage of the design system. - Expanded documentation on design tokens, usage rules, and component catalog.","fileCount":9,"zipByteSize":35393},{"version":"1.9.1","createdAt":"2026-06-25T16:27:37.116Z","changelog":"🔧 Version Sync (full file coverage) - stamp_version.py: Added YAML frontmatter (version: X.Y.Z) and Markdown (**Version:** X.Y.Z) pattern matching - validate_versions.py: Added check_hardcoded_semver() scanner — auto-detects stale same-minor version references across 10 key files - Removed blanket badge/Version exception — badge versions are now validated - Deleted 27-line dead stamp_file() function (superseded by replace_old_version()) - SKILL.md version changed to {{DS_VERSION}} placeholder for auto-stamp on future bumps - Cleaned up stale SKILL ZIP (v1.6.2 content) and CHECKSUMS.txt from git tracking - Added .release-please-manifest.json + package-lock.json to stamp targets — version sync now covers 23 files total 🌐 Deployment & Downloads - GitHub Pages deploy timeout increased 5m → 10m (fixes deploy-pages@v5 intermittent timeout) - All Pages actions upgraded to Node 24-native versions (configure-pages@v6, upload-pages-artifact@v5, deploy-pages@v5) - skill ZIP download links switched to GitHub Release URLs (replacing local paths) 📄 Documentation - CHANGELOG.md single-sourced from CHANGELOG.md; removed docs/changelog_human/ (eliminates drift) - AGENTS.md version fixed 1.7.0 → 1.9.1 (manual blind-spot repair) - docs/VERSIONING.md + DEVELOPMENT-GUIDE.md version-synced","fileCount":5,"zipByteSize":11424},{"version":"1.8.0","createdAt":"2026-06-24T09:30:04.821Z","changelog":"# EDIC Design System: Evolution Summary (v1.5.6 to v1.8.0) ## Core Breakthrough: AI-Ready Architecture - Design System as Context: Introduced the SKILL.md specification, translating design tokens, component constraints, and typography rules into machine-readable context. Enables AI Agents (Cursor, Claude Code, etc.) to generate EDIC-compliant HTML/CSS with zero hallucinations. - Zero-Runtime & Framework-Agnostic: Maintains a pure CSS and semantic ds-* class architecture, ensuring seamless compatibility across SPAs, static sites, email templates, and PDF print layouts without JS framework lock-in. ## New Features & Components - OKLch Color Science: Completely migrated from HEX/RGB to the perceptually uniform OKLch color space, enabling scientific dark-mode palette generation and visual consistency. - Page Navigation (.ds-pagenav): A unified TOC component featuring desktop floating and mobile collapsing for long-form editorial content. - Prism.js Syntax Theme: Custom olive-green editorial theme mapping 16 token types, fully optimized for dark mode visibility. - Layer 2 Cross-File Validators: Introduced cssref, darkmode, verext, and hardcode checks to strictly eliminate hardcoded colors and dead links at the CI level. ## Engineering Governance & Release Pipeline v2.0 - Semantic Versioning: Deep integration with release-please and enforced Conventional Commits for precise, automated ## PATCH/MINOR/MAJOR version bumps. - Global Version Stamping: Implemented stamp_version.py to inject version numbers into HTML, Markdown, and Skill assets during the build phase, eliminating runtime overhead. - Dual-Track Changelog System: Established a \"Machine Commit Log + Human-Readable Summary\" generation flow with CI hard-blocks, ensuring every release includes high-quality business context. - Size Limit Monitoring: Integrated CSS/JS Gzip size thresholds into CI to prevent uncontrolled asset bloat. ## Visual & UX Enhancements - Dark Mode Refinement: Rebuilt the Gravitas & Glow visual hierarchy to improve contrast and readability in dark environments. - Anti-Pattern Cleanup: Purged legacy HEX/RGBA hardcodes, fully migrating to the OKLch token system.","fileCount":10,"zipByteSize":59025},{"version":"1.5.4","createdAt":"2026-06-14T08:01:59.012Z","changelog":"🔧 Fixed Mobile scroll lock not released: removeProperty(\"touchAction\") failed due to camelCase/kebab-case mismatch. Switched to standard body{position:fixed} pattern. Footer sitemap dead link: Missing id=\"sitemap\" caused validate-links failure. Missing progress bar variants: .ds-progress now supports --success and --error. ✨ Added Unified version stamping: {{DS_VERSION}} across 21 files. stamp_version.py auto-detects ?v= and JSON \"version\". Release automation: package_skill.py / package_release.py generate full ZIP, Skill ZIP, and PDF reference card. 🛠️ Maintained Fixed docs.html timeline; stamp_version.py no longer misreads historical versions. Cleaned up CLAUDE.md, validate-verext, DEVELOPMENT-GUIDE.md.","fileCount":6,"zipByteSize":33876}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s170q5xetyqnsqsqvq5av2rpz58847mv:edic-design-system","setupComplexity":"low","setupSteps":["Setup complexity is classified as HIGH. You must provision dedicated cloud infrastructure or an isolated VM. Do not run this directly on your local workstation.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-cgartlab-edic-design-system/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-cgartlab-edic-design-system/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-cgartlab-edic-design-system/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-cgartlab-edic-design-system/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-cgartlab-edic-design-system/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-cgartlab-edic-design-system/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-11T03:54:31.000Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-cgartlab-edic-design-system/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-cgartlab-edic-design-system/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-cgartlab-edic-design-system/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-cgartlab-edic-design-system/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-10T23:56:23.154Z","emptyReason":null},"readme":"Skill: EDIC 设计系统\n\nOwner: cgartlab\n\nSummary: Generate UI components, full pages, documents, emails, and assets aligned with the EDIC design system (Editorial × Olive Green, OKLch tokens for web/UI, dark-mode ready, CJK-optimized; emails use compatible static styles). Use this skill whenever the user asks to build, style, or refactor anything for EDIC, or explicitly requests the EDIC / \"editorial olive\" design system. Output token-driven, accessible, framework-agnostic HTML/CSS.\n\nTags: latest:2.8.0\n\nVersion history:\n\nv2.8.0 | 2026-09-24T10:20:37.332Z | user\n\n新增\n· publish skill to ClawHub in release pipeline (#299)\n\nv2.5.0 | 2026-09-20T12:55:10.346Z | user\n\n**Major update: Manifest-first workflow, stricter design/token rules, and catalog improvements.**\n\n- Introduced manifest-first workflow: components and tokens must adhere to canonical source files and component contracts.\n- Expanded hard rules: enforce semantic token aliases and stricter anti-patterns.\n- Updated color tokens and adjusted `--ds-color-muted` for better accessibility.\n- Greatly expanded the component class catalog, including new classes for fields, file upload, loading indicators, and more.\n- Updated documentation to clarify separation between web/UI tokens and email/static styles.\n- Removed legacy file `skill-card.md`.\n\nv1.9.4 | 2026-09-03T11:21:30.327Z | user\n\n- Added design tokens file: `tokens.json`\n- Removed documentation file: `skill-card.md`\n\nv1.9.3 | 2026-08-15T10:40:28.381Z | auto\n\n- Updated version to 1.10.2 in SKILL.md with minor documentation revisions.\n- Removed the skill-card.md file.\n- Made content and documentation edits in README.md, SKILL.md, and references/TOKENS.md for clarity and consistency.\n\nv1.9.2 | 2026-08-14T03:46:54.799Z | auto\n\nVersion 1.10.0 — Major documentation and reference update.\n\n- Added comprehensive reference docs: ANTI-PATTERNS.md, EXAMPLES.md, PATTERNS.md, RECIPES.md, TOKENS.md.\n- Removed outdated files: skill-card.md and tokens.json.\n- Updated README.md and SKILL.md for improved clarity and coverage of the design system.\n- Expanded documentation on design tokens, usage rules, and component catalog.\n\nv1.9.1 | 2026-06-25T16:27:37.116Z | user\n\n🔧 Version Sync (full file coverage)\n- stamp_version.py: Added YAML frontmatter (version: X.Y.Z) and Markdown (**Version:** X.Y.Z) pattern matching\n- validate_versions.py: Added check_hardcoded_semver() scanner — auto-detects stale same-minor version references across 10 key files\n- Removed blanket badge/Version exception — badge versions are now validated\n- Deleted 27-line dead stamp_file() function (superseded by replace_old_version())\n- SKILL.md version changed to {{DS_VERSION}} placeholder for auto-stamp on future bumps\n- Cleaned up stale SKILL ZIP (v1.6.2 content) and CHECKSUMS.txt from git tracking\n- Added .release-please-manifest.json + package-lock.json to stamp targets — version sync now covers 23 files total\n🌐 Deployment & Downloads\n- GitHub Pages deploy timeout increased 5m → 10m (fixes deploy-pages@v5 intermittent timeout)\n- All Pages actions upgraded to Node 24-native versions (configure-pages@v6, upload-pages-artifact@v5, deploy-pages@v5)\n- skill ZIP download links switched to GitHub Release URLs (replacing local paths)\n📄 Documentation\n- CHANGELOG.md single-sourced from CHANGELOG.md; removed docs/changelog_human/ (eliminates drift)\n- AGENTS.md version fixed 1.7.0 → 1.9.1 (manual blind-spot repair)\n- docs/VERSIONING.md + DEVELOPMENT-GUIDE.md version-synced\n\nv1.8.0 | 2026-06-24T09:30:04.821Z | user\n\n# EDIC Design System: Evolution Summary (v1.5.6 to v1.8.0)\n\n## Core Breakthrough: AI-Ready Architecture\n- Design System as Context: Introduced the SKILL.md specification, translating design tokens, component constraints, and typography rules into machine-readable context. Enables AI Agents (Cursor, Claude Code, etc.) to generate EDIC-compliant HTML/CSS with zero hallucinations.\n- Zero-Runtime & Framework-Agnostic: Maintains a pure CSS and semantic ds-* class architecture, ensuring seamless compatibility across SPAs, static sites, email templates, and PDF print layouts without JS framework lock-in.\n\n##  New Features & Components\n- OKLch Color Science: Completely migrated from HEX/RGB to the perceptually uniform OKLch color space, enabling scientific dark-mode palette generation and visual consistency.\n- Page Navigation (.ds-pagenav): A unified TOC component featuring desktop floating and mobile collapsing for long-form editorial content.\n- Prism.js Syntax Theme: Custom olive-green editorial theme mapping 16 token types, fully optimized for dark mode visibility.\n- Layer 2 Cross-File Validators: Introduced cssref, darkmode, verext, and hardcode checks to strictly eliminate hardcoded colors and dead links at the CI level.\n\n## Engineering Governance & Release Pipeline v2.0\n- Semantic Versioning: Deep integration with release-please and enforced Conventional Commits for precise, automated \n\n## PATCH/MINOR/MAJOR version bumps.\n- Global Version Stamping: Implemented stamp_version.py to inject version numbers into HTML, Markdown, and Skill assets during the build phase, eliminating runtime overhead.\n- Dual-Track Changelog System: Established a \"Machine Commit Log + Human-Readable Summary\" generation flow with CI hard-blocks, ensuring every release includes high-quality business context.\n- Size Limit Monitoring: Integrated CSS/JS Gzip size thresholds into CI to prevent uncontrolled asset bloat.\n\n## Visual & UX Enhancements\n- Dark Mode Refinement: Rebuilt the Gravitas & Glow visual hierarchy to improve contrast and readability in dark environments.\n- Anti-Pattern Cleanup: Purged legacy HEX/RGBA hardcodes, fully migrating to the OKLch token system.\n\nv1.5.4 | 2026-06-14T08:01:59.012Z | user\n\n🔧 Fixed\nMobile scroll lock not released: removeProperty(\"touchAction\") failed due to camelCase/kebab-case mismatch. Switched to standard body{position:fixed} pattern.\nFooter sitemap dead link: Missing id=\"sitemap\" caused validate-links failure.\nMissing progress bar variants: .ds-progress now supports --success and --error.\n✨ Added\nUnified version stamping: {{DS_VERSION}} across 21 files. stamp_version.py auto-detects ?v= and JSON \"version\".\nRelease automation: package_skill.py / package_release.py generate full ZIP, Skill ZIP, and PDF reference card.\n🛠️ Maintained\nFixed docs.html timeline; stamp_version.py no longer misreads historical versions.\nCleaned up CLAUDE.md, validate-verext, DEVELOPMENT-GUIDE.md.\n\nv1.5.1 | 2026-06-09T11:02:26.960Z | auto\n\n- Added a detailed SKILL.md explaining the EDIC design system requirements.\n- Clarifies strict adherence to EDIC tokens, OKLch colors, dark mode handling, and typography.\n- Provides a comprehensive catalog of all available EDIC component classes.\n- Outlines anti-patterns and accessibility best practices.\n- Guides proper structure and naming for building accessible, token-driven, framework-agnostic UI artifacts.\n\nArchive index:\n\nArchive v2.8.0: 10 files, 47691 bytes\n\nFiles: README.md (11138b), references/ANTI-PATTERNS.md (9676b), references/EXAMPLES.md (13042b), references/PATTERNS.md (19102b), references/RECIPES.md (15944b), references/TOKENS.md (6555b), skill-card.md (2706b), SKILL.md (16154b), tokens.json (99950b), _meta.json (137b)\n\nFile v2.8.0:SKILL.md\n\n---\nname: edic-design-system\nslug: edic-design-system\ndisplayName: EDIC 设计系统\nversion: 2.8.0\ndescription: >-\n  Generate UI components, full pages, documents, emails, and assets aligned\n  with the EDIC design system (Editorial × Olive Green, OKLch tokens for\n  web/UI, dark-mode ready, CJK-optimized; emails use compatible static styles).\n  Use this skill whenever the user asks\n  to build, style, or refactor anything for EDIC, or explicitly requests the\n  EDIC / \"editorial olive\" design system. Output token-driven, accessible,\n  framework-agnostic HTML/CSS.\nlicense: MIT-0\n---\n\n# EDIC Design System Skill\n\nWhen this skill is active, every visual artifact you produce — components, pages,\nlanding sections, documentation, emails, reports — should follow the EDIC\ndesign system. **Prefer design tokens (CSS custom properties) for web/UI.\nNever hard-code magic numbers. Use compatible static styles for email.**\n\n## Manifest-First Workflow\n\nWhen this skill is active for an EDIC project, use manifest-first behavior:\n\n1. Read `edic-manifest.json` for the authoritative deliverable, token,\n   component, icon, validator, and constraint list.\n2. Read `tokens.json`, `icons.json`, and `AGENT-GUIDE.md` when generating or\n   auditing UI.\n3. Read `docs/component-gap-audit.md` and `docs/component-2.0-backlog.md`\n   before proposing, adding, or claiming completion of a component.\n4. Read `skills/edic-design-system/references/CONTRACTS.md` before creating a\n   new component or improving an interactive component.\n5. Read `references/ANTI-PATTERNS.md` before fixing or reviewing generated UI.\n\nComponent generation rules:\n\n- Existing manifest core components must use the documented `ds-*` class family\n  and examples; do not invent parallel class names.\n- New components must follow the component contract in\n  `references/CONTRACTS.md`.\n- Add CSS to `styles.css` before adding HTML examples in `docs.html`.\n- Use token-only visual values and include dark-mode coverage.\n- Include ARIA metadata and keyboard behavior for interactive components.\n- Mark a task complete only after `npm run audit` passes.\n\n## Design character\n- **Editorial × Olive Green**: magazine-grade restraint, generous whitespace,\n  serif headings + sans body, a warm paper background, and a confident — never\n  loud — olive-green accent.\n- Reference moods: Monocle (typographic restraint), Stripe (warm utility),\n  Mercury (refined calm).\n\n## Hard rules (anti-patterns)\n- Define web/UI colors in **OKLch**; mix with `color-mix(in oklch, …)`.\n- Use `var(--ds-*)` tokens for every web/UI visual value. No hard-coded `#fff` / `16px`.\n- Dark mode never uses pure black `#000` — use warm grey `oklch(17% 0.014 80)`.\n- In dark mode, lighten the accent ~5–10% vs. light mode.\n- Components use base + modifier: `ds-btn` / `ds-btn--primary`.\n- No inline `style=` except genuinely dynamic values (e.g. stagger `--d`).\n- Icon-only buttons need `aria-label`; decorative SVGs need `aria-hidden=\"true\"`.\n- Prefer semantic aliases such as `--ds-color-surface-primary`,\n  `--ds-color-text-primary`, `--ds-color-border-default`,\n  `--ds-border-radius-control`, and `--ds-motion-default` over raw scale\n  tokens when both exist.\n\n## Color tokens (core)\nLight (`:root`):\n```\n--ds-color-bg: oklch(97% 0.012 80)          /* warm paper background */\n--ds-color-surface: oklch(99% 0.005 80)\n--ds-color-surface-raised: oklch(99.5% 0.006 92)  /* popovers / modals */\n--ds-color-border: oklch(89% 0.012 80)\n--ds-color-muted: oklch(42% 0.015 60)       /* secondary text */\n--ds-color-fg: oklch(20% 0.02 60)           /* body text */\n--ds-color-fg-strong: oklch(14% 0.025 60)   /* headings */\n```\nOlive ramp `--ds-color-olive-50…900`; accent:\n```\n--ds-color-olive-400: oklch(52% 0.08 115)   /* === --ds-accent === */\n--ds-accent-hover: var(--ds-color-olive-500)\n--ds-accent-soft:  var(--ds-color-olive-100)\n```\nSemantic (each has a `-bg` tint): success `oklch(55% 0.1 145)`,\nwarning `oklch(65% 0.1 85)`, error `oklch(50% 0.14 30)`, info `oklch(55% 0.08 240)`.\nDark (`[data-theme=\"dark\"]`): base `oklch(17% 0.014 80)`, body `oklch(88% 0.008 80)`,\naccent `oklch(57% 0.065 115)`.\n\n## Typography\n```\n--ds-font-display: \"Playfair Display\",\"Iowan Old Style\",\"Charter\",Georgia,\"Noto Serif SC\",serif\n--ds-font-body / --ds-font-ui: \"Noto Sans SC\",-apple-system,system-ui,sans-serif\n--ds-font-mono: \"JetBrains Mono\",\"IBM Plex Mono\",monospace\n```\nScale (rem): caption .75 · body-sm .875 · body 1 · body-lg 1.125 · lead 1.25 ·\nh4 1.5 · h3 1.875 · h2 2.25 · h1 3 · display 3.75 · hero 4.5.\n- Headings: display family + `--ds-leading-tight` (1.1) + `--ds-tracking-tight` (-0.01em).\n- Body: line-height 1.55, measure 65–75 chars (~540px / 72ch).\n- CJK/Latin mix: body tracking 0.03em, heading 0.06em; full-width CJK punctuation.\n\n## Spacing / radius / shadow / motion\n- Spacing: 4px base, `--ds-space-1..32` (4→128px).\n- Radius: sm 2 · md 4 · lg 8 · xl 12 · 2xl 16 · full. Core 8–16px.\n- Shadow: `--ds-shadow-xs..2xl`.\n- Motion: duration `--ds-duration-150..500`; ease `--ds-ease-out: cubic-bezier(.16,1,.3,1)`,\n  `--ds-ease-spring`. Always honor `prefers-reduced-motion: reduce`.\n\n## Component class catalog\n\n### Layout\n- **基础布局**: `ds-wrapper` `ds-section` (`--alt`/`--tight`) `ds-stack` (`--sm`/`--lg`) `ds-cluster` (`--center`) `ds-prose` `ds-flex-row`\n- **网格系统**: `ds-grid-2` `ds-grid-3` `ds-grid-4` `ds-grid-6` `ds-grid-icons` `ds-feature-grid`\n- **区块元素**: `ds-section-head` (`--center`) `ds-section-header`\n- **间距工具**: `ds-mt-*` `ds-mb-*` `ds-pt-0` `ds-gap-16` `ds-mx-auto` `ds-items-center` `ds-justify-start`\n- **间距展示**: `ds-spacing-vis` `ds-spacing-block` `ds-radius-vis` `ds-shadow-vis`\n\n### Buttons & Interactive\n- **按钮**: `ds-btn` + `--primary`/`--secondary`/`--ghost` + `--sm`/`--lg`\n- **图标按钮**: `ds-icon-btn`\n- **复制按钮**: `ds-copy-btn` (`--light`)\n\n### Cards & Surfaces\n- **卡片**: `ds-card` + `--hoverable`/`--flat`\n- **玻璃卡片**: `ds-glass-card` (`--sm`/`--lg`) `ds-glass-meta` `ds-glass-demo-bg`\n- **组件预览**: `ds-component-preview` `ds-component-group` `ds-component-label`\n\n### Forms\n- **基础表单**: `ds-input` (`--error`) `ds-label` `ds-hint` `ds-select` `ds-checkbox` `ds-radio` `ds-toggle` (`--track`/`--thumb`)\n- **扩展表单**: `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`\n- **表单字段**: `ds-form-field` (`--error`/`--disabled`) `ds-form-field-label` `ds-form-field-required` `ds-form-field-hint` `ds-form-field-error`\n- **文件上传**: `ds-file-upload` (`ds-file-upload-drop`/`list`/`item`/`status`)\n\n### Feedback\n- **徽章**: `ds-badge` (`--default`/`--accent`/`--success`/`--warning`/`--error`)\n- **警告框**: `ds-alert` (`--info`/`--success`/`--warning`/`--error`) `ds-alert-icon` `ds-alert-title`\n- **通知**: `ds-toast` (`--error`/`--success`/`--warning`) `ds-toast-group` `ds-toast-icon` `ds-toast-text` `ds-toast-close`\n\n### Navigation\n- **导航栏**: `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`\n- **移动端菜单**: `ds-mnav-trigger` `ds-mnav-trigger-bar` `ds-mnav-backdrop`\n- **页面导航**: `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`\n- **标签页**: `ds-tabs` `ds-tab` (`--active`) `ds-tab-content` (`--active`)\n- **面包屑**: `ds-breadcrumb` `ds-breadcrumb-current` `ds-breadcrumb-sep`\n- **分页**: `ds-pagination` `ds-page-btn` (`--active`)\n- **侧边导航**: `ds-nav` `ds-nav-item` (`--active`) `ds-nav-icon` `ds-nav-section-label`\n- **霜冻导航**: `ds-frosted-nav`\n- **主题切换**: `ds-theme-toggle-btn` (`--fixed`)\n\n### Data Display\n- **表格**: `ds-table` `ds-table-wrap` `ds-table-mini` `ds-table-mini-row`\n- **进度条**: `ds-progress` `ds-progress-bar` `ds-progress-fill` `ds-progress-label`\n- **头像**: `ds-avatar` (`--sm`/`--lg`)\n- **芯片/标签**: `ds-chip` (`--active`) `ds-chip-remove`\n- **骨架屏**: `ds-skeleton`\n- **加载指示器**: `ds-spinner` (`--sm`/`--lg`) `ds-spinner-label`\n- **色卡**: `ds-swatch` `ds-swatch-color` `ds-swatch-info` `ds-swatch-name` `ds-swatch-value`\n- **类型标签**: `ds-type-label` `ds-type-label-meta`\n\n### Overlay & Glass\n- **遮罩层**: `ds-overlay-sample` `ds-overlay-bg` `ds-overlay-layer` `ds-overlay-strong` `ds-overlay-light` `ds-overlay-label`\n- **模态框**: `ds-modal` `ds-modal-header` `ds-modal-body` `ds-modal-footer` `ds-modal-close`\n- **工具提示**: `ds-tooltip-host` `ds-tooltip`\n\n- **菜单**: `ds-menu` (`--align-end`) `ds-menu-item` (`--danger`) `ds-menu-divider`\n- **确认对话框**: `ds-alert-dialog` `ds-alert-dialog-backdrop` `ds-alert-dialog-title` `ds-alert-dialog-desc` `ds-alert-dialog-actions`\n\n### Typography\n- **标题**: `ds-display` `ds-hero` `ds-h1` `ds-h2` `ds-h3` `ds-h4` `ds-h5` `ds-subtitle`\n- **正文**: `ds-lead` `ds-caption` `ds-eyebrow` `ds-serif` `ds-mono` `ds-meta` `ds-cover`\n- **中文排版**: `ds-text-cjk` `ds-text-cjk-heading` `ds-text-mixed` `ds-text-indent` `ds-hanging-punctuation` `ds-text-emphasis` `ds-text-highlight`\n- **引用**: `ds-quote-cjk` `ds-no-orphan` `ds-num-unit`\n- **工具**: `ds-text-center` `ds-text-muted` `ds-text-accent` `ds-text-balance` `ds-text-pretty` `ds-inline-code` `ds-body-sm`\n\n### Article TOC\n- **目录**: `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`\n\n### Timeline\n- **时间线**: `ds-timeline` `ds-timeline-item` `ds-timeline-dot` `ds-timeline-content` `ds-timeline-date` `ds-timeline-title` `ds-timeline-tag`\n\n### Date / Calendar\n- **日期组**: `ds-date-group` `ds-date-wrap` `ds-date-input` `ds-date-icon` `ds-date-calendar`\n- **日历**: `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`)\n\n### Slider\n- **滑块**: `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`\n\n### Accordion\n- **手风琴**: `ds-accordion` `ds-accordion-item` `ds-accordion-header` `ds-accordion-arrow` `ds-accordion-content`\n\n### Code Block\n- **代码**: `ds-code` `ds-code-bar` `ds-code-lang`\n\n### Brand / Logo\n- **Logo**: `ds-logo` (`--lg`) `ds-logo-mark` `ds-logo-text` `ds-logo-word` `ds-logo-sub` `ds-logo-hero` `ds-logo-draw`\n- **品牌预览**: `ds-brand-preview` (`--paper`/`--ink`)\n\n### Site Shell\n- **英雄区**: `ds-hero-section` `ds-hero-inner` `ds-hero-badge` `ds-hero-title` `ds-hero-actions` `ds-hero-mark-wrap` `ds-gradient-text`\n- **数据统计**: `ds-stat-grid` `ds-stat` `ds-stat-num` `ds-stat-label`\n- **步骤列表**: `ds-steps` `ds-step` `ds-step-num` `ds-step-body`\n- **兼容徽章**: `ds-compat-grid` `ds-compat-item` `ds-cta-h2`\n- **特性卡片**: `ds-feature-card` `ds-feature-ico`\n- **下载卡片**: `ds-dl-grid` (`--two-rows`) `ds-dl-card` `ds-dl-top` `ds-dl-ico` `ds-dl-meta` `ds-dl-actions`\n- **文档布局**: `ds-docs` `ds-docs-aside` `ds-docs-main` `ds-doc-block`\n- **提示卡片**: `ds-prompt` `ds-prompt-head` `ds-prompt-title` `ds-prompt-body` `ds-prompt-foot`\n- **富页脚**: `ds-footer-rich` `ds-footer-cols` `ds-footer-brand` `ds-footer-col-heading` `ds-footer-links` `ds-footer-bottom`\n\n### Motion & Animation\n- **滚动揭示**: `ds-reveal` (`--left`/`--right`/`--scale`, stagger via inline `--d`)\n- **连续动效**: `ds-anim-float` `ds-anim-spin-slow` `ds-anim-pulse` `ds-anim-fade-in` `ds-anim-rise` `ds-anim-glow-breathe`\n\n### Gravitas & Glow (dark-mode accent)\n- **发光效果**: `ds-glow-border` `ds-aura` `ds-surface-glow` `ds-heading-glow`\n\n### Decorative\n- **边缘装饰**: `ds-edge-decor` (`--tl`/`--tr`/`--bl`/`--br`)\n- **背景斑点**: `ds-bg-blob` (`--1`/`--2`/`--3`)\n\n### Accessibility\n- **无障碍**: `ds-sr-only` `ds-skip` `#ds-main`\n\n## Page composition rules\n\nBefore writing a single component, establish the page skeleton:\n\n1. **Pick the scene** — consult `references/RECIPES.md`. Match the user's goal\n   to a recipe (landing page / blog / docs / résumé / report). If no recipe fits,\n   compose from `references/PATTERNS.md` patterns.\n\n2. **Set section rhythm** — alternate `ds-section` (paper bg) with\n   `ds-section--alt` (surface bg). Never stack two `--alt` sections back-to-back.\n\n3. **One landmark per role** — one `<header>`, one `<main id=\"ds-main\">`, one\n   `<footer>`. Use `<section>` for content blocks inside `<main>`.\n\n4. **Heading hierarchy** — one `<h1>` per page. Sections start with `<h2>`,\n   sub-sections with `<h3>`. Never skip a level.\n\n5. **Reveal cadence** — add `ds-reveal` to section-level elements. Stagger\n   child items with `style=\"--d: 0.Xs\"` in 0.05–0.1 s increments. Cap at ~0.4 s.\n\n6. **Skip link** — every page must open with\n   `<a href=\"#ds-main\" class=\"ds-skip\">跳到主内容</a>`.\n\n## Output expectations\n\n- Produce complete, runnable HTML fragments assuming `styles.css` (and optional\n  `scripts.js`) are linked.\n- If the host has no stylesheet, include a minimal `<style>` but still use OKLch\n  and equivalent token values.\n- Use semantic structure (`header/main/section/nav/footer`) with correct heading order.\n- Default to light theme and guarantee the same markup works under `[data-theme=\"dark\"]`.\n- When unsure, favor the more restrained, more whitespace, more editorial option.\n- **For email output:** use inline sRGB styles only — no `var(--ds-*)`, no `oklch()`.\n  Use olive accent `#5a6e2a` ≈ `oklch(52% 0.08 115)`. See Pattern 10 in `PATTERNS.md`.\n\n## Self-check before finalizing output\n\nRun through this checklist mentally before returning any HTML:\n\n- [ ] Every color comes from `var(--ds-*)` — no bare hex/rgb/hsl.\n- [ ] Every spacing value uses `var(--ds-space-*)` — no bare `px`/`rem`.\n- [ ] Every font-size uses `var(--ds-text-*)` — no bare `px`/`rem`.\n- [ ] Every font-family uses `var(--ds-font-*)`.\n- [ ] Dark mode: no `#000` background; warm grey `oklch(17% 0.014 80)` via `var(--ds-color-bg)`.\n- [ ] BEM: every modifier class is paired with its base class (`ds-btn ds-btn--primary`).\n- [ ] Inline `style=` only for genuinely runtime-dynamic values (`--d`, widths, heights).\n- [ ] Icon-only buttons have `aria-label`; decorative SVGs have `aria-hidden=\"true\"`.\n- [ ] One `<h1>` on the page; heading levels never skip.\n- [ ] `<a href=\"#ds-main\" class=\"ds-skip\">` present on full-page output.\n- [ ] `prefers-reduced-motion` override present for any custom animation > 150ms.\n\n## Example: token-driven card\n```html\n<article class=\"ds-card ds-card--hoverable\">\n  <span class=\"ds-badge ds-badge--accent\">新</span>\n  <h4 class=\"ds-serif ds-mt-3\">橄榄园笔记</h4>\n  <p class=\"ds-text-muted\">使用令牌的卡片，悬停浮起，深浅主题自适配。</p>\n  <a class=\"ds-btn ds-btn--primary ds-mt-4\" href=\"#\">阅读全文</a>\n</article>\n```\n\n## Reference files\n\nLoad these on demand when you need precise values, complex structure, or full-page guidance:\n\n- [Scene recipes — complete page builds step-by-step (docs, landing, blog, résumé, report)](references/RECIPES.md)\n- [Page-level patterns — 10 section templates (hero, features, pricing, timeline, dashboard, email)](references/PATTERNS.md)\n- [Component HTML examples — glass card, docs layout, navbar, toast, accordion, modal, tabs, dropdown](references/EXAMPLES.md)\n- [Complete token values — spacing, radius, shadow, blur, motion, type scale](references/TOKENS.md)\n- [Anti-patterns & correct replacements — color, spacing, inline style, BEM, a11y, motion](references/ANTI-PATTERNS.md)\n\n## Reference\n- Website: https://edic.cgartlab.com/\n- Usage docs: https://edic.cgartlab.com/docs.html\n- Structured tokens: https://edic.cgartlab.com/tokens.json\n\nFile v2.8.0:README.md\n\n# EDIC Design System Skill Package v2.8.0\n# EDIC 设计系统 Skill 技能包 v2.8.0\n\n[![License: MIT-0](https://img.shields.io/badge/License-MIT%200-blue.svg)](https://spdx.org/licenses/MIT-0.html)\n[![Version](https://img.shields.io/badge/Version-2.0.0-green.svg)](https://edic.cgartlab.com/)\n\n---\n\n## 适用场景 Scope\n\n**✅ 适合以下场景：**\n\n- 内容型网站、博客、文章排版\n- 企业官网、品牌落地页\n- 内部报告、多页文档\n- 邮件模板、通讯设计\n- 个人主页、作品集\n- 需要精致 CJK（中日韩）排版的项目\n- AI 辅助生成的界面原型\n\n**❌ 目前不适合以下场景：**\n\n- 游戏 UI（高对比/霓虹/像素风格）\n- 重 Glassmorphism 风格\n- 移动端原生应用（iOS/Android）\n- 需要完全定制品牌色的项目（非橄榄绿体系）\n\n> 以上不适用场景未来不排除支持，欢迎在 [GitHub Issues](https://github.com/cgartlab/edic-design-system/issues) 提需求。\n\n---\n\n## 快速上手 Quick Start\n\n无论使用哪种 AI 工具，三步即可产出符合 EDIC 规范的界面：\n\n**第一步：安装 Skill**（见下方各平台安装说明）\n\n**第二步：用自然语言描述需求**\n\n```\n用 EDIC 设计系统，帮我做一个博客文章卡片列表，\n包含封面图、标题、摘要、日期和「阅读全文」按钮。\n```\n\n**第三步：粘贴输出，即刻预览**\n\n将 AI 返回的 HTML 片段粘贴进项目，确保已引入 `styles.css` 和 `scripts.js`，刷新即可预览 EDIC 样式。\n\n> **Prompt 技巧：** 可以在描述需求时附加风格关键词，例如「偏杂志排版」「需要暗色模式」「CJK 中文优先」，Agent 会优先参考对应的组件和令牌。\n\n---\n\n## 安装 Installation\n\n### Claude Code / Claude Code\n\n```bash\n# 项目级安装（推荐）\nmkdir -p .claude/skills\n# 解压本 ZIP，将 edic-design-system 目录内容放入 .claude/skills/edic-design-system/\n# 或直接放置 SKILL.md 文件\n\n# 全局安装\nmkdir -p ~/.claude/skills/edic-design-system\ncp SKILL.md ~/.claude/skills/edic-design-system/\n```\n\n> **验证安装成功**：将以下最小 demo 保存为 `test.html`，用浏览器打开——看到橄榄绿按钮即表示样式加载正常；\n> 同时在 Claude Code 中发送「用 EDIC 设计系统设计一个按钮」，Claude 应使用 `ds-btn ds-btn--primary` 类名并遵循 `--ds-*` 令牌规范。\n\n```html\n<!doctype html>\n<html lang=\"zh-CN\" data-theme=\"\">\n  <head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>EDIC 安装验证</title>\n    <link rel=\"stylesheet\"\n      href=\"https://cdn.jsdelivr.net/gh/cgartlab/edic-design-system@main/styles.css\">\n  </head>\n  <body style=\"padding: 2rem\">\n    <button class=\"ds-btn ds-btn--primary\">EDIC 安装成功 ✓</button>\n    <script\n      src=\"https://cdn.jsdelivr.net/gh/cgartlab/edic-design-system@main/scripts.js\">\n    </script>\n  </body>\n</html>\n```\n\n> **中文字体说明：** EDIC 使用系统字体栈（`\"Noto Sans SC\"`、`\"Noto Serif SC\"`），无需额外安装。\n> 若目标环境未预装 Noto SC（如部分 Windows / Linux），可在 `<head>` 中补充以下代码确保稳定渲染：\n>\n> ```html\n> <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n> <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n> <link href=\"https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@400;700&display=swap\" rel=\"stylesheet\">\n> ```\n\n### Cursor\n\n```bash\n# 方式一：写入项目级规则（推荐）\n# 文件：.cursor/rules/edic-design-system.md\n# 内容：复制 SKILL.md 的设计原则和组件规范部分\n\n# 方式二：复制到全局 skills\nmkdir -p ~/.cursor/skills/edic-design-system\ncp SKILL.md ~/.cursor/skills/edic-design-system/\n```\n\n### Kiro\n\n```bash\n# 写入 steering 文件\nmkdir -p .kiro/steering\n# 复制 SKILL.md 设计规范到 .kiro/steering/edic-design-system.md\n```\n\n### GitHub Copilot\n\n```bash\n# 写入项目说明\n# 文件：.github/copilot-instructions.md\n# 内容：复制 SKILL.md 的设计原则、令牌和组件规范\n```\n\n### ChatGPT / Gemini / 其他 LLM\n\n将 `SKILL.md` 的核心内容（设计原则 + 令牌速查 + 组件类名表）复制到：\n- ChatGPT：Settings → Custom Instructions → \"All conversations\"\n- Gemini：Gemini App Settings → AI Studio → System Instructions\n- 其他：将规范作为每轮对话的首条系统消息\n\n---\n\n## 文件说明 Files\n\n| 文件 | 用途 |\n|------|------|\n| `SKILL.md` | Agent 技能包 — 持久化遵循 EDIC 设计规范 |\n| `README.md` | 安装指南 — 多平台 AI 工具接入说明 |\n| `tokens.json` | 设计令牌 — 结构化 JSON 格式参考 |\n\n---\n\n## 设计原则 Design Principles\n\n1. **OKLch Colors / OKLch 颜色** — 所有颜色使用 OKLch 色彩空间，绝不用 hex/rgb\n2. **Token-Driven / 令牌驱动** — 使用 `--ds-*` CSS 变量，禁止硬编码魔法数字\n3. **Dark Mode / 暗色模式** — 基底用暖灰 `oklch(17% 0.014 80)`，非纯黑\n4. **Component System / 组件系统** — 基类 + 修饰符：`ds-btn` / `ds-btn--primary`\n5. **Accessibility / 无障碍** — 图标按钮需 `aria-label`，装饰元素需 `aria-hidden`\n\n---\n\n## 核心令牌速查 Core Tokens\n\n```css\n/* Colors / 颜色 */\n--ds-color-bg: oklch(97% 0.012 80)          /* Warm paper background */\n--ds-color-fg: oklch(20% 0.02 60)           /* Body text */\n--ds-accent: oklch(52% 0.08 115)           /* Olive green accent */\n\n/* Typography / 字体 */\n--ds-font-display: serif                   /* Headings */\n--ds-font-body: sans-serif                 /* Body / UI */\n--ds-font-mono: monospace                  /* Code */\n\n/* Spacing / 间距 */\n--ds-space-1..32                          /* 4px base ratio */\n\n/* Radius / 圆角 */\n--ds-radius-md: 4px\n\n/* Motion / 动效 */\n--ds-duration-150..500                    /* Duration scale */\n--ds-ease-out: cubic-bezier(0.16, 1, 0.3, 1)\n```\n\n---\n\n## 常用组件速查 Quick Component Reference\n\n| 需求 | 组件类 |\n|------|--------|\n| Button / 按钮 | `ds-btn ds-btn--primary` |\n| Card / 卡片 | `ds-card ds-card--hoverable` |\n| Input / 输入框 | `ds-input ds-label` |\n| Badge / 徽章 | `ds-badge ds-badge--accent` |\n| Alert / 提示框 | `ds-alert ds-alert--info` |\n| Navbar / 导航栏 | `ds-navbar ds-navbar-link--active` |\n| Dark toggle / 暗色切换 | `ds-theme-toggle-btn` |\n| Reveal animation / 揭示动效 | `ds-reveal` + `--d` stagger |\n| Toast / 通知 | `ds-toast ds-toast-icon` |\n\n完整组件契约（44 个核心组件家族）见 `SKILL.md`。\n\n---\n\n## 场景案例 Examples\n\n以下均为官网真实页面，可直接查看源码作为参考：\n\n| 场景 | 预览链接 | 核心组件 |\n|------|----------|----------|\n| 博客 / 文章页 | [blog.html](https://edic.cgartlab.com/blog.html) | `ds-prose` `ds-toc` `ds-badge` `ds-reveal` |\n| 企业官网 | [company.html](https://edic.cgartlab.com/company.html) | `ds-hero-section` `ds-feature-card` `ds-footer-rich` |\n| 个人简历 | [resume.html](https://edic.cgartlab.com/resume.html) | `ds-timeline` `ds-badge` `ds-grid-2` |\n| 多页报告 | [report.html](https://edic.cgartlab.com/report.html) | `ds-docs` `ds-pagenav` `ds-table` |\n| 设计系统主页 | [edic.cgartlab.com](https://edic.cgartlab.com/) | `ds-navbar` `ds-stat-grid` `ds-hero-section` |\n\n---\n\n## 常见问题 FAQ\n\n**Q1：没有 `styles.css` 文件，示例代码能运行吗？**\n\n不能。所有 `ds-*` 类名依赖 `styles.css` 中定义的 CSS 自定义属性。请先引入样式文件（本地路径或上方验证 demo 中的 jsDelivr CDN 链接），再运行示例代码。\n\n---\n\n**Q2：`tokens.json` 是做什么用的？怎么使用？**\n\n`tokens.json` 是 EDIC 的结构化令牌导出：`tokens[]` 为当前机器入口，包含 `name`、`value`、`category`、`description`、`dark`、`aliases`、`status` 等元数据；`_legacyTokens` 保留 1.x 兼容读取。可用于 Figma Tokens 插件配置、Tailwind CSS 主题转换、AI 选择和批量生成。\n\n---\n\n**Q3：如何切换暗色模式？**\n\n有两种方式：\n- **手动**：在 `<html>` 标签上添加 `data-theme=\"dark\"` 属性。\n- **自动**：在页面中放置 `<button class=\"ds-theme-toggle-btn\">` 按钮，引入 `scripts.js` 后会自动处理切换逻辑，用户选择通过 `localStorage`（key: `ds-theme-mode`）持久化。\n\n若不引入 `scripts.js`，也可响应系统偏好：`styles.css` 内置了 `@media (prefers-color-scheme: dark)` 规则，无需 JavaScript。\n\n---\n\n**Q4：中文字体在某些环境下显示不对，怎么处理？**\n\nEDIC 使用系统字体栈（`\"Noto Sans SC\"`、`\"Noto Serif SC\"`），在 macOS / 较新 Android 设备上通常已预装。若目标环境（如部分 Windows / Linux）未预装，建议在 `<head>` 中补充 Google Fonts 预加载（见上方「验证安装成功」下的字体说明代码块）。\n\n---\n\n**Q5：AI 生成的代码有 `ds-*` 类名，但样式完全不生效，怎么排查？**\n\n按以下顺序检查：\n1. 打开浏览器 DevTools → Network 面板，确认 `styles.css` 已加载且 HTTP 状态为 200。\n2. 检查 `<link>` 标签的 `href` 路径是否正确（相对路径 vs 绝对路径）。\n3. 确认 `<html>` 标签上没有被其他 CSS 框架覆盖 `--ds-*` 变量。\n\n99% 的情况是第 1 步的路径问题。\n\n---\n\n**Q6：在 React / Vue / Svelte 等框架中怎么用？**\n\nEDIC 是纯 CSS/JS，无需安装 npm 包。在框架的入口文件中引入 `styles.css` 即可：\n\n```js\n// React: src/index.js 或 src/main.jsx\nimport './path/to/styles.css';\n\n// Vue: src/main.js\nimport './path/to/styles.css';\n```\n\n组件写法与普通 HTML 完全一致，直接在 JSX / 模板中使用 `className=\"ds-btn ds-btn--primary\"`（React）或 `class=\"ds-btn ds-btn--primary\"`（Vue/Svelte）。`scripts.js` 按需引入，或在 `index.html` 的 `<body>` 末尾用 `<script>` 标签引入。\n\n---\n\n## 参考资源\n\n- **视觉手册**: https://edic.cgartlab.com/docs.html\n- **下载页面**: https://edic.cgartlab.com/downloads.html\n- **GitHub**: https://github.com/cgartlab/edic-design-system\n\n---\n\n## 更新日志 Changelog\n\n### v1.9.2 (2026-06)\n- 新增 `references/` 目录，包含三个按需加载的参考文件\n- `references/EXAMPLES.md`：8 个高频复合组件（Glass Card、Docs 布局、Navbar、Toast、Accordion、Modal、Tabs、Dropdown）完整 HTML 结构示例\n- `references/TOKENS.md`：间距 / 圆角 / 阴影 / 动效 / 排版令牌完整实际值速查表（含 px 换算）\n- `references/ANTI-PATTERNS.md`：反模式 × 正确替代对照表，覆盖颜色、间距、Inline Style、BEM、无障碍、动效\n- `SKILL.md` 末尾新增 Reference Files 章节，通过标准 Markdown 链接按需触发加载\n\n### v2.8.0 (2026-09)\n- 重构 tokens.json 为结构化数组，并保留 1.x 兼容读取层\n- 添加统一构建工具链 `scripts/lint.py` 和 `scripts/build.py`\n- 完善打印/PDF 输出样式，添加 `@page` 规则\n\n### v1.5.1 (2026-06)\n- 维护 44 个核心组件类与新增组件的样式契约\n- 统一组件契约结构\n- 添加双语 README 安装说明\n\nFile v2.8.0:_meta.json\n\n{\n  \"ownerId\": \"kn7a3fym68pryr0r1q29ybrp8181qsdg\",\n  \"slug\": \"edic-design-system\",\n  \"version\": \"2.8.0\",\n  \"publishedAt\": 1790245237332\n}\n\nFile v2.8.0:references/ANTI-PATTERNS.md\n\n# EDIC Anti-Patterns & Correct Replacements\n# 反模式 × 正确替代对照表\n\n> Loaded on demand when validating or correcting generated code.\n> Each entry shows the wrong pattern, why it fails, and the exact replacement.\n\n---\n\n## Color Anti-Patterns\n\n### ❌ Hard-coded hex / rgb / hsl colors\n\n```css\n/* ❌ Wrong */\ncolor: #333;\nbackground: #fff;\nbackground: rgb(255, 255, 255);\nborder-color: hsl(0 0% 90%);\n```\n\n```css\n/* ✅ Correct — use semantic color tokens */\ncolor: var(--ds-color-fg);\nbackground: var(--ds-color-surface-raised);\nbackground: var(--ds-color-surface-raised);\nborder-color: var(--ds-color-border);\n```\n\n**Why:** Hex/rgb/hsl values do not update in dark mode. `--ds-*` tokens switch\nautomatically via `[data-theme=\"dark\"]`.\n\n---\n\n### ❌ Bare `oklch()` outside `:root` / `[data-theme]` / `@keyframes`\n\n```css\n/* ❌ Wrong — bare oklch in a component rule */\n.my-card {\n  background: oklch(97% 0.012 80);\n  color: oklch(20% 0.02 60);\n}\n```\n\n```css\n/* ✅ Correct — reference the token */\n.my-card {\n  background: var(--ds-color-bg);\n  color: var(--ds-color-fg);\n}\n```\n\n**Why:** Bare `oklch()` in component rules bypasses the token system and breaks\ndark mode. Bare oklch is only allowed in `:root` and `[data-theme=\"dark\"]` token\ndeclarations, and in `@keyframes`.\n\n---\n\n### ❌ Pure black in dark mode\n\n```css\n/* ❌ Wrong */\n[data-theme=\"dark\"] .surface { background: #000; }\n[data-theme=\"dark\"] .surface { background: oklch(0% 0 0); }\n```\n\n```css\n/* ✅ Correct — warm dark base */\n[data-theme=\"dark\"] .surface { background: var(--ds-color-bg); }\n/* which resolves to: oklch(17% 0.014 80) — warm grey, not cold black */\n```\n\n---\n\n### ❌ Using light-mode accent directly in dark mode\n\n```css\n/* ❌ Wrong — olive-400 light value is too dark on dark backgrounds */\n[data-theme=\"dark\"] .accent-text { color: oklch(52% 0.08 115); }\n```\n\n```css\n/* ✅ Correct — dark-mode accent is 5–10% lighter */\n[data-theme=\"dark\"] .accent-text { color: var(--ds-accent); }\n/* which resolves to: oklch(57% 0.065 115) in dark mode */\n```\n\n---\n\n## Spacing Anti-Patterns\n\n### ❌ Hard-coded pixel or rem values\n\n```css\n/* ❌ Wrong */\npadding: 16px;\nmargin-top: 24px;\ngap: 8px;\npadding: 1rem;\n```\n\n```css\n/* ✅ Correct — use spacing tokens */\npadding: var(--ds-space-4);      /* = 16px = 1rem */\nmargin-top: var(--ds-space-6);   /* = 24px = 1.5rem */\ngap: var(--ds-space-2);          /* = 8px = 0.5rem */\npadding: var(--ds-space-4);      /* same value, correct source */\n```\n\n**Quick mapping:**\n`4px` → `--ds-space-1` · `8px` → `--ds-space-2` · `12px` → `--ds-space-3` ·\n`16px` → `--ds-space-4` · `24px` → `--ds-space-6` · `32px` → `--ds-space-8`\n\n---\n\n## Inline Style Anti-Patterns\n\n### ❌ Static inline `style=` attributes\n\n```html\n<!-- ❌ Wrong — static values bypass token system -->\n<div style=\"padding: 16px; background: #fff; border-radius: 8px;\">\n```\n\n```html\n<!-- ✅ Correct — use component classes -->\n<div class=\"ds-card\">\n\n<!-- ✅ Also correct — inline style only for genuinely dynamic values -->\n<div class=\"ds-reveal\" style=\"--d: 0.1s\">  <!-- stagger delay: dynamic, OK -->\n```\n\n**Exception:** Inline `style=` is allowed **only** for values that are computed at\nruntime (e.g., stagger delays `--d`, progress bar widths, dynamic heights).\n\n---\n\n## Typography Anti-Patterns\n\n### ❌ Hard-coded font sizes\n\n```css\n/* ❌ Wrong */\nfont-size: 14px;\nfont-size: 0.875rem;\nfont-size: 1.5rem;\n```\n\n```css\n/* ✅ Correct — use type scale tokens */\nfont-size: var(--ds-text-body-sm);  /* = 0.875rem = 14px */\nfont-size: var(--ds-text-body-sm);\nfont-size: var(--ds-text-h4);       /* = 1.5rem = 24px */\n```\n\n---\n\n### ❌ Hard-coded font families\n\n```css\n/* ❌ Wrong */\nfont-family: Georgia, serif;\nfont-family: -apple-system, sans-serif;\nfont-family: 'Courier New', monospace;\n```\n\n```css\n/* ✅ Correct */\nfont-family: var(--ds-font-display);  /* headings: Playfair Display, Iowan Old Style, Charter, Georgia, Noto Serif SC */\nfont-family: var(--ds-font-body);     /* body: Noto Sans SC, -apple-system, system-ui */\nfont-family: var(--ds-font-mono);     /* code: JetBrains Mono, IBM Plex Mono */\n```\n\n---\n\n## Component Structure Anti-Patterns\n\n### ❌ BEM dangling modifier (no base class)\n\n```html\n<!-- ❌ Wrong — modifier without base class -->\n<button class=\"ds-btn--primary\">Click</button>\n<div class=\"ds-card--hoverable\">Content</div>\n```\n\n```html\n<!-- ✅ Correct — base class + modifier -->\n<button class=\"ds-btn ds-btn--primary\">Click</button>\n<div class=\"ds-card ds-card--hoverable\">Content</div>\n```\n\n---\n\n### ❌ Glass card without colored background parent\n\n```html\n<!-- ❌ Wrong — backdrop-filter has nothing to blur on plain white -->\n<body>\n  <div class=\"ds-glass-card\">...</div>\n</body>\n```\n\n```html\n<!-- ✅ Correct — colored parent enables the blur effect -->\n<div class=\"ds-glass-demo-bg\">\n  <div class=\"ds-glass-card\">...</div>\n</div>\n```\n\n---\n\n### ❌ Dropdown without `position:relative` parent\n\n```html\n<!-- ❌ Wrong — dropdown panel positions relative to viewport -->\n<div>\n  <button>Open</button>\n  <div class=\"ds-dropdown\" style=\"position:absolute; top:40px; left:0;\">...</div>\n</div>\n```\n\n```html\n<!-- ✅ Correct — wrapper provides positioning context -->\n<div style=\"position:relative; display:inline-block;\">\n  <button>Open</button>\n  <div class=\"ds-dropdown\"\n       style=\"position:absolute; top:calc(100% + var(--ds-space-1)); right:0;\n              z-index:var(--ds-z-dropdown);\">...</div>\n</div>\n```\n\n---\n\n## Accessibility Anti-Patterns\n\n### ❌ Icon-only button without `aria-label`\n\n```html\n<!-- ❌ Wrong — screen reader announces nothing meaningful -->\n<button class=\"ds-icon-btn\">\n  <svg><!-- close icon --></svg>\n</button>\n```\n\n```html\n<!-- ✅ Correct -->\n<button class=\"ds-icon-btn\" aria-label=\"关闭\">\n  <svg aria-hidden=\"true\"><!-- close icon --></svg>\n</button>\n```\n\n---\n\n### ❌ Decorative SVG without `aria-hidden`\n\n```html\n<!-- ❌ Wrong — screen reader may read out the SVG title/desc or skip incorrectly -->\n<svg class=\"ds-feature-ico\"><!-- star icon --></svg>\n```\n\n```html\n<!-- ✅ Correct -->\n<svg class=\"ds-feature-ico\" aria-hidden=\"true\"><!-- star icon --></svg>\n```\n\n---\n\n## Motion Anti-Patterns\n\n### ❌ Animation without reduced-motion override\n\n```css\n/* ❌ Wrong — ignores user accessibility preference */\n.ds-reveal {\n  animation: fadeIn var(--ds-duration-500) var(--ds-ease-out);\n}\n```\n\n```css\n/* ✅ Correct */\n.ds-reveal {\n  animation: fadeIn var(--ds-duration-500) var(--ds-ease-out);\n}\n@media (prefers-reduced-motion: reduce) {\n  .ds-reveal { animation: none; opacity: 1; transform: none; }\n}\n```\n\nNote: `styles.css` already includes global `prefers-reduced-motion` rules for\nbuilt-in components. Add overrides only for custom animations you write.\n\n---\n\n## Interactive Component Anti-Patterns\n\n### ❌ Fake button using a div\n\n```html\n<!-- ❌ Wrong — no semantics, no keyboard, no focus contract -->\n<div class=\"ds-btn\" onclick=\"openMenu()\">Open</div>\n```\n\n```html\n<!-- ✅ Correct -->\n<button type=\"button\" class=\"ds-btn\" aria-haspopup=\"menu\" aria-expanded=\"false\"\n        aria-controls=\"user-menu\">Open</button>\n```\n\n**Why:** Only native interactive elements or explicit `role` + keyboard handlers\nproduce reliable focus, activation, and accessibility behavior.\n\n---\n\n### ❌ Missing `aria-expanded` on collapsible triggers\n\n```html\n<!-- ❌ Wrong -->\n<button class=\"ds-btn\" id=\"menu-btn\">菜单</button>\n<ul id=\"menu-list\" class=\"ds-menu\"></ul>\n```\n\n```html\n<!-- ✅ Correct -->\n<button type=\"button\" class=\"ds-btn\" id=\"menu-btn\"\n        aria-haspopup=\"true\" aria-expanded=\"false\" aria-controls=\"menu-list\">菜单</button>\n<ul id=\"menu-list\" class=\"ds-menu\" role=\"menu\" hidden></ul>\n```\n\n---\n\n### ❌ Pagination without current state\n\n```html\n<!-- ❌ Wrong — screen readers cannot tell which page is current -->\n<button class=\"ds-page-btn\">1</button>\n<button class=\"ds-page-btn ds-page-btn--active\">2</button>\n```\n\n```html\n<!-- ✅ Correct -->\n<button type=\"button\" class=\"ds-page-btn\">1</button>\n<button type=\"button\" class=\"ds-page-btn ds-page-btn--active\"\n        aria-current=\"page\">2</button>\n```\n\n---\n\n### ❌ Toast without live region\n\n```html\n<!-- ❌ Wrong -->\n<div id=\"toast\"></div>\n```\n\n```html\n<!-- ✅ Correct -->\n<div id=\"toast\" class=\"ds-toast-group\" role=\"status\" aria-live=\"polite\"\n     aria-atomic=\"false\"></div>\n```\n\n---\n\n### ❌ Overlay without trigger relationship or focus recovery\n\n```html\n<!-- ❌ Wrong -->\n<button id=\"drawer-btn\">打开</button>\n<aside id=\"drawer\" class=\"ds-drawer\" hidden>...</aside>\n```\n\n```html\n<!-- ✅ Correct -->\n<button type=\"button\" id=\"drawer-btn\" aria-haspopup=\"dialog\"\n        aria-expanded=\"false\" aria-controls=\"drawer\">打开</button>\n<aside id=\"drawer\" class=\"ds-drawer\" role=\"dialog\" aria-modal=\"true\"\n       aria-labelledby=\"drawer-title\" hidden>\n  <h2 id=\"drawer-title\">设置</h2>\n</aside>\n```\n\n**Why:** Open/closed panels need a stable relationship to their trigger,\nEsc behavior, focus trap where modal, and focus return on close.\n\n---\n\n### ❌ Loading state without disabled/focus handling\n\n```html\n<!-- ❌ Wrong — active users can submit twice -->\n<button class=\"ds-btn ds-btn--primary\">提交</button>\n```\n\n```html\n<!-- ✅ Correct -->\n<button type=\"button\" class=\"ds-btn ds-btn--primary\" disabled\n        aria-busy=\"true\">提交中…</button>\n```\n\n---\n\n### ❌ Icon-only controls without labels\n\n```html\n<!-- ❌ Wrong -->\n<button class=\"ds-icon-btn\"><svg><!-- search --></svg></button>\n```\n\n```html\n<!-- ✅ Correct -->\n<button type=\"button\" class=\"ds-icon-btn\" aria-label=\"搜索\">\n  <svg aria-hidden=\"true\"><!-- search --></svg>\n</button>\n```\n\nFile v2.8.0:references/EXAMPLES.md\n\n# EDIC Component HTML Examples\n# 高频复合组件 HTML 结构示例\n\n> This file is loaded on demand when complex component structure is needed.\n> All examples assume `styles.css` and `scripts.js` are linked.\n\n---\n\n## 1. Glass Card (`ds-glass-card`)\n\nThe glass card requires a colored background parent (`ds-glass-demo-bg`) to show the\nbackdrop-filter effect. `ds-glass-meta` lives **inside** `ds-glass-card` as the footer row.\n\n```html\n<!-- ✅ Correct: colored parent + card + inner meta -->\n<div class=\"ds-glass-demo-bg\">\n  <div class=\"ds-glass-card\">\n    <span class=\"ds-badge ds-badge--accent\">新</span>\n    <h4>橄榄园笔记</h4>\n    <p>玻璃卡片需要彩色背景父容器才能显示毛玻璃效果。</p>\n    <div class=\"ds-glass-meta\">\n      <span class=\"ds-caption ds-text-muted\">2026-06</span>\n      <button class=\"ds-btn ds-btn--ghost\">阅读全文</button>\n    </div>\n  </div>\n</div>\n\n<!-- ❌ Wrong: ds-glass-card placed directly on a plain white page —\n     backdrop-filter has nothing to blur, card looks like a plain white box -->\n```\n\nSize modifiers: add `ds-glass-card--sm` (padding 1rem) or `ds-glass-card--lg` (padding 2rem).\n\n---\n\n## 2. Docs Layout (`ds-docs`)\n\nTwo-column layout: fixed sidebar left, scrollable main right.\n`ds-docs-aside` holds `ds-pagenav`; `ds-docs-main` holds `ds-prose` content.\n\n```html\n<div class=\"ds-docs\">\n  <aside class=\"ds-docs-aside\">\n    <nav class=\"ds-pagenav\" aria-label=\"页面导航\">\n      <details class=\"ds-pagenav-disclosure\" open>\n        <summary class=\"ds-pagenav-summary\">\n          <span class=\"ds-pagenav-chevron\">▶</span> 目录\n        </summary>\n        <ol class=\"ds-pagenav-list\">\n          <li>\n            <a href=\"#section-1\" class=\"ds-pagenav-link ds-pagenav-link--active\">\n              <span class=\"ds-pagenav-num\">01</span>\n              <span class=\"ds-pagenav-text\">介绍</span>\n            </a>\n          </li>\n          <li>\n            <a href=\"#section-2\" class=\"ds-pagenav-link\">\n              <span class=\"ds-pagenav-num\">02</span>\n              <span class=\"ds-pagenav-text\">安装</span>\n            </a>\n          </li>\n        </ol>\n      </details>\n    </nav>\n  </aside>\n\n  <main class=\"ds-docs-main ds-prose\" id=\"ds-main\">\n    <section id=\"section-1\">\n      <h1>介绍</h1>\n      <p>正文内容区域，自动控制行宽在 65–75 字符。</p>\n    </section>\n    <section id=\"section-2\">\n      <h2>安装</h2>\n      <p>引入 <code>styles.css</code> 即可。</p>\n    </section>\n  </main>\n</div>\n```\n\n---\n\n## 3. Navbar (`ds-navbar`)\n\nThe navbar uses a `::before` pseudo-element for the frosted glass background —\n**do not add `background` directly on `.ds-navbar`**. JS adds `--scrolled` on scroll.\n\n```html\n<nav class=\"ds-navbar\" role=\"navigation\" aria-label=\"主导航\">\n  <div class=\"ds-navbar-inner\">\n    <!-- Brand -->\n    <a href=\"/\" class=\"ds-navbar-brand\">\n      <svg width=\"24\" height=\"24\" aria-hidden=\"true\"><!-- logo mark --></svg>\n      EDIC\n    </a>\n\n    <!-- Links (hidden on mobile; shown via mnav-panel JS) -->\n    <div class=\"ds-navbar-links\" id=\"mnav-panel\">\n      <a href=\"/\" class=\"ds-navbar-link ds-navbar-link--active\" aria-current=\"page\">首页</a>\n      <a href=\"/docs.html\" class=\"ds-navbar-link\">文档</a>\n      <a href=\"/downloads.html\" class=\"ds-navbar-link\">下载</a>\n    </div>\n\n    <!-- Actions -->\n    <div class=\"ds-navbar-actions\">\n      <a href=\"https://github.com/cgartlab/edic-design-system\"\n         class=\"ds-navbar-icon-link\" aria-label=\"GitHub 仓库\" target=\"_blank\" rel=\"noopener\">\n        <svg width=\"20\" height=\"20\" aria-hidden=\"true\"><!-- github icon --></svg>\n      </a>\n      <button class=\"ds-theme-toggle-btn\" aria-label=\"切换主题\" data-theme-mode=\"system\">\n        <svg width=\"18\" height=\"18\" aria-hidden=\"true\"><!-- theme icon --></svg>\n      </button>\n      <a href=\"/downloads.html\" class=\"ds-navbar-cta\">下载</a>\n\n      <!-- Mobile hamburger trigger -->\n      <button class=\"ds-mnav-trigger\" aria-label=\"打开菜单\" aria-expanded=\"false\"\n              aria-controls=\"mnav-panel\">\n        <span class=\"ds-mnav-trigger-bar\"></span>\n        <span class=\"ds-mnav-trigger-bar\"></span>\n        <span class=\"ds-mnav-trigger-bar\"></span>\n      </button>\n    </div>\n  </div>\n</nav>\n<!-- Mobile backdrop (injected by scripts.js, shown when menu opens) -->\n<div class=\"ds-mnav-backdrop\" aria-hidden=\"true\"></div>\n```\n\n---\n\n## 4. Toast Notifications (`ds-toast-group`)\n\nToasts are **appended to `ds-toast-group` via JS** — do not hard-code individual toasts\nin static HTML unless for preview purposes. The group lives near the bottom of `<body>`.\n\n```html\n<!-- Place once near </body> -->\n<div class=\"ds-toast-group\" role=\"status\" aria-live=\"polite\" aria-atomic=\"false\"></div>\n\n<!-- JS to trigger a toast -->\n<script>\nfunction showToast(message, type = '') {\n  const group = document.querySelector('.ds-toast-group');\n  const toast = document.createElement('div');\n  toast.className = `ds-toast${type ? ' ds-toast--' + type : ''}`;\n  toast.innerHTML = `\n    <svg class=\"ds-toast-icon\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n      <use href=\"#icon-check-circle\"></use>\n    </svg>\n    <span class=\"ds-toast-text\">${message}</span>\n    <button class=\"ds-toast-close\" aria-label=\"关闭通知\">×</button>\n  `;\n  group.prepend(toast);\n  // Auto-dismiss after 4 s\n  setTimeout(() => {\n    toast.classList.add('ds-toast-dismissing');\n    toast.addEventListener('transitionend', () => toast.remove(), { once: true });\n  }, 4000);\n  toast.querySelector('.ds-toast-close').addEventListener('click', () => {\n    toast.classList.add('ds-toast-dismissing');\n    toast.addEventListener('transitionend', () => toast.remove(), { once: true });\n  });\n}\n</script>\n\n<!-- Static preview (for docs / screenshots only) -->\n<div class=\"ds-toast-group\">\n  <div class=\"ds-toast ds-toast--success\">\n    <svg class=\"ds-toast-icon\" width=\"18\" height=\"18\" aria-hidden=\"true\"><use href=\"#icon-check-circle\"></use></svg>\n    <span class=\"ds-toast-text\">已保存成功</span>\n    <button class=\"ds-toast-close\" aria-label=\"关闭\">×</button>\n  </div>\n  <div class=\"ds-toast ds-toast--error\">\n    <svg class=\"ds-toast-icon\" width=\"18\" height=\"18\" aria-hidden=\"true\"><use href=\"#icon-alert-circle\"></use></svg>\n    <span class=\"ds-toast-text\">上传失败，请重试</span>\n    <button class=\"ds-toast-close\" aria-label=\"关闭\">×</button>\n  </div>\n</div>\n```\n\n---\n\n## 5. Accordion (`ds-accordion`)\n\nJS from `scripts.js` toggles the `open` class on `ds-accordion-item`.\n`ds-accordion-content` is `display:none` by default; `display:block` when parent has `.open`.\n\n```html\n<div class=\"ds-accordion\">\n  <!-- Item 1: open by default -->\n  <div class=\"ds-accordion-item open\">\n    <div class=\"ds-accordion-header\"\n         role=\"button\" tabindex=\"0\"\n         aria-expanded=\"true\"\n         aria-controls=\"acc-panel-1\">\n      <span>EDIC 是否需要构建工具？</span>\n      <svg class=\"ds-accordion-arrow\" width=\"18\" height=\"18\"\n           viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n           aria-hidden=\"true\">\n        <polyline points=\"6 9 12 15 18 9\"/>\n      </svg>\n    </div>\n    <div class=\"ds-accordion-content\" id=\"acc-panel-1\" aria-hidden=\"false\">\n      不需要。纯静态 CSS + JS，复制文件引入即可。\n    </div>\n  </div>\n\n  <!-- Item 2: collapsed -->\n  <div class=\"ds-accordion-item\">\n    <div class=\"ds-accordion-header\"\n         role=\"button\" tabindex=\"0\"\n         aria-expanded=\"false\"\n         aria-controls=\"acc-panel-2\">\n      <span>支持 React / Vue 吗？</span>\n      <svg class=\"ds-accordion-arrow\" width=\"18\" height=\"18\"\n           viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n           aria-hidden=\"true\">\n        <polyline points=\"6 9 12 15 18 9\"/>\n      </svg>\n    </div>\n    <div class=\"ds-accordion-content\" id=\"acc-panel-2\" aria-hidden=\"true\">\n      可以。在框架入口引入 <code>styles.css</code>，组件写法与普通 HTML 一致。\n    </div>\n  </div>\n</div>\n```\n\n---\n\n## 6. Modal (`ds-modal`)\n\nModal requires an **overlay wrapper** to provide the dimmed backdrop.\nUse `ds-overlay-layer` as the parent — it is `position:fixed`, covers the viewport,\nand already provides `display:flex` + centering. Focus trap and `Esc` handling must be added via JS.\n\n```html\n<!-- Overlay backdrop: ds-overlay-layer = position:fixed + flex centering -->\n<div class=\"ds-overlay-layer\" id=\"modal-overlay\" role=\"dialog\"\n     aria-modal=\"true\" aria-labelledby=\"modal-title\">\n\n  <div class=\"ds-modal\">\n    <div class=\"ds-modal-header\">\n      <h2 id=\"modal-title\" style=\"font-family:var(--ds-font-display);\n          font-size:var(--ds-text-h4);\">确认删除</h2>\n      <button class=\"ds-modal-close\" aria-label=\"关闭弹窗\">×</button>\n    </div>\n\n    <div class=\"ds-modal-body\">\n      删除「草稿-03」？此操作无法撤销。\n    </div>\n\n    <div class=\"ds-modal-footer\">\n      <button class=\"ds-btn ds-btn--ghost\" id=\"modal-cancel\">取消</button>\n      <button class=\"ds-btn ds-btn--primary\"\n              style=\"background:var(--ds-color-error);\n                     border-color:var(--ds-color-error);\">删除</button>\n    </div>\n  </div>\n</div>\n\n<script>\n// Minimal: close on cancel / backdrop click / Esc\nconst overlay = document.getElementById('modal-overlay');\ndocument.getElementById('modal-cancel').addEventListener('click',\n  () => overlay.style.display = 'none');\noverlay.addEventListener('click', e => { if (e.target === overlay) overlay.style.display = 'none'; });\ndocument.addEventListener('keydown', e => { if (e.key === 'Escape') overlay.style.display = 'none'; });\n</script>\n```\n\n---\n\n## 7. Tabs (`ds-tabs` + `ds-tab-content`)\n\n`ds-tab--active` on the button and `ds-tab-content--active` on the panel must be toggled\ntogether. JS from `scripts.js` handles this automatically when the markup is correct.\n\n```html\n<!-- Tab bar -->\n<div class=\"ds-tabs\" role=\"tablist\" aria-label=\"内容分类\">\n  <button class=\"ds-tab ds-tab--active\"\n          role=\"tab\" aria-selected=\"true\" aria-controls=\"tab-panel-1\" id=\"tab-1\">\n    概览\n  </button>\n  <button class=\"ds-tab\"\n          role=\"tab\" aria-selected=\"false\" aria-controls=\"tab-panel-2\" id=\"tab-2\">\n    用法\n  </button>\n  <button class=\"ds-tab\"\n          role=\"tab\" aria-selected=\"false\" aria-controls=\"tab-panel-3\" id=\"tab-3\">\n    代码\n  </button>\n</div>\n\n<!-- Tab panels (only the active one is visible) -->\n<div class=\"ds-tab-content ds-tab-content--active\"\n     id=\"tab-panel-1\" role=\"tabpanel\" aria-labelledby=\"tab-1\">\n  <p>概览内容</p>\n</div>\n<div class=\"ds-tab-content\"\n     id=\"tab-panel-2\" role=\"tabpanel\" aria-labelledby=\"tab-2\" hidden>\n  <p>用法内容</p>\n</div>\n<div class=\"ds-tab-content\"\n     id=\"tab-panel-3\" role=\"tabpanel\" aria-labelledby=\"tab-3\" hidden>\n  <pre><code class=\"language-html\">&lt;div class=\"ds-tabs\"&gt;...&lt;/div&gt;</code></pre>\n</div>\n```\n\n---\n\n## 8. Dropdown (`ds-dropdown`)\n\nDropdown requires a **`position:relative` parent wrapper** and JS to toggle visibility.\nIt is not a `<select>` — it is a styled floating panel.\n\n```html\n<!-- Wrapper provides the positioning context -->\n<div style=\"position:relative; display:inline-block;\">\n  <button class=\"ds-btn ds-btn--secondary\" id=\"dd-trigger\"\n          aria-haspopup=\"true\" aria-expanded=\"false\" aria-controls=\"dd-menu\">\n    操作\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\n         stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n      <polyline points=\"6 9 12 15 18 9\"/>\n    </svg>\n  </button>\n\n  <div class=\"ds-dropdown\" id=\"dd-menu\" role=\"menu\"\n       style=\"display:none; position:absolute; top:calc(100% + var(--ds-space-1)); right:0; z-index:var(--ds-z-dropdown);\">\n    <div class=\"ds-dropdown-item\" role=\"menuitem\">\n      <svg width=\"16\" height=\"16\" aria-hidden=\"true\"><use href=\"#icon-edit\"></use></svg>\n      编辑\n    </div>\n    <div class=\"ds-dropdown-item\" role=\"menuitem\">\n      <svg width=\"16\" height=\"16\" aria-hidden=\"true\"><use href=\"#icon-copy\"></use></svg>\n      复制链接\n    </div>\n    <div class=\"ds-dropdown-divider\" role=\"separator\"></div>\n    <div class=\"ds-dropdown-item\" role=\"menuitem\"\n         style=\"color:var(--ds-color-error);\">\n      <svg width=\"16\" height=\"16\" aria-hidden=\"true\"><use href=\"#icon-trash\"></use></svg>\n      删除\n    </div>\n  </div>\n</div>\n\n<script>\nconst trigger = document.getElementById('dd-trigger');\nconst menu = document.getElementById('dd-menu');\ntrigger.addEventListener('click', () => {\n  const open = menu.style.display !== 'none';\n  menu.style.display = open ? 'none' : 'block';\n  trigger.setAttribute('aria-expanded', String(!open));\n});\ndocument.addEventListener('click', e => {\n  if (!trigger.contains(e.target) && !menu.contains(e.target)) {\n    menu.style.display = 'none';\n    trigger.setAttribute('aria-expanded', 'false');\n  }\n});\ndocument.addEventListener('keydown', e => {\n  if (e.key === 'Escape') {\n    menu.style.display = 'none';\n    trigger.setAttribute('aria-expanded', 'false');\n    trigger.focus();\n  }\n});\n</script>\n```\n\nFile v2.8.0:references/PATTERNS.md\n\n# EDIC Page-Level Patterns\n# 页面级组合模式\n\n> Load this file when building full sections or complete pages.\n> Each pattern shows the complete HTML skeleton with correct nesting order,\n> semantic landmarks, and which tokens/components to use.\n\n---\n\n## Pattern 1 — Hero Section\n\nUse for: homepage above-the-fold, landing page opener.\nStack: eyebrow → headline → lead → actions. Background blobs are decorative.\n\n```html\n<section class=\"ds-hero-section\">\n  <!-- Decorative background blobs (aria-hidden) -->\n  <div class=\"ds-bg-blob ds-bg-blob--1\" aria-hidden=\"true\"></div>\n  <div class=\"ds-bg-blob ds-bg-blob--2\" aria-hidden=\"true\"></div>\n\n  <div class=\"ds-hero-inner ds-wrapper\">\n    <!-- Eyebrow label -->\n    <span class=\"ds-eyebrow ds-block ds-mb-4 ds-reveal\">v1.9 · 现已发布</span>\n\n    <!-- Headline: display font, tight leading, balanced wrap -->\n    <h1 class=\"ds-hero-title ds-reveal ds-text-balance\">\n      为内容而生的<br>编辑主义设计系统\n    </h1>\n\n    <!-- Lead paragraph: constrained measure, pretty wrap -->\n    <p class=\"ds-lead ds-mb-10 ds-text-pretty ds-mx-auto ds-reveal\">\n      OKLch 色彩科学 · 318 条结构化令牌 · 无运行时依赖\n    </p>\n\n    <!-- CTA row -->\n    <div class=\"ds-hero-actions ds-reveal\">\n      <a href=\"/docs.html\" class=\"ds-btn ds-btn--primary ds-btn--lg\">开始使用</a>\n      <a href=\"/downloads.html\" class=\"ds-btn ds-btn--secondary ds-btn--lg\">下载资源</a>\n    </div>\n  </div>\n</section>\n```\n\n\n---\n\n## Pattern 2 — Feature Grid Section\n\nUse for: homepage feature list, product overview, \"why choose\" sections.\n3-column grid of icon + title + description cards, stagger-revealed.\n\n```html\n<section class=\"ds-section\">\n  <div class=\"ds-wrapper\">\n    <div class=\"ds-section-head ds-section-head--center ds-reveal\">\n      <span class=\"ds-eyebrow\">核心特性</span>\n      <h2 class=\"ds-h2 ds-text-balance\">专为内容而设计</h2>\n      <p class=\"ds-lead ds-text-muted\">每一个令牌都经过精心调校。</p>\n    </div>\n\n    <div class=\"ds-feature-grid\">\n      <article class=\"ds-feature-card ds-reveal\" style=\"--d:.05s\">\n        <div class=\"ds-feature-ico\" aria-hidden=\"true\">\n          <!-- 24×24 SVG icon -->\n        </div>\n        <h3>OKLch 色彩</h3>\n        <p class=\"ds-text-muted\">感知均匀，暗色模式自适配，无需猜测。</p>\n      </article>\n\n      <article class=\"ds-feature-card ds-reveal\" style=\"--d:.1s\">\n        <div class=\"ds-feature-ico\" aria-hidden=\"true\"><!-- icon --></div>\n        <h3>无运行时依赖</h3>\n        <p class=\"ds-text-muted\">纯 CSS + JS，React、Vue 与打印可直接使用；邮件按兼容样式适配。</p>\n      </article>\n\n      <article class=\"ds-feature-card ds-reveal\" style=\"--d:.15s\">\n        <div class=\"ds-feature-ico\" aria-hidden=\"true\"><!-- icon --></div>\n        <h3>AI 就绪</h3>\n        <p class=\"ds-text-muted\">Skill 包让 AI 直接产出规范输出。</p>\n      </article>\n    </div>\n  </div>\n</section>\n```\n\n\n---\n\n## Pattern 3 — Blog / Article Card Feed\n\nUse for: blog index, news list, article collection pages.\nCards in a 2-col or 3-col grid. Each card: badge + title + excerpt + meta + CTA.\n\n```html\n<section class=\"ds-section\">\n  <div class=\"ds-wrapper\">\n    <h2 class=\"ds-h2 ds-mb-8\">最新文章</h2>\n\n    <div class=\"ds-grid-3\">\n      <article class=\"ds-card ds-card--hoverable ds-reveal\" style=\"--d:.05s\">\n        <header>\n          <span class=\"ds-badge ds-badge--accent\">设计</span>\n          <h3 class=\"ds-serif ds-mt-3\">\n            <a href=\"/blog/article.html\" class=\"ds-text-accent\">\n              OKLch 色彩科学入门\n            </a>\n          </h3>\n        </header>\n        <p class=\"ds-text-muted ds-mt-2\">\n          了解感知均匀色彩空间如何让设计决策更可靠。\n        </p>\n        <footer class=\"ds-cluster ds-mt-4\" style=\"justify-content:space-between;align-items:center;\">\n          <span class=\"ds-caption ds-text-muted\">2026-06-01</span>\n          <a href=\"/blog/article.html\" class=\"ds-btn ds-btn--ghost ds-btn--sm\">阅读全文</a>\n        </footer>\n      </article>\n\n      <!-- Repeat for additional cards -->\n    </div>\n  </div>\n</section>\n```\n\n**Token notes:**\n- Card hover lift uses `--ds-shadow-md` + `translateY(-2px)` — built into `ds-card--hoverable`.\n- Eyebrow date: `ds-caption` (0.75rem, uppercase, wide tracking).\n- Keep excerpt ≤ 3 lines; use `ds-text-pretty` to avoid orphaned words.\n\n\n---\n\n## Pattern 4 — Stats / Social Proof Bar\n\nUse for: trust section, metrics showcase, \"by the numbers\" row.\n\n```html\n<section class=\"ds-section ds-section--alt\">\n  <div class=\"ds-wrapper\">\n    <div class=\"ds-stat-grid\">\n      <div class=\"ds-stat ds-reveal\" style=\"--d:.0s\">\n        <span class=\"ds-stat-num\">318</span>\n        <span class=\"ds-stat-label\">结构化令牌</span>\n      </div>\n      <div class=\"ds-stat ds-reveal\" style=\"--d:.08s\">\n        <span class=\"ds-stat-num\">39</span>\n        <span class=\"ds-stat-label\">核心组件</span>\n      </div>\n      <div class=\"ds-stat ds-reveal\" style=\"--d:.16s\">\n        <span class=\"ds-stat-num\">209</span>\n        <span class=\"ds-stat-label\">SVG 图标</span>\n      </div>\n      <div class=\"ds-stat ds-reveal\" style=\"--d:.24s\">\n        <span class=\"ds-stat-num\">0</span>\n        <span class=\"ds-stat-label\">运行时依赖</span>\n      </div>\n    </div>\n  </div>\n</section>\n```\n\n**Token notes:**\n- `ds-section--alt` uses `--ds-color-surface` background to create visual rhythm.\n- `ds-stat-num` uses display font, `--ds-text-display` (3.75rem), olive accent color.\n- Stagger delay `--d` increments ≈ 0.08s per item.\n\n\n---\n\n## Pattern 5 — Contact / Lead-Capture Form\n\nUse for: contact page, newsletter signup, request demo.\n\n```html\n<section class=\"ds-section\">\n  <div class=\"ds-wrapper\">\n    <div class=\"ds-grid-2 ds-items-center ds-gap-16\">\n\n      <!-- Left: copy -->\n      <div class=\"ds-reveal\">\n        <span class=\"ds-eyebrow\">联系我们</span>\n        <h2 class=\"ds-h2 ds-mt-2\">让我们来聊聊</h2>\n        <p class=\"ds-lead ds-text-muted ds-mt-3\">\n          无论是合作还是咨询，我们都很乐意回复。\n        </p>\n      </div>\n\n      <!-- Right: form -->\n      <form class=\"ds-stack ds-reveal\" style=\"--d:.1s\" novalidate>\n        <div class=\"ds-form-group\">\n          <label class=\"ds-form-label\" for=\"name\">\n            姓名 <span class=\"ds-form-required\" aria-hidden=\"true\">*</span>\n          </label>\n          <input class=\"ds-form-input\" id=\"name\" name=\"name\"\n                 type=\"text\" autocomplete=\"name\" required>\n        </div>\n\n        <div class=\"ds-form-group\">\n          <label class=\"ds-form-label\" for=\"email\">\n            邮箱 <span class=\"ds-form-required\" aria-hidden=\"true\">*</span>\n          </label>\n          <input class=\"ds-form-input\" id=\"email\" name=\"email\"\n                 type=\"email\" autocomplete=\"email\" required>\n        </div>\n\n        <div class=\"ds-form-group\">\n          <label class=\"ds-form-label\" for=\"message\">留言</label>\n          <textarea class=\"ds-form-textarea\" id=\"message\" name=\"message\"\n                    rows=\"4\"></textarea>\n        </div>\n\n        <button class=\"ds-form-submit ds-btn ds-btn--primary\" type=\"submit\">\n          发送消息\n        </button>\n      </form>\n\n    </div>\n  </div>\n</section>\n```\n\n\n---\n\n## Pattern 6 — Article / Long-Form Prose\n\nUse for: blog post body, documentation page, essay, tutorial.\n\n```html\n<article class=\"ds-wrapper ds-prose\" id=\"ds-main\">\n  <!-- Article header -->\n  <header class=\"ds-mb-10\">\n    <span class=\"ds-eyebrow\">设计系统</span>\n    <h1 class=\"ds-h1 ds-mt-3 ds-text-balance\">理解 OKLch 色彩空间</h1>\n    <p class=\"ds-lead ds-text-muted ds-mt-4\">\n      一篇关于感知均匀色彩的深度指南。\n    </p>\n    <div class=\"ds-cluster ds-mt-6\" style=\"gap:var(--ds-space-4)\">\n      <span class=\"ds-caption ds-text-muted\">2026-06-01</span>\n      <span class=\"ds-badge ds-badge--default\">10 分钟阅读</span>\n    </div>\n  </header>\n\n  <!-- Body: ds-prose handles paragraph, heading, list, code spacing -->\n  <p>正文段落。<code>ds-prose</code> 自动控制行宽（65–75 字符），\n  调整 h2/h3 间距，处理 CJK 标点。</p>\n\n  <h2>第一节标题</h2>\n  <p>段落内容……</p>\n\n  <blockquote class=\"ds-quote-cjk\">\n    <p>引用内容，使用 CJK 引用样式。</p>\n  </blockquote>\n\n  <pre><code class=\"ds-code language-css\">\n.example { color: var(--ds-accent); }\n  </code></pre>\n\n  <!-- Article footer -->\n  <footer class=\"ds-mt-16 ds-pt-8\" style=\"border-top:1px solid var(--ds-color-border)\">\n    <a href=\"/blog.html\" class=\"ds-btn ds-btn--ghost\">← 返回博客</a>\n  </footer>\n</article>\n```\n\n**Token notes:**\n- `ds-prose` must wrap the entire article body. Do **not** nest `ds-wrapper` inside `ds-prose`.\n- Heading order: one `h1` per article, then `h2` → `h3`. Never skip levels.\n- `ds-text-indent` adds first-line indent for CJK paragraphs.\n\n\n---\n\n## Pattern 7 — Pricing / Comparison Table\n\nUse for: pricing tiers, feature comparison, plan selection.\n\n```html\n<section class=\"ds-section\">\n  <div class=\"ds-wrapper\">\n    <div class=\"ds-section-head ds-section-head--center ds-mb-10\">\n      <h2 class=\"ds-h2\">选择方案</h2>\n    </div>\n\n    <div class=\"ds-grid-3\">\n      <!-- Free tier -->\n      <div class=\"ds-card ds-reveal\" style=\"--d:.0s\">\n        <span class=\"ds-eyebrow\">免费</span>\n        <div class=\"ds-mt-3\">\n          <span class=\"ds-display\" style=\"font-size:var(--ds-text-h1)\">¥0</span>\n          <span class=\"ds-text-muted\">/月</span>\n        </div>\n        <ul class=\"ds-stack ds-mt-4\" style=\"list-style:none;padding:0;--stack-gap:var(--ds-space-3)\">\n          <li class=\"ds-text-muted\">✓ 核心组件</li>\n          <li class=\"ds-text-muted\">✓ 基础令牌</li>\n          <li class=\"ds-text-muted\" style=\"opacity:.4\">✗ 优先支持</li>\n        </ul>\n        <a href=\"#\" class=\"ds-btn ds-btn--secondary ds-mt-6\" style=\"width:100%;justify-content:center\">\n          立即开始\n        </a>\n      </div>\n\n      <!-- Pro tier (highlighted) -->\n      <div class=\"ds-card ds-reveal\"\n           style=\"--d:.08s; border-color:var(--ds-accent); box-shadow:var(--ds-shadow-lg)\">\n        <div class=\"ds-cluster\" style=\"justify-content:space-between\">\n          <span class=\"ds-eyebrow\">专业版</span>\n          <span class=\"ds-badge ds-badge--accent\">推荐</span>\n        </div>\n        <div class=\"ds-mt-3\">\n          <span class=\"ds-display\" style=\"font-size:var(--ds-text-h1)\">¥99</span>\n          <span class=\"ds-text-muted\">/月</span>\n        </div>\n        <ul class=\"ds-stack ds-mt-4\" style=\"list-style:none;padding:0;--stack-gap:var(--ds-space-3)\">\n          <li>✓ 核心组件家族</li>\n          <li>✓ 设计文件</li>\n          <li>✓ 优先支持</li>\n        </ul>\n        <a href=\"#\" class=\"ds-btn ds-btn--primary ds-mt-6\" style=\"width:100%;justify-content:center\">\n          升级专业版\n        </a>\n      </div>\n\n      <!-- Enterprise tier -->\n      <div class=\"ds-card ds-reveal\" style=\"--d:.16s\">\n        <span class=\"ds-eyebrow\">企业版</span>\n        <div class=\"ds-mt-3\">\n          <span class=\"ds-h2\">联系我们</span>\n        </div>\n        <ul class=\"ds-stack ds-mt-4\" style=\"list-style:none;padding:0;--stack-gap:var(--ds-space-3)\">\n          <li>✓ 定制开发</li>\n          <li>✓ 私有部署</li>\n          <li>✓ 专属支持</li>\n        </ul>\n        <a href=\"#contact\" class=\"ds-btn ds-btn--ghost ds-mt-6\" style=\"width:100%;justify-content:center\">\n          联系销售\n        </a>\n      </div>\n    </div>\n  </div>\n</section>\n```\n\n\n---\n\n## Pattern 8 — Timeline / History Section\n\nUse for: company history, product roadmap, personal career timeline, changelog.\n\n```html\n<section class=\"ds-section\">\n  <div class=\"ds-wrapper\">\n    <h2 class=\"ds-h2 ds-mb-10\">发展历程</h2>\n\n    <div class=\"ds-timeline\">\n      <div class=\"ds-timeline-item ds-reveal\" style=\"--d:.0s\">\n        <div class=\"ds-timeline-dot\" aria-hidden=\"true\"></div>\n        <div class=\"ds-timeline-content\">\n          <time class=\"ds-timeline-date ds-caption\">2024 · Q1</time>\n          <h3 class=\"ds-timeline-title\">项目启动</h3>\n          <p class=\"ds-text-muted\">确立 OKLch 色彩体系与令牌架构。</p>\n          <span class=\"ds-timeline-tag ds-badge ds-badge--default\">里程碑</span>\n        </div>\n      </div>\n\n      <div class=\"ds-timeline-item ds-reveal\" style=\"--d:.1s\">\n        <div class=\"ds-timeline-dot\" aria-hidden=\"true\"></div>\n        <div class=\"ds-timeline-content\">\n          <time class=\"ds-timeline-date ds-caption\">2024 · Q3</time>\n          <h3 class=\"ds-timeline-title\">v1.0 发布</h3>\n          <p class=\"ds-text-muted\">44 个核心组件家族，暗色令牌覆盖。</p>\n          <span class=\"ds-timeline-tag ds-badge ds-badge--accent\">发布</span>\n        </div>\n      </div>\n\n      <div class=\"ds-timeline-item ds-reveal\" style=\"--d:.2s\">\n        <div class=\"ds-timeline-dot\" aria-hidden=\"true\"></div>\n        <div class=\"ds-timeline-content\">\n          <time class=\"ds-timeline-date ds-caption\">2026 · 现在</time>\n          <h3 class=\"ds-timeline-title\">AI Skill 集成</h3>\n          <p class=\"ds-text-muted\">Claude Code Skill 包，让 AI 原生理解设计规范。</p>\n          <span class=\"ds-timeline-tag ds-badge ds-badge--success\">进行中</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n```\n\n\n---\n\n## Pattern 9 — Dashboard / Data Panel\n\nUse for: admin panel summary, analytics overview, monitoring dashboard.\n\n```html\n<div class=\"ds-wrapper\">\n  <!-- Top stat row -->\n  <div class=\"ds-grid-4 ds-mb-8\">\n    <div class=\"ds-card\">\n      <span class=\"ds-caption ds-text-muted\">总用户</span>\n      <div class=\"ds-h2 ds-mt-2\" style=\"color:var(--ds-accent)\">12,480</div>\n      <span class=\"ds-caption\" style=\"color:var(--ds-color-success)\">↑ 8.2% 本月</span>\n    </div>\n    <div class=\"ds-card\">\n      <span class=\"ds-caption ds-text-muted\">活跃项目</span>\n      <div class=\"ds-h2 ds-mt-2\">342</div>\n      <span class=\"ds-caption ds-text-muted\">较上月持平</span>\n    </div>\n    <div class=\"ds-card\">\n      <span class=\"ds-caption ds-text-muted\">待处理</span>\n      <div class=\"ds-h2 ds-mt-2\" style=\"color:var(--ds-color-warning)\">17</div>\n      <span class=\"ds-badge ds-badge--warning ds-mt-2\">需关注</span>\n    </div>\n    <div class=\"ds-card\">\n      <span class=\"ds-caption ds-text-muted\">完成率</span>\n      <div class=\"ds-h2 ds-mt-2\">94%</div>\n      <div class=\"ds-progress ds-mt-3\">\n        <div class=\"ds-progress-bar\">\n          <div class=\"ds-progress-fill\" style=\"width:94%\"\n               role=\"progressbar\" aria-valuenow=\"94\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Main content + sidebar -->\n  <div class=\"ds-grid-2 ds-gap-16\" style=\"grid-template-columns:1fr 320px\">\n    <!-- Main table panel -->\n    <div class=\"ds-card\">\n      <div class=\"ds-cluster ds-mb-4\" style=\"justify-content:space-between\">\n        <h2 class=\"ds-h4\">最近活动</h2>\n        <button class=\"ds-btn ds-btn--ghost ds-btn--sm\">查看全部</button>\n      </div>\n      <div class=\"ds-table-wrap\">\n        <table class=\"ds-table\">\n          <thead>\n            <tr><th>项目</th><th>状态</th><th>更新时间</th></tr>\n          </thead>\n          <tbody>\n            <tr>\n              <td>EDIC v2.0</td>\n              <td><span class=\"ds-badge ds-badge--success\">进行中</span></td>\n              <td class=\"ds-text-muted ds-caption\">2 小时前</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n\n    <!-- Sidebar alerts -->\n    <div class=\"ds-stack\">\n      <div class=\"ds-alert ds-alert--info\">\n        <span class=\"ds-alert-title\">系统更新</span>\n        <p>定时维护将于今晚 22:00 进行。</p>\n      </div>\n      <div class=\"ds-alert ds-alert--warning\">\n        <span class=\"ds-alert-title\">令牌即将过期</span>\n        <p>API 密钥将在 3 天后失效。</p>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n\n---\n\n## Pattern 10 — HTML Email Body\n\nUse for: transactional email, newsletter, notification email.\n**Rules:** no `backdrop-filter`, no CSS variables (email clients strip them),\nuse inline styles with OKLch equivalents as sRGB fallbacks.\n\n```html\n<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>邮件标题</title>\n</head>\n<body style=\"margin:0;padding:0;background:#f7f5f0;font-family:'Noto Sans SC',-apple-system,sans-serif;\">\n\n  <!-- Outer wrapper -->\n  <table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n    <tr>\n      <td align=\"center\" style=\"padding:32px 16px;\">\n\n        <!-- Email card -->\n        <table width=\"600\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\"\n               style=\"max-width:600px;width:100%;background:#fff;border-radius:8px;\n                      box-shadow:0 4px 24px rgba(0,0,0,.06);\">\n\n          <!-- Header -->\n          <tr>\n            <td style=\"padding:32px 40px 24px;border-bottom:1px solid #e6e2d9;\">\n              <span style=\"font-family:Georgia,serif;font-size:20px;font-weight:700;\n                           color:#1a1814;letter-spacing:.04em;\">EDIC</span>\n            </td>\n          </tr>\n\n          <!-- Body -->\n          <tr>\n            <td style=\"padding:32px 40px;\">\n              <h1 style=\"font-family:Georgia,serif;font-size:28px;font-weight:700;\n                         color:#1a1814;line-height:1.2;margin:0 0 16px;\">\n                邮件主标题\n              </h1>\n              <p style=\"font-size:16px;line-height:1.6;color:#4a453d;margin:0 0 24px;\">\n                正文内容。保持简洁，一个核心信息。\n              </p>\n\n              <!-- CTA button -->\n              <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n                <tr>\n                  <td style=\"border-radius:4px;background:#5a6e2a;\">\n                    <a href=\"#\" style=\"display:inline-block;padding:12px 24px;\n                                      font-size:14px;font-weight:600;color:#fff;\n                                      text-decoration:none;letter-spacing:.02em;\">\n                      立即查看\n                    </a>\n                  </td>\n                </tr>\n              </table>\n            </td>\n          </tr>\n\n          <!-- Footer -->\n          <tr>\n            <td style=\"padding:24px 40px;border-top:1px solid #e6e2d9;\">\n              <p style=\"font-size:12px;color:#8c8077;margin:0;line-height:1.5;\">\n                © 2026 EDIC Design System · CC BY 4.0\n              </p>\n            </td>\n          </tr>\n\n        </table>\n      </td>\n    </tr>\n  </table>\n</body>\n</html>\n```\n\n**Email-specific rules:**\n- Use `sRGB` hex/rgba, NOT `var(--ds-*)` or `oklch()` — email clients don't support either.\n- Inline all styles. No external stylesheets.\n- Table-based layout for maximum client compatibility.\n- Test in Gmail, Outlook, Apple Mail before sending.\n- Olive accent `#5a6e2a` ≈ sRGB equivalent of `oklch(52% 0.08 115)`.\n\nFile v2.8.0:references/RECIPES.md\n\n# EDIC Scene Recipes\n# 场景配方：从零搭建完整页面\n\n> Load this file when the user asks to build a complete page or layout from scratch.\n> Each recipe lists the exact sequence of sections, which Pattern to use for each,\n> and the key decisions to make before writing any code.\n\n---\n\n## Recipe 1 — Documentation / Technical Guide Page\n\n**Target:** `docs.html` style — sidebar nav + scrollable prose content.\n**Live reference:** https://edic.cgartlab.com/docs.html\n\n### Step 1 — Shell (Navbar + two-column docs layout)\n\n```html\n<!doctype html>\n<html lang=\"zh-CN\" data-theme=\"\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>文档标题 — EDIC</title>\n  <link rel=\"stylesheet\" href=\"styles.css\">\n  <link rel=\"icon\" href=\"favicon.svg\" type=\"image/svg+xml\">\n</head>\n<body>\n  <a href=\"#ds-main\" class=\"ds-skip\">跳到主内容</a>\n\n  <!-- Navbar (see EXAMPLES.md #3 for full structure) -->\n  <nav class=\"ds-navbar\" role=\"navigation\" aria-label=\"主导航\">\n    <div class=\"ds-navbar-inner\">\n      <a href=\"/\" class=\"ds-navbar-brand\">EDIC</a>\n      <div class=\"ds-navbar-links\" id=\"mnav-panel\">\n        <a href=\"docs.html\" class=\"ds-navbar-link ds-navbar-link--active\" aria-current=\"page\">文档</a>\n      </div>\n      <div class=\"ds-navbar-actions\">\n        <button class=\"ds-theme-toggle-btn\" aria-label=\"切换主题\"></button>\n      </div>\n    </div>\n  </nav>\n\n  <!-- Docs shell (see EXAMPLES.md #2) -->\n  <div class=\"ds-docs\">\n    <aside class=\"ds-docs-aside\">\n      <!-- Sidebar nav goes here (Step 2) -->\n    </aside>\n    <main class=\"ds-docs-main ds-prose\" id=\"ds-main\">\n      <!-- Article content goes here (Step 3) -->\n    </main>\n  </div>\n\n  <script src=\"scripts.js\"></script>\n</body>\n</html>\n```\n\n### Step 2 — Sidebar (`ds-pagenav`)\n\n```html\n<nav class=\"ds-pagenav\" aria-label=\"章节导航\">\n  <details class=\"ds-pagenav-disclosure\" open>\n    <summary class=\"ds-pagenav-summary\">\n      <span class=\"ds-pagenav-chevron\">▶</span> 快速开始\n    </summary>\n    <ol class=\"ds-pagenav-list\">\n      <li>\n        <a href=\"#install\" class=\"ds-pagenav-link ds-pagenav-link--active\">\n          <span class=\"ds-pagenav-num\">01</span>\n          <span class=\"ds-pagenav-text\">安装</span>\n        </a>\n      </li>\n      <li>\n        <a href=\"#tokens\" class=\"ds-pagenav-link\">\n          <span class=\"ds-pagenav-num\">02</span>\n          <span class=\"ds-pagenav-text\">设计令牌</span>\n        </a>\n      </li>\n    </ol>\n  </details>\n  <details class=\"ds-pagenav-disclosure\">\n    <summary class=\"ds-pagenav-summary\">\n      <span class=\"ds-pagenav-chevron\">▶</span> 组件\n    </summary>\n    <ol class=\"ds-pagenav-list\">\n      <li>\n        <a href=\"#buttons\" class=\"ds-pagenav-link\">\n          <span class=\"ds-pagenav-num\">01</span>\n          <span class=\"ds-pagenav-text\">按钮</span>\n        </a>\n      </li>\n    </ol>\n  </details>\n</nav>\n```\n\n### Step 3 — Article body (`ds-prose`)\n\nUse **Pattern 6** (Article / Long-Form Prose) from `PATTERNS.md`.\nKey rules:\n- One `<h1>` at the top of the page. Use `<h2>` for sections, `<h3>` for sub-sections.\n- Wrap code samples in `<div class=\"ds-code\"><div class=\"ds-code-bar\">...</div><pre><code>...</code></pre></div>`.\n- Use `<div class=\"ds-alert ds-alert--info\">` for callout boxes.\n\n---\n\n\n## Recipe 2 — Company / Brand Landing Page\n\n**Target:** `company.html` style — hero → features → stats → CTA → footer.\n**Live reference:** https://edic.cgartlab.com/company.html\n\n### Section order\n\n```\n<Navbar>\n<Hero>           ← Pattern 1\n<Feature Grid>   ← Pattern 2\n<Stats Bar>      ← Pattern 4\n<CTA Section>    ← see below\n<Footer>         ← ds-footer-rich\n```\n\n### CTA Section\n\n```html\n<section class=\"ds-section ds-section--alt\">\n  <div class=\"ds-wrapper\" style=\"text-align:center\">\n    <h2 class=\"ds-cta-h2 ds-mb-5 ds-text-balance\">准备好开始了吗？</h2>\n    <p class=\"ds-lead ds-text-muted ds-mb-8\">\n      免费使用，CC BY 4.0 许可。\n    </p>\n    <div class=\"ds-cta-actions ds-mb-0\">\n      <a href=\"/downloads.html\" class=\"ds-btn ds-btn--primary ds-btn--lg\">立即下载</a>\n      <a href=\"/docs.html\" class=\"ds-btn ds-btn--secondary ds-btn--lg\">查看文档</a>\n    </div>\n  </div>\n</section>\n```\n\n### Footer (`ds-footer-rich`)\n\n```html\n<footer class=\"ds-footer-rich\">\n  <div class=\"ds-wrapper\">\n    <div class=\"ds-footer-cols\">\n      <div class=\"ds-footer-brand\">\n        <span class=\"ds-logo\">EDIC</span>\n        <p class=\"ds-caption ds-text-muted ds-mt-3\">\n          为内容而生的编辑主义设计系统。\n        </p>\n      </div>\n      <div>\n        <h3 class=\"ds-footer-col-heading\">资源</h3>\n        <ul class=\"ds-footer-links\">\n          <li><a href=\"/docs.html\">文档</a></li>\n          <li><a href=\"/downloads.html\">下载</a></li>\n        </ul>\n      </div>\n      <div>\n        <h3 class=\"ds-footer-col-heading\">社区</h3>\n        <ul class=\"ds-footer-links\">\n          <li><a href=\"https://github.com/cgartlab/edic-design-system\" target=\"_blank\" rel=\"noopener\">GitHub</a></li>\n        </ul>\n      </div>\n    </div>\n    <div class=\"ds-footer-bottom\">\n      <span class=\"ds-caption ds-text-muted\">© 2026 EDIC · CC BY 4.0</span>\n    </div>\n  </div>\n</footer>\n```\n\n### Key decisions\n- Keep hero headline ≤ 12 Chinese characters per line; use `ds-text-balance`.\n- Section alternation: `ds-section` (paper bg) → `ds-section--alt` (surface bg) → repeat.\n- All section-level animations use `ds-reveal` with staggered `--d` values.\n\n---\n\n\n## Recipe 3 — Blog / Article Page\n\n**Target:** `blog.html` style — navbar + article header + TOC + prose body + footer.\n**Live reference:** https://edic.cgartlab.com/blog.html\n\n### Section order\n\n```\n<Navbar>\n<Article header>   ← eyebrow + h1 + lead + meta\n<TOC (optional)>   ← ds-toc-article (sticky, desktop only)\n<Article body>     ← Pattern 6 (ds-prose)\n<Related posts>    ← 2-col ds-grid-2 of ds-card--hoverable\n<Footer>\n```\n\n### Article header\n\n```html\n<header class=\"ds-wrapper ds-mb-10\">\n  <span class=\"ds-eyebrow ds-block ds-mb-4\">设计系统</span>\n  <h1 class=\"ds-h1 ds-text-balance\">文章标题，建议不超过 20 字</h1>\n  <p class=\"ds-lead ds-text-muted ds-mt-4 ds-text-pretty\">\n    副标题或摘要，一两句话点明文章核心观点。\n  </p>\n  <div class=\"ds-cluster ds-mt-6\" style=\"gap:var(--ds-space-4); align-items:center\">\n    <div class=\"ds-avatar ds-avatar--sm\" aria-hidden=\"true\">作</div>\n    <div>\n      <span class=\"ds-meta\">作者名</span>\n      <time class=\"ds-caption ds-text-muted ds-block\">2026-06-26</time>\n    </div>\n    <span class=\"ds-badge ds-badge--default\">8 分钟阅读</span>\n  </div>\n</header>\n```\n\n### TOC (desktop, sticky aside)\n\n```html\n<!-- Wrap article + TOC in a grid -->\n<div class=\"ds-wrapper\" style=\"display:grid; grid-template-columns:1fr 240px; gap:var(--ds-space-16); align-items:start;\">\n  <article class=\"ds-prose\" id=\"ds-main\">\n    <!-- Pattern 6 content here -->\n  </article>\n\n  <aside style=\"position:sticky; top:calc(var(--ds-space-16) + var(--ds-space-8))\">\n    <nav class=\"ds-toc-article\" aria-label=\"本文目录\">\n      <span class=\"ds-toc-article-title ds-caption\">本文目录</span>\n      <ol class=\"ds-toc-list\">\n        <li><a href=\"#section-1\" class=\"ds-toc-link ds-toc-link--active\">第一节</a></li>\n        <li><a href=\"#section-2\" class=\"ds-toc-link\">第二节</a></li>\n        <li><a href=\"#section-3\" class=\"ds-toc-link ds-toc-link--h3\">2.1 子节</a></li>\n      </ol>\n    </nav>\n  </aside>\n</div>\n```\n\n### Key decisions\n- TOC is hidden on mobile via `ds-toc-article` responsive rules. No manual media query needed.\n- Article `<h2>` and `<h3>` must have `id` attributes for TOC anchor links to work.\n- Use `ds-text-indent` class on `<p>` elements inside `ds-prose` for CJK first-line indent.\n\n---\n\n\n## Recipe 4 — Printable Résumé / CV (A4)\n\n**Target:** `resume.html` style — single-page A4, print-ready, timeline + skills.\n**Live reference:** https://edic.cgartlab.com/resume.html\n\n### Section order\n\n```\n<Header>     ← name + title + contact info\n<Summary>    ← ds-lead paragraph\n<Experience> ← ds-timeline\n<Skills>     ← ds-grid-2 with ds-badge clusters\n<Education>  ← compact ds-timeline\n```\n\n### Full skeleton\n\n```html\n<!doctype html>\n<html lang=\"zh-CN\" data-theme=\"\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>张三 — 简历</title>\n  <link rel=\"stylesheet\" href=\"styles.css\">\n  <style>\n    @media print {\n      .ds-navbar, .ds-theme-toggle-btn { display: none !important; }\n      body { background: white; }\n      @page { size: A4; margin: 20mm; }\n    }\n  </style>\n</head>\n<body>\n  <main class=\"ds-wrapper ds-prose\" id=\"ds-main\"\n        style=\"max-width:800px; padding-top:var(--ds-space-12)\">\n\n    <!-- Header -->\n    <header style=\"border-bottom:2px solid var(--ds-accent); padding-bottom:var(--ds-space-6); margin-bottom:var(--ds-space-8)\">\n      <h1 class=\"ds-h1\" style=\"margin:0\">张三</h1>\n      <p class=\"ds-lead ds-text-muted ds-mt-2\">高级前端工程师 · 设计系统专家</p>\n      <div class=\"ds-cluster ds-mt-4\" style=\"gap:var(--ds-space-6)\">\n        <span class=\"ds-caption\">zhang@example.com</span>\n        <span class=\"ds-caption\">+86 138 0000 0000</span>\n        <a href=\"https://github.com/zhangsan\" class=\"ds-caption ds-text-accent\">github.com/zhangsan</a>\n      </div>\n    </header>\n\n    <!-- Summary -->\n    <section class=\"ds-mb-8\">\n      <h2 class=\"ds-h4 ds-text-accent\" style=\"text-transform:uppercase; letter-spacing:var(--ds-tracking-wider)\">简介</h2>\n      <p class=\"ds-mt-2\">5 年前端开发经验，专注设计系统与组件库建设……</p>\n    </section>\n\n    <!-- Experience (ds-timeline) -->\n    <section class=\"ds-mb-8\">\n      <h2 class=\"ds-h4 ds-text-accent\" style=\"text-transform:uppercase; letter-spacing:var(--ds-tracking-wider)\">工作经历</h2>\n      <div class=\"ds-timeline ds-mt-4\">\n        <div class=\"ds-timeline-item\">\n          <div class=\"ds-timeline-dot\" aria-hidden=\"true\"></div>\n          <div class=\"ds-timeline-content\">\n            <time class=\"ds-timeline-date ds-caption\">2023 — 至今</time>\n            <h3 class=\"ds-timeline-title\">高级前端工程师</h3>\n            <p class=\"ds-text-muted ds-caption\">某科技公司 · 上海</p>\n            <ul class=\"ds-mt-2\" style=\"padding-left:var(--ds-space-5)\">\n              <li>主导设计系统从零到一的建设……</li>\n              <li>将组件复用率提升至 80%……</li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <!-- Skills -->\n    <section class=\"ds-mb-8\">\n      <h2 class=\"ds-h4 ds-text-accent\" style=\"text-transform:uppercase; letter-spacing:var(--ds-tracking-wider)\">技能</h2>\n      <div class=\"ds-grid-2 ds-mt-4\" style=\"gap:var(--ds-space-4)\">\n        <div>\n          <span class=\"ds-caption ds-text-muted ds-block ds-mb-2\">前端</span>\n          <div class=\"ds-cluster\" style=\"flex-wrap:wrap; gap:var(--ds-space-2)\">\n            <span class=\"ds-badge ds-badge--default\">React</span>\n            <span class=\"ds-badge ds-badge--default\">TypeScript</span>\n            <span class=\"ds-badge ds-badge--default\">CSS / OKLch</span>\n          </div>\n        </div>\n        <div>\n          <span class=\"ds-caption ds-text-muted ds-block ds-mb-2\">工具</span>\n          <div class=\"ds-cluster\" style=\"flex-wrap:wrap; gap:var(--ds-space-2)\">\n            <span class=\"ds-badge ds-badge--default\">Figma</span>\n            <span class=\"ds-badge ds-badge--default\">Git</span>\n          </div>\n        </div>\n      </div>\n    </section>\n\n  </main>\n  <script src=\"scripts.js\"></script>\n</body>\n</html>\n```\n\n### Key decisions\n- `@page { size: A4; margin: 20mm; }` is essential for correct print output.\n- Hide navbar and theme toggle in print CSS.\n- Use `ds-timeline` for both experience and education — consistent visual rhythm.\n- Section headings use `ds-text-accent` + `letter-spacing` to create subtle editorial dividers.\n\n---\n\n\n## Recipe 5 — Multi-Page Report / White Paper\n\n**Target:** `report.html` style — paginated long-form document with sidebar navigation.\n**Live reference:** https://edic.cgartlab.com/report.html\n\n### Section order\n\n```\n<Navbar>\n<Report cover>    ← full-width ds-cover with title + subtitle + date\n<ds-docs shell>   ← sidebar (chapter list) + main content\n  <Chapter 1>     ← h1 + ds-prose content\n  <Chapter 2>\n  ...\n<Back to top>\n```\n\n### Cover page\n\n```html\n<section class=\"ds-cover\" style=\"min-height:60vh; display:flex; flex-direction:column;\n                                   justify-content:center; align-items:flex-start;\n                                   padding:var(--ds-space-20) var(--ds-space-8)\">\n  <span class=\"ds-eyebrow ds-block ds-mb-4\">年度报告 · 2026</span>\n  <h1 style=\"font-family:var(--ds-font-display); font-size:var(--ds-text-display);\n              font-weight:700; line-height:var(--ds-leading-tight);\n              color:var(--ds-color-fg-strong); max-width:16ch\">\n    EDIC 设计系统<br>年度总结\n  </h1>\n  <p class=\"ds-lead ds-text-muted ds-mt-6\" style=\"max-width:50ch\">\n    回顾 2026 年的核心进展、数据指标与未来展望。\n  </p>\n  <div class=\"ds-cluster ds-mt-8\" style=\"gap:var(--ds-space-6)\">\n    <time class=\"ds-caption ds-text-muted\">发布日期：2026-06-26</time>\n    <span class=\"ds-caption ds-text-muted\">作者：EDIC 团队</span>\n  </div>\n</section>\n```\n\n### Chapter structure inside `ds-docs-main`\n\n```html\n<main class=\"ds-docs-main ds-prose\" id=\"ds-main\">\n  <!-- Chapter 1 -->\n  <section id=\"ch-1\">\n    <h1>第一章：项目概览</h1>\n    <p>章节正文……</p>\n\n    <!-- Data table -->\n    <div class=\"ds-table-wrap\">\n      <table class=\"ds-table\">\n        <caption class=\"ds-caption ds-text-muted\">表 1 · 版本发布统计</caption>\n        <thead>\n          <tr><th>版本</th><th>发布日期</th><th>组件数</th></tr>\n        </thead>\n        <tbody>\n          <tr><td>v1.9</td><td>2026-06</td><td>25</td></tr>\n        </tbody>\n      </table>\n    </div>\n\n    <!-- Highlight box -->\n    <div class=\"ds-alert ds-alert--info ds-mt-6\">\n      <span class=\"ds-alert-title\">关键发现</span>\n      <p>AI 驱动的 Skill 集成使开发效率提升了 40%。</p>\n    </div>\n  </section>\n\n  <!-- Chapter 2 -->\n  <section id=\"ch-2\" class=\"ds-mt-16\">\n    <h1>第二章：数据与指标</h1>\n    <!-- Use Pattern 9 (Dashboard) for data visualizations -->\n  </section>\n</main>\n```\n\n### Key decisions\n- Each chapter gets its own `<section id=\"ch-N\">` for sidebar anchor linking.\n- `ds-pagenav` sidebar chapter list: use `ds-pagenav-num` to show chapter numbers.\n- For printed reports, add `@media print` CSS to force page breaks between chapters:\n  `section { page-break-before: always; }`.\n- Tables must use `ds-table-wrap` for horizontal scroll on narrow screens.\n\n---\n\n\n---\n\n## Quick Decision Guide\n\nWhen the user describes a goal, use this table to pick the right recipe:\n\n| User says… | Use recipe | Key patterns |\n|------------|-----------|--------------|\n| \"帮我做一个官网 / 落地页\" | Recipe 2 | Hero + Feature Grid + Stats + CTA + Footer |\n| \"帮我做一个博客 / 文章页\" | Recipe 3 | Article Header + TOC + Prose (Pattern 6) |\n| \"帮我做一个文档站 / 技术指南\" | Recipe 1 | Docs shell + Sidebar nav + Prose |\n| \"帮我做一个简历 / 个人主页\" | Recipe 4 | Header + Timeline + Skills grid |\n| \"帮我做一个报告 / 白皮书\" | Recipe 5 | Cover + Docs shell + Tables + Alerts |\n| \"帮我做一个价格页 / 定价表\" | Pattern 7 | Pricing Table (standalone) |\n| \"帮我做一个联系表单 / 注册页\" | Pattern 5 | Contact Form (standalone) |\n| \"帮我做一个邮件模板\" | Pattern 10 | HTML Email (inline styles only) |\n| \"帮我做一个仪表板 / 后台\" | Pattern 9 | Dashboard (standalone) |\n\n> If the request spans multiple pages, build each page using its recipe, then link them with a shared `ds-navbar` and `ds-footer-rich`.\n\nFile v2.8.0:references/TOKENS.md\n\n# EDIC Complete Token Reference\n# 完整令牌实际值速查\n\n> Loaded on demand when spacing, radius, shadow, or motion token values are needed.\n> Ground truth is `styles.css`. This reference is a compact quick index; always verify exact values against `styles.css` and `tokens.json` before release.\n\n---\n\n## Spacing (`--ds-space-*`)\n\n4px base ratio. Use these instead of hard-coded pixel or rem values.\n\n| Token | rem | px equivalent |\n|-------|-----|---------------|\n| `--ds-space-0` | 0 | 0 |\n| `--ds-space-0-25` | 0.0625rem | 1px |\n| `--ds-space-0-5` | 0.125rem | 2px |\n| `--ds-space-0-75` | 0.1875rem | 3px |\n| `--ds-space-1` | 0.25rem | **4px** |\n| `--ds-space-2` | 0.5rem | **8px** |\n| `--ds-space-3` | 0.75rem | **12px** |\n| `--ds-space-4` | 1rem | **16px** |\n| `--ds-space-5` | 1.25rem | 20px |\n| `--ds-space-6` | 1.5rem | **24px** |\n| `--ds-space-7` | 1.75rem | 28px |\n| `--ds-space-8` | 2rem | **32px** |\n| `--ds-space-9` | 2.25rem | 36px |\n| `--ds-space-10` | 2.5rem | 40px |\n| `--ds-space-12` | 3rem | 48px |\n| `--ds-space-14` | 3.5rem | 56px |\n| `--ds-space-16` | 4rem | 64px |\n| `--ds-space-20` | 5rem | 80px |\n| `--ds-space-24` | 6rem | 96px |\n| `--ds-space-32` | 8rem | 128px |\n\n**Common mappings** (use these, not magic numbers):\n- `4px` → `--ds-space-1`\n- `8px` → `--ds-space-2`\n- `12px` → `--ds-space-3`\n- `16px` → `--ds-space-4`\n- `24px` → `--ds-space-6`\n- `32px` → `--ds-space-8`\n\n---\n\n## Border Radius (`--ds-radius-*`)\n\n| Token | Value | Use case |\n|-------|-------|----------|\n| `--ds-radius-none` | 0 | Sharp edges |\n| `--ds-radius-sm` | 2px | Subtle rounding (badges, chips) |\n| `--ds-radius-md` | **4px** | Default — buttons, inputs |\n| `--ds-radius-lg` | **8px** | Cards, dropdowns, accordions |\n| `--ds-radius-xl` | **12px** | Modals, glass cards, toast |\n| `--ds-radius-2xl` | **16px** | Large decorative surfaces |\n| `--ds-radius-full` | 9999px | Pills, circular avatars |\n\n---\n\n## Shadow (`--ds-shadow-*`)\n\nAll shadows use OKLch black with opacity — they adapt naturally to dark mode.\n\n| Token | Value |\n|-------|-------|\n| `--ds-shadow-xs` | `0 1px 2px oklch(0% 0 0 / 4%)` |\n| `--ds-shadow-sm` | `0 1px 3px oklch(0% 0 0 / 6%), 0 1px 2px oklch(0% 0 0 / 4%)` |\n| `--ds-shadow-md` | `0 4px 6px oklch(0% 0 0 / 6%), 0 2px 4px oklch(0% 0 0 / 4%)` |\n| `--ds-shadow-lg` | `0 10px 15px oklch(0% 0 0 / 8%), 0 4px 6px oklch(0% 0 0 / 4%)` |\n| `--ds-shadow-xl` | `0 20px 25px oklch(0% 0 0 / 10%), 0 8px 10px oklch(0% 0 0 / 6%)` |\n| `--ds-shadow-2xl` | `0 25px 50px oklch(0% 0 0 / 12%)` |\n| `--ds-shadow-inner` | `inset 0 2px 4px oklch(0% 0 0 / 4%)` |\n| `--ds-shadow-btn` | `0 1px 2px oklch(0% 0 0 / 6%)` |\n| `--ds-shadow-btn-hover` | `0 4px 12px oklch(0% 0 0 / 10%), 0 2px 4px oklch(0% 0 0 / 6%)` |\n\nDark mode overrides (in `[data-theme=\"dark\"]`):\n- `--ds-shadow-xs` → `0 1px 2px oklch(0% 0 0 / 30%)`\n- `--ds-shadow-sm` → `0 1px 3px oklch(0% 0 0 / 35%), 0 1px 2px oklch(0% 0 0 / 25%)`\n\n---\n\n## Motion (`--ds-duration-*` / `--ds-ease-*`)\n\n| Token | Value | Use case |\n|-------|-------|----------|\n| `--ds-duration-50` | 50ms | Micro-interactions (icon swap) |\n| `--ds-duration-100` | 100ms | Button press |\n| `--ds-duration-150` | **150ms** | Default hover transitions |\n| `--ds-duration-200` | 200ms | Panel fade |\n| `--ds-duration-300` | **300ms** | Modal open, toast slide-in |\n| `--ds-duration-500` | 500ms | Page transitions, theme switch |\n| `--ds-duration-700` | 700ms | Reveal animations |\n| `--ds-duration-1000` | 1000ms | Slow entrance |\n\n| Easing Token | Value | Character |\n|---|---|---|\n| `--ds-ease-out` | `cubic-bezier(0.16, 1, 0.3, 1)` | Fast start, gentle deceleration — **default** |\n| `--ds-ease-in` | `cubic-bezier(0.4, 0, 1, 1)` | Slow start, fast exit (dismissals) |\n| `--ds-ease-in-out` | `cubic-bezier(0.4, 0, 0.2, 1)` | Symmetric, for toggles |\n| `--ds-ease-spring` | `cubic-bezier(0.34, 1.56, 0.64, 1)` | Slight overshoot, playful |\n\nAlways add `@media (prefers-reduced-motion: reduce)` override when using durations > 150ms.\n\n---\n\n## Typography Scale (`--ds-text-*`)\n\n| Token | rem | px | Use |\n|-------|-----|----|-----|\n| `--ds-text-caption` | 0.75rem | 12px | Labels, meta |\n| `--ds-text-body-sm` | 0.875rem | 14px | Secondary text, UI |\n| `--ds-text-body` | 1rem | 16px | **Default body** |\n| `--ds-text-body-lg` | 1.125rem | 18px | Lead paragraphs |\n| `--ds-text-lead` | 1.25rem | 20px | Hero subtitles |\n| `--ds-text-h5` | 1.25rem | 20px | Sub-headings, navbar brand |\n| `--ds-text-h4` | 1.5rem | 24px | Card headings |\n| `--ds-text-h3` | 1.875rem | 30px | Sub-section |\n| `--ds-text-h2` | 2.25rem | 36px | Page sections |\n| `--ds-text-h1` | 3rem | 48px | Page title |\n| `--ds-text-display` | 3.75rem | 60px | Feature headings |\n| `--ds-text-hero` | 4.5rem | 72px | Hero |\n\n---\n\n## Line Height (`--ds-leading-*`)\n\n| Token | Value | Use |\n|-------|-------|-----|\n| `--ds-leading-tight` | 1.1 | Display headings |\n| `--ds-leading-snug` | 1.25 | Sub-headings |\n| `--ds-leading-body` | **1.55** | Body text (default) |\n| `--ds-leading-relaxed` | 1.7 | Long-form prose |\n| `--ds-leading-loose` | 2.0 | Spacious reading |\n\n---\n\n## Letter Spacing (`--ds-tracking-*`)\n\n| Token | Value | Use |\n|-------|-------|-----|\n| `--ds-tracking-tight` | -0.01em | Display headings |\n| `--ds-tracking-normal` | 0.02em | UI text default |\n| `--ds-tracking-wide` | 0.04em | Brand / navbar |\n| `--ds-tracking-wider` | 0.08em | Eyebrow labels |\n| `--ds-tracking-widest` | 0.12em | All-caps labels |\n| `--ds-tracking-cjk-body` | 0.03em | CJK body text |\n| `--ds-tracking-cjk-heading` | 0.06em | CJK headings |\n| `--ds-tracking-mono` | 0 | Code |\n\n---\n\n## Z-Index (`--ds-z-*`)\n\n| Token | Value | Layer |\n|-------|-------|-------|\n| `--ds-z-base` | 0 | Default flow |\n| `--ds-z-above` | 1 | Raised elements |\n| `--ds-z-dropdown` | 100 | Dropdowns |\n| `--ds-z-sticky` | 200 | Sticky navbar |\n| `--ds-z-overlay` | 300 | Backdrop overlays |\n| `--ds-z-modal` | 400 | Modal dialogs |\n| `--ds-z-toast` | 500 | Toast notifications |\n\n\n---\n\n## Blur (`--ds-blur-*`)\n\nUsed with `backdrop-filter` on glass surfaces. Always pair with a colored background parent.\n\n| Token | Value | Use case |\n|-------|-------|----------|\n| `--ds-blur-sm` | 4px | Subtle frosted hint |\n| `--ds-blur-md` | 12px | Frosted nav, light glass |\n| `--ds-blur-lg` | **24px** | Glass cards, modal backdrops — **default** |\n| `--ds-blur-xl` | 48px | Heavy frosted overlay |\n\n> `backdrop-filter` requires the element to have a translucent background (e.g. `var(--ds-glass-bg)` at ~55% opacity). A fully opaque background makes blur invisible.\n\nFile v2.8.0:skill-card.md\n\n## Description:\n\nGenerate token-driven, accessible, framework-agnostic HTML/CSS for EDIC-aligned UI components, full pages, documents, emails, and visual assets using the Editorial x Olive Green design system.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[cgartlab](https://clawhub.ai/user/cgartlab)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers, designers, and content teams use this skill to generate or refactor EDIC-styled web pages, UI components, documents, reports, and email templates with CJK-aware typography, dark-mode support, and token-driven HTML/CSS.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Generated UI may include locale-specific Chinese labels that do not fit the consuming project's language or audience.\n\nMitigation: Review generated text and labels for the target locale before release.\n\nRisk: Examples may reference external CDN or font links when demonstrating EDIC styles.\n\nMitigation: Approve, pin, self-host, or replace external assets according to the consuming project's dependency policy.\n\nRisk: Project-wide installation can influence future UI generation beyond EDIC-specific tasks.\n\nMitigation: Prefer project-scoped installation unless EDIC styling should apply broadly.\n\n## Reference(s):\n\n- [EDIC Skill Definition](artifact/SKILL.md)\n- [EDIC Skill README](artifact/README.md)\n- [Scene Recipes](artifact/references/RECIPES.md)\n- [Page-Level Patterns](artifact/references/PATTERNS.md)\n- [Component HTML Examples](artifact/references/EXAMPLES.md)\n- [Token Reference](artifact/references/TOKENS.md)\n- [Anti-Patterns and Correct Replacements](artifact/references/ANTI-PATTERNS.md)\n- [Structured Design Tokens](artifact/tokens.json)\n- [EDIC Website](https://edic.cgartlab.com/)\n- [EDIC Usage Docs](https://edic.cgartlab.com/docs.html)\n- [EDIC Structured Tokens](https://edic.cgartlab.com/tokens.json)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, shell commands, configuration, guidance]\n\n**Output Format:** [Markdown guidance with HTML/CSS code blocks, shell commands, and configuration snippets]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Outputs should use EDIC design tokens, CJK-aware typography, accessible markup, dark-mode coverage, and email-safe static styles when generating email templates.]\n\n## Skill Version(s):\n\n2.8.0 (source: frontmatter and server release metadata)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nFile v2.8.0:tokens.json\n\n{\n  \"name\": \"EDIC Design Tokens\",\n  \"version\": \"2.8.0\",\n  \"description\": \"Editorial × Olive Green design system tokens\",\n  \"schema\": \"2.0.0\",\n  \"_note\": \"Structured token array. Each tokens[] entry maps to CSS --ds-{name}; _legacyTokens preserves the 1.x flat shape for backward compatibility.\",\n  \"tokens\": [\n    {\n      \"name\": \"accent\",\n      \"value\": \"var(--ds-color-olive-400)\",\n      \"category\": \"system\",\n      \"description\": \"Primary olive accent color.\",\n      \"aliases\": [\n        \"color-olive-400\"\n      ],\n      \"dark\": \"var(--ds-color-olive-400)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"accent-gold\",\n      \"value\": \"var(--ds-color-gold-700)\",\n      \"category\": \"system\",\n      \"description\": \"Antique-gold micro accent (eyebrows, plate numerals, rules).\",\n      \"aliases\": [\n        \"color-gold-700\"\n      ],\n      \"dark\": \"var(--ds-color-gold-700)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-heading\",\n      \"value\": \"oklch(31% 0.058 128)\",\n      \"category\": \"system\",\n      \"description\": \"Deep botanical display-heading ink (light mode).\",\n      \"aliases\": [],\n      \"dark\": \"oklch(93% 0.014 92)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-heading-dark\",\n      \"value\": \"oklch(93% 0.014 92)\",\n      \"category\": \"system\",\n      \"description\": \"Dark-mode variant: Deep botanical display-heading ink.\",\n      \"aliases\": [\n        \"color-heading\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-gold-500\",\n      \"value\": \"oklch(57% 0.1 82)\",\n      \"category\": \"system\",\n      \"description\": \"Antique gold mid tone (decorative rules, swatches).\",\n      \"aliases\": [],\n      \"dark\": \"oklch(76% 0.11 82)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-gold-500-dark\",\n      \"value\": \"oklch(76% 0.11 82)\",\n      \"category\": \"system\",\n      \"description\": \"Dark-mode variant: Antique gold mid tone.\",\n      \"aliases\": [\n        \"color-gold-500\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-gold-700\",\n      \"value\": \"oklch(45% 0.09 80)\",\n      \"category\": \"system\",\n      \"description\": \"Antique gold deep tone (small text on paper, AA).\",\n      \"aliases\": [],\n      \"dark\": \"oklch(80% 0.095 80)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-gold-700-dark\",\n      \"value\": \"oklch(80% 0.095 80)\",\n      \"category\": \"system\",\n      \"description\": \"Dark-mode variant: Antique gold deep tone.\",\n      \"aliases\": [\n        \"color-gold-700\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"accent-dark\",\n      \"value\": \"var(--ds-color-olive-400)\",\n      \"category\": \"system\",\n      \"description\": \"Dark-mode variant: Primary olive accent color.\",\n      \"aliases\": [\n        \"color-olive-400\",\n        \"accent\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"brand-demo-paper\",\n      \"value\": \"oklch(99% 0.005 80)\",\n      \"category\": \"system\",\n      \"description\": \"Theme-independent paper background for brand previews.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(99% 0.005 80)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"brand-demo-ink\",\n      \"value\": \"oklch(15% 0.008 75)\",\n      \"category\": \"system\",\n      \"description\": \"Theme-independent ink background for brand previews.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(15% 0.008 75)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"accent-hover\",\n      \"value\": \"var(--ds-color-olive-500)\",\n      \"category\": \"system\",\n      \"description\": \"Hover state for primary accent surfaces.\",\n      \"aliases\": [\n        \"color-olive-500\"\n      ],\n      \"dark\": \"var(--ds-color-olive-500)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"accent-hover-dark\",\n      \"value\": \"var(--ds-color-olive-500)\",\n      \"category\": \"system\",\n      \"description\": \"Dark-mode variant: Hover state for primary accent surfaces.\",\n      \"aliases\": [\n        \"color-olive-500\",\n        \"accent-hover\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"accent-muted\",\n      \"value\": \"var(--ds-color-olive-50)\",\n      \"category\": \"system\",\n      \"description\": \"Muted accent tint for active navigation and secondary emphasis.\",\n      \"aliases\": [\n        \"color-olive-50\"\n      ],\n      \"dark\": \"var(--ds-color-olive-100)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"accent-muted-dark\",\n      \"value\": \"var(--ds-color-olive-100)\",\n      \"category\": \"system\",\n      \"description\": \"Dark-mode variant: Muted accent tint for active navigation and secondary emphasis.\",\n      \"aliases\": [\n        \"color-olive-100\",\n        \"accent-muted\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"accent-soft\",\n      \"value\": \"var(--ds-color-olive-100)\",\n      \"category\": \"system\",\n      \"description\": \"Soft accent tint for chips, active states, and focus halos.\",\n      \"aliases\": [\n        \"color-olive-100\"\n      ],\n      \"dark\": \"var(--ds-color-olive-200)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"accent-soft-dark\",\n      \"value\": \"var(--ds-color-olive-200)\",\n      \"category\": \"system\",\n      \"description\": \"Dark-mode variant: Soft accent tint for chips, active states, and focus halos.\",\n      \"aliases\": [\n        \"color-olive-200\",\n        \"accent-soft\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"blur-lg\",\n      \"value\": \"24px\",\n      \"category\": \"system\",\n      \"description\": \"lg design token.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"blur-md\",\n      \"value\": \"12px\",\n      \"category\": \"system\",\n      \"description\": \"md design token.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"blur-sm\",\n      \"value\": \"4px\",\n      \"category\": \"system\",\n      \"description\": \"sm design token.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"blur-xl\",\n      \"value\": \"48px\",\n      \"category\": \"system\",\n      \"description\": \"xl design token.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"border-radius-card\",\n      \"value\": \"var(--ds-radius-lg)\",\n      \"category\": \"system\",\n      \"description\": \"radius card design token.\",\n      \"aliases\": [\n        \"radius-lg\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"border-radius-control\",\n      \"value\": \"var(--ds-radius-md)\",\n      \"category\": \"system\",\n      \"description\": \"radius control design token.\",\n      \"aliases\": [\n        \"radius-md\",\n        \"radius-md\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"border-style-default\",\n      \"value\": \"solid\",\n      \"category\": \"system\",\n      \"description\": \"Semantic alias for style default.\",\n      \"aliases\": [],\n      \"dark\": \"solid\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"border-style-default-dark\",\n      \"value\": \"solid\",\n      \"category\": \"system\",\n      \"description\": \"style default dark dark-mode token.\",\n      \"aliases\": [\n        \"border-style-default\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"border-width-default\",\n      \"value\": \"1px\",\n      \"category\": \"system\",\n      \"description\": \"Semantic alias for width default.\",\n      \"aliases\": [\n        \"color-border\"\n      ],\n      \"dark\": \"1px\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"border-width-default-dark\",\n      \"value\": \"1px\",\n      \"category\": \"system\",\n      \"description\": \"width default dark dark-mode token.\",\n      \"aliases\": [\n        \"border-width-default\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"border-width-hairline\",\n      \"value\": \"1px\",\n      \"category\": \"system\",\n      \"description\": \"width hairline design token.\",\n      \"aliases\": [\n        \"color-border-subtle\"\n      ],\n      \"dark\": \"1px\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"border-width-hairline-dark\",\n      \"value\": \"1px\",\n      \"category\": \"system\",\n      \"description\": \"width hairline dark dark-mode token.\",\n      \"aliases\": [\n        \"border-width-hairline\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"border-width-thick\",\n      \"value\": \"2px\",\n      \"category\": \"system\",\n      \"description\": \"width thick design token.\",\n      \"aliases\": [\n        \"color-border-strong\"\n      ],\n      \"dark\": \"2px\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"border-width-thick-dark\",\n      \"value\": \"2px\",\n      \"category\": \"system\",\n      \"description\": \"width thick dark dark-mode token.\",\n      \"aliases\": [\n        \"border-width-thick\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"breakpoint-2xl\",\n      \"value\": \"var(--ds-bp-2xl)\",\n      \"category\": \"system\",\n      \"description\": \"2xl design token.\",\n      \"aliases\": [\n        \"bp-2xl\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"breakpoint-lg\",\n      \"value\": \"var(--ds-bp-lg)\",\n      \"category\": \"system\",\n      \"description\": \"lg design token.\",\n      \"aliases\": [\n        \"bp-lg\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"breakpoint-md\",\n      \"value\": \"var(--ds-bp-md)\",\n      \"category\": \"system\",\n      \"description\": \"md design token.\",\n      \"aliases\": [\n        \"bp-md\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"breakpoint-sm\",\n      \"value\": \"var(--ds-bp-sm)\",\n      \"category\": \"system\",\n      \"description\": \"sm design token.\",\n      \"aliases\": [\n        \"bp-sm\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"breakpoint-xl\",\n      \"value\": \"var(--ds-bp-xl)\",\n      \"category\": \"system\",\n      \"description\": \"xl design token.\",\n      \"aliases\": [\n        \"bp-xl\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"chart-1\",\n      \"value\": \"oklch(62% 0.09 50)\",\n      \"category\": \"system\",\n      \"description\": \"1 design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(72% 0.08 50)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"chart-1-dark\",\n      \"value\": \"oklch(72% 0.08 50)\",\n      \"category\": \"system\",\n      \"description\": \"1 dark dark-mode token.\",\n      \"aliases\": [\n        \"chart-1\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"chart-2\",\n      \"value\": \"oklch(64% 0.09 145)\",\n      \"category\": \"system\",\n      \"description\": \"2 design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(74% 0.08 145)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"chart-2-dark\",\n      \"value\": \"oklch(74% 0.08 145)\",\n      \"category\": \"system\",\n      \"description\": \"2 dark dark-mode token.\",\n      \"aliases\": [\n        \"chart-2\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"chart-3\",\n      \"value\": \"oklch(58% 0.10 250)\",\n      \"category\": \"system\",\n      \"description\": \"3 design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(74% 0.09 250)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"chart-3-dark\",\n      \"value\": \"oklch(74% 0.09 250)\",\n      \"category\": \"system\",\n      \"description\": \"3 dark dark-mode token.\",\n      \"aliases\": [\n        \"chart-3\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"chart-4\",\n      \"value\": \"oklch(67% 0.11 65)\",\n      \"category\": \"system\",\n      \"description\": \"4 design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(77% 0.10 65)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"chart-4-dark\",\n      \"value\": \"oklch(77% 0.10 65)\",\n      \"category\": \"system\",\n      \"description\": \"4 dark dark-mode token.\",\n      \"aliases\": [\n        \"chart-4\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"chart-5\",\n      \"value\": \"oklch(62% 0.08 185)\",\n      \"category\": \"system\",\n      \"description\": \"5 design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(72% 0.07 185)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"chart-5-dark\",\n      \"value\": \"oklch(72% 0.07 185)\",\n      \"category\": \"system\",\n      \"description\": \"5 dark dark-mode token.\",\n      \"aliases\": [\n        \"chart-5\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"chart-6\",\n      \"value\": \"oklch(62% 0.09 310)\",\n      \"category\": \"system\",\n      \"description\": \"6 design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(72% 0.08 310)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"chart-6-dark\",\n      \"value\": \"oklch(72% 0.08 310)\",\n      \"category\": \"system\",\n      \"description\": \"6 dark dark-mode token.\",\n      \"aliases\": [\n        \"chart-6\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"chart-7\",\n      \"value\": \"oklch(70% 0.09 90)\",\n      \"category\": \"system\",\n      \"description\": \"7 design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(80% 0.08 90)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"chart-7-dark\",\n      \"value\": \"oklch(80% 0.08 90)\",\n      \"category\": \"system\",\n      \"description\": \"7 dark dark-mode token.\",\n      \"aliases\": [\n        \"chart-7\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"chart-8\",\n      \"value\": \"oklch(50% 0.08 30)\",\n      \"category\": \"system\",\n      \"description\": \"8 design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(70% 0.07 30)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"chart-8-dark\",\n      \"value\": \"oklch(70% 0.07 30)\",\n      \"category\": \"system\",\n      \"description\": \"8 dark dark-mode token.\",\n      \"aliases\": [\n        \"chart-8\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"chart-axis-color\",\n      \"value\": \"var(--ds-color-border-strong)\",\n      \"category\": \"system\",\n      \"description\": \"axis color design token.\",\n      \"aliases\": [\n        \"color-border-strong\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"chart-axis-label-size\",\n      \"value\": \"var(--ds-text-h5)\",\n      \"category\": \"system\",\n      \"description\": \"axis label size design token.\",\n      \"aliases\": [\n        \"text-h5\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"chart-bar-radius\",\n      \"value\": \"var(--ds-radius-sm)\",\n      \"category\": \"system\",\n      \"description\": \"bar radius design token.\",\n      \"aliases\": [\n        \"radius-sm\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"chart-grid-color\",\n      \"value\": \"var(--ds-color-border-subtle)\",\n      \"category\": \"system\",\n      \"description\": \"grid color design token.\",\n      \"aliases\": [\n        \"color-border-subtle\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"chart-label-color\",\n      \"value\": \"var(--ds-color-fg-subtle)\",\n      \"category\": \"system\",\n      \"description\": \"label color design token.\",\n      \"aliases\": [\n        \"color-fg-subtle\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"chart-label-size\",\n      \"value\": \"var(--ds-text-body)\",\n      \"category\": \"system\",\n      \"description\": \"label size design token.\",\n      \"aliases\": [\n        \"text-body\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"chart-tooltip-bg\",\n      \"value\": \"var(--ds-glass-bg)\",\n      \"category\": \"system\",\n      \"description\": \"tooltip bg design token.\",\n      \"aliases\": [\n        \"glass-bg\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"chart-tooltip-border\",\n      \"value\": \"var(--ds-glass-border)\",\n      \"category\": \"system\",\n      \"description\": \"tooltip border design token.\",\n      \"aliases\": [\n        \"glass-border\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"chart-tooltip-shadow\",\n      \"value\": \"var(--ds-shadow-lg)\",\n      \"category\": \"system\",\n      \"description\": \"tooltip shadow design token.\",\n      \"aliases\": [\n        \"shadow-lg\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"cjk-line-height\",\n      \"value\": \"1.7\",\n      \"category\": \"system\",\n      \"description\": \"line height design token.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"code-bg\",\n      \"value\": \"oklch(97% 0.005 85)\",\n      \"category\": \"system\",\n      \"description\": \"bg design token.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"code-bg-bar\",\n      \"value\": \"oklch(94% 0.008 85)\",\n      \"category\": \"system\",\n      \"description\": \"bg bar design token.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"code-print-border\",\n      \"value\": \"oklch(85% 0.02 60)\",\n      \"category\": \"system\",\n      \"description\": \"print border design token.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"code-text\",\n      \"value\": \"oklch(22% 0.03 60)\",\n      \"category\": \"system\",\n      \"description\": \"text design token.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-bg\",\n      \"value\": \"oklch(97% 0.012 80)\",\n      \"category\": \"system\",\n      \"description\": \"Warm paper background.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(17% 0.014 80)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-bg-dark\",\n      \"value\": \"oklch(17% 0.014 80)\",\n      \"category\": \"system\",\n      \"description\": \"Dark-mode variant: Warm paper background.\",\n      \"aliases\": [\n        \"color-bg\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-black\",\n      \"value\": \"oklch(0% 0 0)\",\n      \"category\": \"system\",\n      \"description\": \"black design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(0% 0 0)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-black-dark\",\n      \"value\": \"oklch(0% 0 0)\",\n      \"category\": \"system\",\n      \"description\": \"black dark dark-mode token.\",\n      \"aliases\": [\n        \"color-black\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-border\",\n      \"value\": \"oklch(89% 0.012 80)\",\n      \"category\": \"system\",\n      \"description\": \"Default border.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(35% 0.016 80)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-border-dark\",\n      \"value\": \"oklch(35% 0.016 80)\",\n      \"category\": \"system\",\n      \"description\": \"Dark-mode variant: Default border.\",\n      \"aliases\": [\n        \"color-border\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-border-default\",\n      \"value\": \"var(--ds-color-border)\",\n      \"category\": \"system\",\n      \"description\": \"Semantic alias for border default.\",\n      \"aliases\": [\n        \"color-border\",\n        \"color-border\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-border-strong\",\n      \"value\": \"oklch(82% 0.015 75)\",\n      \"category\": \"system\",\n      \"description\": \"High-contrast border and control outline.\",\n      \"aliases\": [\n        \"color-border-strong\"\n      ],\n      \"dark\": \"oklch(44% 0.018 76)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-border-strong-dark\",\n      \"value\": \"oklch(44% 0.018 76)\",\n      \"category\": \"system\",\n      \"description\": \"Dark-mode variant: High-contrast border and control outline.\",\n      \"aliases\": [\n        \"color-border-strong\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-border-subtle\",\n      \"value\": \"oklch(92% 0.012 80)\",\n      \"category\": \"system\",\n      \"description\": \"Low-contrast divider and subtle border.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(31% 0.014 80)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-border-subtle-dark\",\n      \"value\": \"oklch(31% 0.014 80)\",\n      \"category\": \"system\",\n      \"description\": \"Dark-mode variant: Low-contrast divider and subtle border.\",\n      \"aliases\": [\n        \"color-border-subtle\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-copy-success\",\n      \"value\": \"oklch(80% 0.12 145)\",\n      \"category\": \"system\",\n      \"description\": \"copy success design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(85% 0.10 145)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-copy-success-border\",\n      \"value\": \"oklch(60% 0.12 145)\",\n      \"category\": \"system\",\n      \"description\": \"copy success border design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(65% 0.10 145)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-copy-success-border-dark\",\n      \"value\": \"oklch(65% 0.10 145)\",\n      \"category\": \"system\",\n      \"description\": \"copy success border dark dark-mode token.\",\n      \"aliases\": [\n        \"color-copy-success-border\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-copy-success-dark\",\n      \"value\": \"oklch(85% 0.10 145)\",\n      \"category\": \"system\",\n      \"description\": \"copy success dark dark-mode token.\",\n      \"aliases\": [\n        \"color-copy-success\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-error\",\n      \"value\": \"oklch(50% 0.14 30)\",\n      \"category\": \"system\",\n      \"description\": \"error design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(55% 0.12 30)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-error-bg\",\n      \"value\": \"oklch(93% 0.025 30)\",\n      \"category\": \"system\",\n      \"description\": \"error bg design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(22% 0.03 30)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-error-bg-dark\",\n      \"value\": \"oklch(22% 0.03 30)\",\n      \"category\": \"system\",\n      \"description\": \"error bg dark dark-mode token.\",\n      \"aliases\": [\n        \"color-error-bg\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-error-dark\",\n      \"value\": \"oklch(55% 0.12 30)\",\n      \"category\": \"system\",\n      \"description\": \"error dark dark-mode token.\",\n      \"aliases\": [\n        \"color-error\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-fg\",\n      \"value\": \"oklch(20% 0.02 60)\",\n      \"category\": \"system\",\n      \"description\": \"Primary foreground body text.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(88% 0.008 80)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-fg-dark\",\n      \"value\": \"oklch(88% 0.008 80)\",\n      \"category\": \"system\",\n      \"description\": \"Dark-mode variant: Primary foreground body text.\",\n      \"aliases\": [\n        \"color-fg\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-fg-inverse\",\n      \"value\": \"oklch(97% 0.005 80)\",\n      \"category\": \"system\",\n      \"description\": \"Foreground text on dark or accent surfaces.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(17% 0.014 80)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-fg-inverse-dark\",\n      \"value\": \"oklch(17% 0.014 80)\",\n      \"category\": \"system\",\n      \"description\": \"Dark-mode variant: Foreground text on dark or accent surfaces.\",\n      \"aliases\": [\n        \"color-fg-inverse\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-fg-muted\",\n      \"value\": \"var(--ds-color-muted)\",\n      \"category\": \"system\",\n      \"description\": \"fg muted design token.\",\n      \"aliases\": [\n        \"color-muted\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-fg-strong\",\n      \"value\": \"oklch(14% 0.025 60)\",\n      \"category\": \"system\",\n      \"description\": \"High-emphasis foreground text.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(95% 0.005 85)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-fg-strong-dark\",\n      \"value\": \"oklch(95% 0.005 85)\",\n      \"category\": \"system\",\n      \"description\": \"Dark-mode variant: High-emphasis foreground text.\",\n      \"aliases\": [\n        \"color-fg-strong\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-fg-subtle\",\n      \"value\": \"oklch(35% 0.018 60)\",\n      \"category\": \"system\",\n      \"description\": \"Muted foreground text.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(76% 0.012 75)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-fg-subtle-dark\",\n      \"value\": \"oklch(76% 0.012 75)\",\n      \"category\": \"system\",\n      \"description\": \"Dark-mode variant: Muted foreground text.\",\n      \"aliases\": [\n        \"color-fg-subtle\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-info\",\n      \"value\": \"oklch(55% 0.08 240)\",\n      \"category\": \"system\",\n      \"description\": \"info design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(60% 0.07 240)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-info-bg\",\n      \"value\": \"oklch(93% 0.02 240)\",\n      \"category\": \"system\",\n      \"description\": \"info bg design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(22% 0.025 240)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-info-bg-dark\",\n      \"value\": \"oklch(22% 0.025 240)\",\n      \"category\": \"system\",\n      \"description\": \"info bg dark dark-mode token.\",\n      \"aliases\": [\n        \"color-info-bg\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-info-dark\",\n      \"value\": \"oklch(60% 0.07 240)\",\n      \"category\": \"system\",\n      \"description\": \"info dark dark-mode token.\",\n      \"aliases\": [\n        \"color-info\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-muted\",\n      \"value\": \"oklch(42% 0.015 60)\",\n      \"category\": \"system\",\n      \"description\": \"Secondary text and metadata.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(66% 0.012 75)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-muted-dark\",\n      \"value\": \"oklch(66% 0.012 75)\",\n      \"category\": \"system\",\n      \"description\": \"Dark-mode variant: Secondary text and metadata.\",\n      \"aliases\": [\n        \"color-muted\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-olive-100\",\n      \"value\": \"oklch(82% 0.035 115)\",\n      \"category\": \"system\",\n      \"description\": \"olive 100 design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(27% 0.025 115)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-olive-100-dark\",\n      \"value\": \"oklch(27% 0.025 115)\",\n      \"category\": \"system\",\n      \"description\": \"olive 100 dark dark-mode token.\",\n      \"aliases\": [\n        \"color-olive-100\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-olive-200\",\n      \"value\": \"oklch(72% 0.05 115)\",\n      \"category\": \"system\",\n      \"description\": \"olive 200 design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(35% 0.035 115)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-olive-200-dark\",\n      \"value\": \"oklch(35% 0.035 115)\",\n      \"category\": \"system\",\n      \"description\": \"olive 200 dark dark-mode token.\",\n      \"aliases\": [\n        \"color-olive-200\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-olive-300\",\n      \"value\": \"oklch(62% 0.065 115)\",\n      \"category\": \"system\",\n      \"description\": \"olive 300 design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(45% 0.05 115)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-olive-300-dark\",\n      \"value\": \"oklch(45% 0.05 115)\",\n      \"category\": \"system\",\n      \"description\": \"olive 300 dark dark-mode token.\",\n      \"aliases\": [\n        \"color-olive-300\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-olive-400\",\n      \"value\": \"oklch(52% 0.08 115)\",\n      \"category\": \"system\",\n      \"description\": \"olive 400 design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(57% 0.065 115)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-olive-400-dark\",\n      \"value\": \"oklch(57% 0.065 115)\",\n      \"category\": \"system\",\n      \"description\": \"olive 400 dark dark-mode token.\",\n      \"aliases\": [\n        \"color-olive-400\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-olive-50\",\n      \"value\": \"oklch(90% 0.025 115)\",\n      \"category\": \"system\",\n      \"description\": \"olive 50 design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(22% 0.02 115)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-olive-50-dark\",\n      \"value\": \"oklch(22% 0.02 115)\",\n      \"category\": \"system\",\n      \"description\": \"olive 50 dark dark-mode token.\",\n      \"aliases\": [\n        \"color-olive-50\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-olive-500\",\n      \"value\": \"oklch(45% 0.085 115)\",\n      \"category\": \"system\",\n      \"description\": \"olive 500 design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(64% 0.065 115)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-olive-500-dark\",\n      \"value\": \"oklch(64% 0.065 115)\",\n      \"category\": \"system\",\n      \"description\": \"olive 500 dark dark-mode token.\",\n      \"aliases\": [\n        \"color-olive-500\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-olive-600\",\n      \"value\": \"oklch(38% 0.08 115)\",\n      \"category\": \"system\",\n      \"description\": \"olive 600 design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(71% 0.06 115)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-olive-600-dark\",\n      \"value\": \"oklch(71% 0.06 115)\",\n      \"category\": \"system\",\n      \"description\": \"olive 600 dark dark-mode token.\",\n      \"aliases\": [\n        \"color-olive-600\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-olive-700\",\n      \"value\": \"oklch(30% 0.07 115)\",\n      \"category\": \"system\",\n      \"description\": \"olive 700 design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(79% 0.05 115)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-olive-700-dark\",\n      \"value\": \"oklch(79% 0.05 115)\",\n      \"category\": \"system\",\n      \"description\": \"olive 700 dark dark-mode token.\",\n      \"aliases\": [\n        \"color-olive-700\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-olive-800\",\n      \"value\": \"oklch(22% 0.055 115)\",\n      \"category\": \"system\",\n      \"description\": \"olive 800 design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(87% 0.035 115)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-olive-800-dark\",\n      \"value\": \"oklch(87% 0.035 115)\",\n      \"category\": \"system\",\n      \"description\": \"olive 800 dark dark-mode token.\",\n      \"aliases\": [\n        \"color-olive-800\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-olive-900\",\n      \"value\": \"oklch(15% 0.04 115)\",\n      \"category\": \"system\",\n      \"description\": \"olive 900 design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(94% 0.02 115)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-olive-900-dark\",\n      \"value\": \"oklch(94% 0.02 115)\",\n      \"category\": \"system\",\n      \"description\": \"olive 900 dark dark-mode token.\",\n      \"aliases\": [\n        \"color-olive-900\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-overlay\",\n      \"value\": \"oklch(0% 0 0 / 0.4)\",\n      \"category\": \"system\",\n      \"description\": \"Semantic alias for overlay.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-overlay-light\",\n      \"value\": \"oklch(0% 0 0 / 0.12)\",\n      \"category\": \"system\",\n      \"description\": \"Semantic alias for overlay light.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-success\",\n      \"value\": \"oklch(55% 0.1 145)\",\n      \"category\": \"system\",\n      \"description\": \"success design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(60% 0.09 145)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-success-bg\",\n      \"value\": \"oklch(93% 0.025 145)\",\n      \"category\": \"system\",\n      \"description\": \"success bg design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(22% 0.03 145)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-success-bg-dark\",\n      \"value\": \"oklch(22% 0.03 145)\",\n      \"category\": \"system\",\n      \"description\": \"success bg dark dark-mode token.\",\n      \"aliases\": [\n        \"color-success-bg\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-success-dark\",\n      \"value\": \"oklch(60% 0.09 145)\",\n      \"category\": \"system\",\n      \"description\": \"success dark dark-mode token.\",\n      \"aliases\": [\n        \"color-success\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-surface\",\n      \"value\": \"oklch(99% 0.005 80)\",\n      \"category\": \"system\",\n      \"description\": \"Primary content surface.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(22% 0.016 80)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-surface-dark\",\n      \"value\": \"oklch(22% 0.016 80)\",\n      \"category\": \"system\",\n      \"description\": \"Dark-mode variant: Primary content surface.\",\n      \"aliases\": [\n        \"color-surface\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-surface-overlay\",\n      \"value\": \"oklch(97% 0.008 80)\",\n      \"category\": \"system\",\n      \"description\": \"Overlay tint for hover and focus surfaces.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(24% 0.016 80)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-surface-overlay-dark\",\n      \"value\": \"oklch(24% 0.016 80)\",\n      \"category\": \"system\",\n      \"description\": \"Dark-mode variant: Overlay tint for hover and focus surfaces.\",\n      \"aliases\": [\n        \"color-surface-overlay\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-surface-primary\",\n      \"value\": \"var(--ds-color-surface)\",\n      \"category\": \"system\",\n      \"description\": \"Semantic alias for surface primary.\",\n      \"aliases\": [\n        \"color-surface\",\n        \"color-surface\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-surface-raised\",\n      \"value\": \"oklch(99.5% 0.006 92)\",\n      \"category\": \"system\",\n      \"description\": \"Raised surface for modals, cards, and panels.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(26% 0.018 80)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-surface-raised-dark\",\n      \"value\": \"oklch(26% 0.018 80)\",\n      \"category\": \"system\",\n      \"description\": \"Dark-mode variant: Raised surface for modals, cards, and panels.\",\n      \"aliases\": [\n        \"color-surface-raised\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-surface-raised-primary\",\n      \"value\": \"var(--ds-color-surface-raised)\",\n      \"category\": \"system\",\n      \"description\": \"Semantic alias for surface raised primary.\",\n      \"aliases\": [\n        \"color-surface-raised\",\n        \"color-surface-raised\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-text-primary\",\n      \"value\": \"var(--ds-color-fg)\",\n      \"category\": \"system\",\n      \"description\": \"Semantic alias for text primary.\",\n      \"aliases\": [\n        \"color-fg\",\n        \"color-fg\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-text-secondary\",\n      \"value\": \"var(--ds-color-fg-subtle)\",\n      \"category\": \"system\",\n      \"description\": \"Semantic alias for text secondary.\",\n      \"aliases\": [\n        \"color-fg-subtle\",\n        \"color-fg-subtle\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-text-strong\",\n      \"value\": \"var(--ds-color-fg-strong)\",\n      \"category\": \"system\",\n      \"description\": \"Semantic alias for text strong.\",\n      \"aliases\": [\n        \"color-fg-strong\",\n        \"color-fg-strong\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-warning\",\n      \"value\": \"oklch(65% 0.1 85)\",\n      \"category\": \"system\",\n      \"description\": \"warning design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(72% 0.09 85)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-warning-bg\",\n      \"value\": \"oklch(95% 0.025 85)\",\n      \"category\": \"system\",\n      \"description\": \"warning bg design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(24% 0.03 85)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-warning-bg-dark\",\n      \"value\": \"oklch(24% 0.03 85)\",\n      \"category\": \"system\",\n      \"description\": \"warning bg dark dark-mode token.\",\n      \"aliases\": [\n        \"color-warning-bg\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-warning-dark\",\n      \"value\": \"oklch(72% 0.09 85)\",\n      \"category\": \"system\",\n      \"description\": \"warning dark dark-mode token.\",\n      \"aliases\": [\n        \"color-warning\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-white\",\n      \"value\": \"oklch(100% 0 0)\",\n      \"category\": \"system\",\n      \"description\": \"white design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(100% 0 0)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"color-white-dark\",\n      \"value\": \"oklch(100% 0 0)\",\n      \"category\": \"system\",\n      \"description\": \"white dark dark-mode token.\",\n      \"aliases\": [\n        \"color-white\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"delay-0\",\n      \"value\": \"0ms\",\n      \"category\": \"system\",\n      \"description\": \"0 design token.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"delay-1\",\n      \"value\": \"50ms\",\n      \"category\": \"system\",\n      \"description\": \"1 design token.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"delay-2\",\n      \"value\": \"100ms\",\n      \"category\": \"system\",\n      \"description\": \"2 design token.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"delay-3\",\n      \"value\": \"150ms\",\n      \"category\": \"system\",\n      \"description\": \"3 design token.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"delay-4\",\n      \"value\": \"200ms\",\n      \"category\": \"system\",\n      \"description\": \"4 design token.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"depth-floating\",\n      \"value\": \"var(--ds-shadow-lg)\",\n      \"category\": \"system\",\n      \"description\": \"floating design token.\",\n      \"aliases\": [\n        \"shadow-md\",\n        \"shadow-lg\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"depth-popover\",\n      \"value\": \"var(--ds-shadow-md)\",\n      \"category\": \"system\",\n      \"description\": \"popover design token.\",\n      \"aliases\": [\n        \"shadow-lg\",\n        \"shadow-md\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"disabled-bg\",\n      \"value\": \"var(--ds-color-border-subtle)\",\n      \"category\": \"system\",\n      \"description\": \"bg design token.\",\n      \"aliases\": [\n        \"color-surface-overlay\",\n        \"color-border-subtle\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"disabled-text\",\n      \"value\": \"var(--ds-color-muted)\",\n      \"category\": \"system\",\n      \"description\": \"text design token.\",\n      \"aliases\": [\n        \"color-muted\",\n        \"color-muted\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"duration-100\",\n      \"value\": \"100ms\",\n      \"category\": \"system\",\n      \"description\": \"100 design token.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"duration-1000\",\n      \"value\": \"1000ms\",\n      \"category\": \"system\",\n      \"description\": \"1000 design token.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"duration-150\",\n      \"value\": \"150ms\",\n      \"category\": \"system\",\n      \"description\": \"150 design token.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"duration-200\",\n      \"value\": \"200ms\",\n      \"category\": \"system\",\n      \"description\": \"200 design token.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"duration-300\",\n      \"value\": \"300ms\",\n      \"category\": \"system\",\n      \"description\": \"300 design token.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"duration-50\",\n      \"value\": \"50ms\",\n      \"category\": \"system\",\n      \"description\": \"50 design token.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"duration-500\",\n      \"value\": \"500ms\",\n      \"category\": \"system\",\n      \"description\": \"500 design token.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"duration-700\",\n      \"value\": \"700ms\",\n      \"category\": \"system\",\n      \"description\": \"700 design token.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"duration-base\",\n      \"value\": \"var(--ds-duration-300)\",\n      \"category\": \"system\",\n      \"description\": \"base design token.\",\n      \"aliases\": [\n        \"duration-200\",\n        \"duration-300\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"duration-fast\",\n      \"value\": \"var(--ds-duration-150)\",\n      \"category\": \"system\",\n      \"description\": \"fast design token.\",\n      \"aliases\": [\n        \"duration-150\",\n        \"duration-150\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"duration-slow\",\n      \"value\": \"var(--ds-duration-500)\",\n      \"category\": \"system\",\n      \"description\": \"slow design token.\",\n      \"aliases\": [\n        \"duration-500\",\n        \"duration-500\"\n      ],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"ease-in\",\n      \"value\": \"cubic-bezier(0.4, 0, 1, 1)\",\n      \"category\": \"system\",\n      \"description\": \"in design token.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"ease-in-out\",\n      \"value\": \"cubic-bezier(0.4, 0, 0.2, 1)\",\n      \"category\": \"system\",\n      \"description\": \"in out design token.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"ease-out\",\n      \"value\": \"cubic-bezier(0.16, 1, 0.3, 1)\",\n      \"category\": \"system\",\n      \"description\": \"out design token.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"ease-spring\",\n      \"value\": \"cubic-bezier(0.34, 1.56, 0.64, 1)\",\n      \"category\": \"system\",\n      \"description\": \"spring design token.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"focus-outline-offset\",\n      \"value\": \"2px\",\n      \"category\": \"system\",\n      \"description\": \"outline offset design token.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"focus-outline-width\",\n      \"value\": \"2px\",\n      \"category\": \"system\",\n      \"description\": \"outline width design token.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"font-body\",\n      \"value\": \"\\\"Noto Sans SC\\\", \\\"Source Han Sans SC\\\", -apple-system, BlinkMacSystemFont, \\\"Segoe UI\\\", system-ui, sans-serif\",\n      \"category\": \"system\",\n      \"description\": \"Body sans-serif typeface stack.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"font-display\",\n      \"value\": \"\\\"Playfair Display\\\", \\\"Iowan Old Style\\\", \\\"Charter\\\", Georgia, \\\"Noto Serif SC\\\", \\\"Source Han Serif SC\\\", serif\",\n      \"category\": \"system\",\n      \"description\": \"Display serif typeface stack (self-hosted Playfair Display latin subset first).\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"font-heading\",\n      \"value\": \"var(--ds-font-display)\",\n      \"category\": \"system\",\n      \"description\": \"Heading typeface stack (aliases font-display).\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"font-mono\",\n      \"value\": \"\\\"JetBrains Mono\\\", \\\"IBM Plex Mono\\\", \\\"Noto Sans Mono SC\\\", ui-monospace, monospace\",\n      \"category\": \"system\",\n      \"description\": \"Monospace typeface stack.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"font-ui\",\n      \"value\": \"\\\"Noto Sans SC\\\", \\\"Source Han Sans SC\\\", -apple-system, BlinkMacSystemFont, \\\"Segoe UI\\\", system-ui, sans-serif\",\n      \"category\": \"system\",\n      \"description\": \"UI sans-serif typeface stack.\",\n      \"aliases\": [],\n      \"dark\": null,\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"glass-bg\",\n      \"value\": \"oklch(97% 0.012 80 / 0.55)\",\n      \"category\": \"system\",\n      \"description\": \"bg design token.\",\n      \"aliases\": [],\n      \"dark\": \"oklch(17% 0.014 80 / 0.6)\",\n      \"deprecated\": false,\n      \"status\": \"stable\"\n    },\n    {\n      \"name\": \"glass-b\n\nArchive v2.5.0: 10 files, 47179 bytes\n\nFiles: README.md (11138b), references/ANTI-PATTERNS.md (9658b), references/EXAMPLES.md (13042b), references/PATTERNS.md (19102b), references/RECIPES.md (15944b), references/TOKENS.md (6555b), skill-card.md (2339b), SKILL.md (16129b), tokens.json (97676b), _meta.json (137b)\n\nFile v2.5.0:SKILL.md\n\n---\nname: edic-design-system\nslug: edic-design-system\ndisplayName: EDIC 设计系统\nversion: 2.5.0\ndescription: >-\n  Generate UI components, full pages, documents, emails, and assets aligned\n  with the EDIC design system (Editorial × Olive Green, OKLch tokens for\n  web/UI, dark-mode ready, CJK-optimized; emails use compatible static styles).\n  Use this skill whenever the user asks\n  to build, style, or refactor anything for EDIC, or explicitly requests the\n  EDIC / \"editorial olive\" design system. Output token-driven, accessible,\n  framework-agnostic HTML/CSS.\nlicense: MIT-0\n---\n\n# EDIC Design System Skill\n\nWhen this skill is active, every visual artifact you produce — components, pages,\nlanding sections, documentation, emails, reports — should follow the EDIC\ndesign system. **Prefer design tokens (CSS custom properties) for web/UI.\nNever hard-code magic numbers. Use compatible static styles for email.**\n\n## Manifest-First Workflow\n\nWhen this skill is active for an EDIC project, use manifest-first behavior:\n\n1. Read `edic-manifest.json` for the authoritative deliverable, token,\n   component, icon, validator, and constraint list.\n2. Read `tokens.json`, `icons.json`, and `AGENT-GUIDE.md` when generating or\n   auditing UI.\n3. Read `docs/component-gap-audit.md` and `docs/component-2.0-backlog.md`\n   before proposing, adding, or claiming completion of a component.\n4. Read `skills/edic-design-system/references/CONTRACTS.md` before creating a\n   new component or improving an interactive component.\n5. Read `references/ANTI-PATTERNS.md` before fixing or reviewing generated UI.\n\nComponent generation rules:\n\n- Existing manifest core components must use the documented `ds-*` class family\n  and examples; do not invent parallel class names.\n- New components must follow the component contract in\n  `references/CONTRACTS.md`.\n- Add CSS to `styles.css` before adding HTML examples in `docs.html`.\n- Use token-only visual values and include dark-mode coverage.\n- Include ARIA metadata and keyboard behavior for interactive components.\n- Mark a task complete only after `npm run audit` passes.\n\n## Design character\n- **Editorial × Olive Green**: magazine-grade restraint, generous whitespace,\n  serif headings + sans body, a warm paper background, and a confident — never\n  loud — olive-green accent.\n- Reference moods: Monocle (typographic restraint\n\nArchive v1.9.4: 10 files, 37859 bytes\n\nFiles: README.md (11069b), references/ANTI-PATTERNS.md (6779b), references/EXAMPLES.md (13042b), references/PATTERNS.md (19034b), references/RECIPES.md (15944b), references/TOKENS.md (6473b), skill-card.md (2369b), SKILL.md (14198b), tokens.json (10441b), _meta.json (137b)\n\nArchive v1.9.3: 9 files, 35350 bytes\n\nFiles: README.md (11069b), references/ANTI-PATTERNS.md (6779b), references/EXAMPLES.md (13042b), references/PATTERNS.md (19034b), references/RECIPES.md (15944b), references/TOKENS.md (6473b), skill-card.md (2658b), SKILL.md (14198b), _meta.json (137b)\n\nArchive v1.9.2: 9 files, 35393 bytes\n\nFiles: README.md (11069b), references/ANTI-PATTERNS.md (6779b), references/EXAMPLES.md (13042b), references/PATTERNS.md (19034b), references/RECIPES.md (15944b), references/TOKENS.md (6472b), skill-card.md (2788b), SKILL.md (14198b), _meta.json (137b)\n\nArchive v1.9.1: 5 files, 11424 bytes\n\nFiles: README.md (4494b), skill-card.md (2117b), SKILL.md (11356b), tokens.json (9334b), _meta.json (137b)\n\nArchive v1.8.0: 10 files, 59025 bytes\n\nFiles: icons.svg (28660b), quick-prompt.md (1288b), README.md (3999b), scripts.js (51801b), skill-card.md (2559b), SKILL.md (11567b), styles.css (117904b), system-prompt.md (5636b), tokens.json (9334b), _meta.json (137b)\n\nArchive v1.5.4: 6 files, 33876 bytes\n\nFiles: assets/edic-design-system.css (106263b), assets/edic-design-system.json (8935b), README.md (4501b), skill-card.md (2144b), SKILL.md (11325b), _meta.json (137b)\n\nArchive v1.5.1: 6 files, 33830 bytes\n\nFiles: assets/edic-design-system.css (106263b), assets/edic-design-system.json (8935b), README.md (4501b), skill-card.md (1949b), SKILL.md (11325b), _meta.json (137b)","readmeExcerpt":"Skill: EDIC 设计系统 Owner: cgartlab Summary: Generate UI components, full pages, documents, emails, and assets aligned with the EDIC design system (Editorial × Olive Green, OKLch tokens for web/UI, dark-mode ready, CJK-optimized; emails use compatible static styles). Use this skill whenever the user asks to build, style, or refactor anything for EDIC, or explicitly requests the EDIC / \"editorial olive\" design system. Ou","codeSnippets":[],"executableExamples":[{"language":"text","snippet":"--ds-color-bg: oklch(97% 0.012 80)          /* warm paper background */\n--ds-color-surface: oklch(99% 0.005 80)\n--ds-color-surface-raised: oklch(99.5% 0.006 92)  /* popovers / modals */\n--ds-color-border: oklch(89% 0.012 80)\n--ds-color-muted: oklch(42% 0.015 60)       /* secondary text */\n--ds-color-fg: oklch(20% 0.02 60)           /* body text */\n--ds-color-fg-strong: oklch(14% 0.025 60)   /* headings */"},{"language":"text","snippet":"--ds-color-olive-400: oklch(52% 0.08 115)   /* === --ds-accent === */\n--ds-accent-hover: var(--ds-color-olive-500)\n--ds-accent-soft:  var(--ds-color-olive-100)"},{"language":"text","snippet":"--ds-font-display: \"Playfair Display\",\"Iowan Old Style\",\"Charter\",Georgia,\"Noto Serif SC\",serif\n--ds-font-body / --ds-font-ui: \"Noto Sans SC\",-apple-system,system-ui,sans-serif\n--ds-font-mono: \"JetBrains Mono\",\"IBM Plex Mono\",monospace"},{"language":"html","snippet":"<article class=\"ds-card ds-card--hoverable\">\n  <span class=\"ds-badge ds-badge--accent\">新</span>\n  <h4 class=\"ds-serif ds-mt-3\">橄榄园笔记</h4>\n  <p class=\"ds-text-muted\">使用令牌的卡片，悬停浮起，深浅主题自适配。</p>\n  <a class=\"ds-btn ds-btn--primary ds-mt-4\" href=\"#\">阅读全文</a>\n</article>"},{"language":"text","snippet":"用 EDIC 设计系统，帮我做一个博客文章卡片列表，\n包含封面图、标题、摘要、日期和「阅读全文」按钮。"},{"language":"bash","snippet":"# 项目级安装（推荐）\nmkdir -p .claude/skills\n# 解压本 ZIP，将 edic-design-system 目录内容放入 .claude/skills/edic-design-system/\n# 或直接放置 SKILL.md 文件\n\n# 全局安装\nmkdir -p ~/.claude/skills/edic-design-system\ncp SKILL.md ~/.claude/skills/edic-design-system/"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: edic-design-system\nslug: edic-design-system\ndisplayName: EDIC 设计系统\nversion: 2.8.0\ndescription: >-\n  Generate UI components, full pages, documents, emails, and assets aligned\n  with the EDIC design system (Editorial × Olive Green, OKLch tokens for\n  web/UI, dark-mode ready, CJK-optimized; emails use compatible static styles).\n  Use this skill whenever the user asks\n  to build, style, or refactor anything for EDIC, or explicitly requests the\n  EDIC / \"editorial olive\" design system. Output token-driven, accessible,\n  framework-agnostic HTML/CSS.\nlicense: MIT-0\n---\n\n# EDIC Design System Skill\n\nWhen this skill is active, every visual artifact you produce — components, pages,\nlanding sections, documentation, emails, reports — should follow the EDIC\ndesign system. **Prefer design tokens (CSS custom properties) for web/UI.\nNever hard-code magic numbers. Use compatible static styles for email.**\n\n## Manifest-First Workflow\n\nWhen this skill is active for an EDIC project, use manifest-first behavior:\n\n1. Read `edic-manifest.json` for the authoritative deliverable, token,\n   component, icon, validator, and constraint list.\n2. Read `tokens.json`, `icons.json`, and `AGENT-GUIDE.md` when generating or\n   auditing UI.\n3. Read `docs/component-gap-audit.md` and `docs/component-2.0-backlog.md`\n   before proposing, adding, or claiming completion of a component.\n4. Read `skills/edic-design-system/references/CONTRACTS.md` before creating a\n   new component or improving an interactive component.\n5. Read `references/ANTI-PATTERNS.md` before fixing or reviewing generated UI.\n\nComponent generation rules:\n\n- Existing manifest core components must use the documented `ds-*` class family\n  and examples; do not invent parallel class names.\n- New components must follow the component contract in\n  `references/CONTRACTS.md`.\n- Add CSS to `styles.css` before adding HTML examples in `docs.html`.\n- Use token-only visual values and include dark-mode coverage.\n- Include ARIA metadata and keyboard behavior for interactive components.\n- Mark a task complete only after `npm run audit` passes.\n\n## Design character\n- **Editorial × Olive Green**: magazine-grade restraint, generous whitespace,\n  serif headings + sans body, a warm paper background, and a confident — never\n  loud — olive-green accent.\n- Reference moods: Monocle (typographic restraint), Stripe (warm utility),\n  Mercury (refined calm).\n\n## Hard rules (anti-patterns)\n- Define web/UI colors in **OKLch**; mix with `color-mix(in oklch, …)`.\n- Use `var(--ds-*)` tokens for every web/UI visual value. No hard-coded `#fff` / `16px`.\n- Dark mode never uses pure black `#000` — use warm grey `oklch(17% 0.014 80)`.\n- In dark mode, lighten the accent ~5–10% vs. light mode.\n- Components use base + modifier: `ds-btn` / `ds-btn--primary`.\n- No inline `style=` except genuinely dynamic values (e.g. stagger `--d`).\n- Icon-only buttons need `aria-label`; decorative SVGs need `aria-hidden=\"true\"`.\n- Prefer semantic aliases such as `--ds-co"},{"path":"README.md","content":"# EDIC Design System Skill Package v2.8.0\n# EDIC 设计系统 Skill 技能包 v2.8.0\n\n[![License: MIT-0](https://img.shields.io/badge/License-MIT%200-blue.svg)](https://spdx.org/licenses/MIT-0.html)\n[![Version](https://img.shields.io/badge/Version-2.0.0-green.svg)](https://edic.cgartlab.com/)\n\n---\n\n## 适用场景 Scope\n\n**✅ 适合以下场景：**\n\n- 内容型网站、博客、文章排版\n- 企业官网、品牌落地页\n- 内部报告、多页文档\n- 邮件模板、通讯设计\n- 个人主页、作品集\n- 需要精致 CJK（中日韩）排版的项目\n- AI 辅助生成的界面原型\n\n**❌ 目前不适合以下场景：**\n\n- 游戏 UI（高对比/霓虹/像素风格）\n- 重 Glassmorphism 风格\n- 移动端原生应用（iOS/Android）\n- 需要完全定制品牌色的项目（非橄榄绿体系）\n\n> 以上不适用场景未来不排除支持，欢迎在 [GitHub Issues](https://github.com/cgartlab/edic-design-system/issues) 提需求。\n\n---\n\n## 快速上手 Quick Start\n\n无论使用哪种 AI 工具，三步即可产出符合 EDIC 规范的界面：\n\n**第一步：安装 Skill**（见下方各平台安装说明）\n\n**第二步：用自然语言描述需求**\n\n```\n用 EDIC 设计系统，帮我做一个博客文章卡片列表，\n包含封面图、标题、摘要、日期和「阅读全文」按钮。\n```\n\n**第三步：粘贴输出，即刻预览**\n\n将 AI 返回的 HTML 片段粘贴进项目，确保已引入 `styles.css` 和 `scripts.js`，刷新即可预览 EDIC 样式。\n\n> **Prompt 技巧：** 可以在描述需求时附加风格关键词，例如「偏杂志排版」「需要暗色模式」「CJK 中文优先」，Agent 会优先参考对应的组件和令牌。\n\n---\n\n## 安装 Installation\n\n### Claude Code / Claude Code\n\n```bash\n# 项目级安装（推荐）\nmkdir -p .claude/skills\n# 解压本 ZIP，将 edic-design-system 目录内容放入 .claude/skills/edic-design-system/\n# 或直接放置 SKILL.md 文件\n\n# 全局安装\nmkdir -p ~/.claude/skills/edic-design-system\ncp SKILL.md ~/.claude/skills/edic-design-system/\n```\n\n> **验证安装成功**：将以下最小 demo 保存为 `test.html`，用浏览器打开——看到橄榄绿按钮即表示样式加载正常；\n> 同时在 Claude Code 中发送「用 EDIC 设计系统设计一个按钮」，Claude 应使用 `ds-btn ds-btn--primary` 类名并遵循 `--ds-*` 令牌规范。\n\n```html\n<!doctype html>\n<html lang=\"zh-CN\" data-theme=\"\">\n  <head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>EDIC 安装验证</title>\n    <link rel=\"stylesheet\"\n      href=\"https://cdn.jsdelivr.net/gh/cgartlab/edic-design-system@main/styles.css\">\n  </head>\n  <body style=\"padding: 2rem\">\n    <button class=\"ds-btn ds-btn--primary\">EDIC 安装成功 ✓</button>\n    <script\n      src=\"https://cdn.jsdelivr.net/gh/cgartlab/edic-design-system@main/scripts.js\">\n    </script>\n  </body>\n</html>\n```\n\n> **中文字体说明：** EDIC 使用系统字体栈（`\"Noto Sans SC\"`、`\"Noto Serif SC\"`），无需额外安装。\n> 若目标环境未预装 Noto SC（如部分 Windows / Linux），可在 `<head>` 中补充以下代码确保稳定渲染：\n>\n> ```html\n> <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n> <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n> <link href=\"https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@400;700&display=swap\" rel=\"stylesheet\">\n> ```\n\n### Cursor\n\n```bash\n# 方式一：写入项目级规则（推荐）\n# 文件：.cursor/rules/edic-design-system.md\n# 内容：复制 SKILL.md 的设计原则和组件规范部分\n\n# 方式二：复制到全局 skills\nmkdir -p ~/.cursor/skills/edic-design-system\ncp SKILL.md ~/.cursor/skills/edic-design-system/\n```\n\n### Kiro\n\n```bash\n# 写入 steering 文件\nmkdir -p .kiro/steering\n# 复制 SKILL.md 设计规范到 .kiro/steering/edic-design-system.md\n```\n\n### GitHub Copilot\n\n```bash\n# 写入项目说明\n# 文件：.github/copilot-instructions.md\n# 内容：复制 SKILL.md 的设计原则、令牌和组件规范\n```\n\n### ChatGPT / Gemini / 其他 LLM\n\n将 `SKILL.md` 的核心内容（设计原则 + 令牌速查 + 组件类名表）复制到：\n- ChatGPT：Settings → Custom Instructions →"},{"path":"_meta.json","content":"{\n  \"ownerId\": \"kn7a3fym68pryr0r1q29ybrp8181qsdg\",\n  \"slug\": \"edic-design-system\",\n  \"version\": \"2.8.0\",\n  \"publishedAt\": 1790245237332\n}"},{"path":"references/ANTI-PATTERNS.md","content":"# EDIC Anti-Patterns & Correct Replacements\n# 反模式 × 正确替代对照表\n\n> Loaded on demand when validating or correcting generated code.\n> Each entry shows the wrong pattern, why it fails, and the exact replacement.\n\n---\n\n## Color Anti-Patterns\n\n### ❌ Hard-coded hex / rgb / hsl colors\n\n```css\n/* ❌ Wrong */\ncolor: #333;\nbackground: #fff;\nbackground: rgb(255, 255, 255);\nborder-color: hsl(0 0% 90%);\n```\n\n```css\n/* ✅ Correct — use semantic color tokens */\ncolor: var(--ds-color-fg);\nbackground: var(--ds-color-surface-raised);\nbackground: var(--ds-color-surface-raised);\nborder-color: var(--ds-color-border);\n```\n\n**Why:** Hex/rgb/hsl values do not update in dark mode. `--ds-*` tokens switch\nautomatically via `[data-theme=\"dark\"]`.\n\n---\n\n### ❌ Bare `oklch()` outside `:root` / `[data-theme]` / `@keyframes`\n\n```css\n/* ❌ Wrong — bare oklch in a component rule */\n.my-card {\n  background: oklch(97% 0.012 80);\n  color: oklch(20% 0.02 60);\n}\n```\n\n```css\n/* ✅ Correct — reference the token */\n.my-card {\n  background: var(--ds-color-bg);\n  color: var(--ds-color-fg);\n}\n```\n\n**Why:** Bare `oklch()` in component rules bypasses the token system and breaks\ndark mode. Bare oklch is only allowed in `:root` and `[data-theme=\"dark\"]` token\ndeclarations, and in `@keyframes`.\n\n---\n\n### ❌ Pure black in dark mode\n\n```css\n/* ❌ Wrong */\n[data-theme=\"dark\"] .surface { background: #000; }\n[data-theme=\"dark\"] .surface { background: oklch(0% 0 0); }\n```\n\n```css\n/* ✅ Correct — warm dark base */\n[data-theme=\"dark\"] .surface { background: var(--ds-color-bg); }\n/* which resolves to: oklch(17% 0.014 80) — warm grey, not cold black */\n```\n\n---\n\n### ❌ Using light-mode accent directly in dark mode\n\n```css\n/* ❌ Wrong — olive-400 light value is too dark on dark backgrounds */\n[data-theme=\"dark\"] .accent-text { color: oklch(52% 0.08 115); }\n```\n\n```css\n/* ✅ Correct — dark-mode accent is 5–10% lighter */\n[data-theme=\"dark\"] .accent-text { color: var(--ds-accent); }\n/* which resolves to: oklch(57% 0.065 115) in dark mode */\n```\n\n---\n\n## Spacing Anti-Patterns\n\n### ❌ Hard-coded pixel or rem values\n\n```css\n/* ❌ Wrong */\npadding: 16px;\nmargin-top: 24px;\ngap: 8px;\npadding: 1rem;\n```\n\n```css\n/* ✅ Correct — use spacing tokens */\npadding: var(--ds-space-4);      /* = 16px = 1rem */\nmargin-top: var(--ds-space-6);   /* = 24px = 1.5rem */\ngap: var(--ds-space-2);          /* = 8px = 0.5rem */\npadding: var(--ds-space-4);      /* same value, correct source */\n```\n\n**Quick mapping:**\n`4px` → `--ds-space-1` · `8px` → `--ds-space-2` · `12px` → `--ds-space-3` ·\n`16px` → `--ds-space-4` · `24px` → `--ds-space-6` · `32px` → `--ds-space-8`\n\n---\n\n## Inline Style Anti-Patterns\n\n### ❌ Static inline `style=` attributes\n\n```html\n<!-- ❌ Wrong — static values bypass token system -->\n<div style=\"padding: 16px; background: #fff; border-radius: 8px;\">\n```\n\n```html\n<!-- ✅ Correct — use component classes -->\n<div class=\"ds-card\">\n\n<!-- ✅ Also correct — inline style only for genuinely dynamic values -->\n<div class=\"ds-reveal\" style=\"--d: 0."},{"path":"references/EXAMPLES.md","content":"# EDIC Component HTML Examples\n# 高频复合组件 HTML 结构示例\n\n> This file is loaded on demand when complex component structure is needed.\n> All examples assume `styles.css` and `scripts.js` are linked.\n\n---\n\n## 1. Glass Card (`ds-glass-card`)\n\nThe glass card requires a colored background parent (`ds-glass-demo-bg`) to show the\nbackdrop-filter effect. `ds-glass-meta` lives **inside** `ds-glass-card` as the footer row.\n\n```html\n<!-- ✅ Correct: colored parent + card + inner meta -->\n<div class=\"ds-glass-demo-bg\">\n  <div class=\"ds-glass-card\">\n    <span class=\"ds-badge ds-badge--accent\">新</span>\n    <h4>橄榄园笔记</h4>\n    <p>玻璃卡片需要彩色背景父容器才能显示毛玻璃效果。</p>\n    <div class=\"ds-glass-meta\">\n      <span class=\"ds-caption ds-text-muted\">2026-06</span>\n      <button class=\"ds-btn ds-btn--ghost\">阅读全文</button>\n    </div>\n  </div>\n</div>\n\n<!-- ❌ Wrong: ds-glass-card placed directly on a plain white page —\n     backdrop-filter has nothing to blur, card looks like a plain white box -->\n```\n\nSize modifiers: add `ds-glass-card--sm` (padding 1rem) or `ds-glass-card--lg` (padding 2rem).\n\n---\n\n## 2. Docs Layout (`ds-docs`)\n\nTwo-column layout: fixed sidebar left, scrollable main right.\n`ds-docs-aside` holds `ds-pagenav`; `ds-docs-main` holds `ds-prose` content.\n\n```html\n<div class=\"ds-docs\">\n  <aside class=\"ds-docs-aside\">\n    <nav class=\"ds-pagenav\" aria-label=\"页面导航\">\n      <details class=\"ds-pagenav-disclosure\" open>\n        <summary class=\"ds-pagenav-summary\">\n          <span class=\"ds-pagenav-chevron\">▶</span> 目录\n        </summary>\n        <ol class=\"ds-pagenav-list\">\n          <li>\n            <a href=\"#section-1\" class=\"ds-pagenav-link ds-pagenav-link--active\">\n              <span class=\"ds-pagenav-num\">01</span>\n              <span class=\"ds-pagenav-text\">介绍</span>\n            </a>\n          </li>\n          <li>\n            <a href=\"#section-2\" class=\"ds-pagenav-link\">\n              <span class=\"ds-pagenav-num\">02</span>\n              <span class=\"ds-pagenav-text\">安装</span>\n            </a>\n          </li>\n        </ol>\n      </details>\n    </nav>\n  </aside>\n\n  <main class=\"ds-docs-main ds-prose\" id=\"ds-main\">\n    <section id=\"section-1\">\n      <h1>介绍</h1>\n      <p>正文内容区域，自动控制行宽在 65–75 字符。</p>\n    </section>\n    <section id=\"section-2\">\n      <h2>安装</h2>\n      <p>引入 <code>styles.css</code> 即可。</p>\n    </section>\n  </main>\n</div>\n```\n\n---\n\n## 3. Navbar (`ds-navbar`)\n\nThe navbar uses a `::before` pseudo-element for the frosted glass background —\n**do not add `background` directly on `.ds-navbar`**. JS adds `--scrolled` on scroll.\n\n```html\n<nav class=\"ds-navbar\" role=\"navigation\" aria-label=\"主导航\">\n  <div class=\"ds-navbar-inner\">\n    <!-- Brand -->\n    <a href=\"/\" class=\"ds-navbar-brand\">\n      <svg width=\"24\" height=\"24\" aria-hidden=\"true\"><!-- logo mark --></svg>\n      EDIC\n    </a>\n\n    <!-- Links (hidden on mobile; shown via mnav-panel JS) -->\n    <div class=\"ds-navbar-links\" id=\"mnav-panel\">\n      <a href=\"/\" class=\"ds-navbar-link ds-navbar-link--active\" aria-current=\"page\">首页<"}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"Generate UI components, full pages, documents, emails, and assets aligned with the EDIC design system (Editorial × Olive Green, OKLch tokens for web/UI, dark-mode ready, CJK-optimized; emails use compatible static styles). Use this skill whenever the user asks to build, style, or refactor anything for EDIC, or explicitly requests the EDIC / \"editorial olive\" design system. Output token-driven, accessible, framework-agnostic HTML/CSS. Skill: EDIC 设计系统 Owner: cgartlab Summary: Generate UI components, full pages, documents, emails, and assets aligned with the EDIC design system (Editorial × Olive Green, OKLch tokens for web/UI, dark-mode ready, CJK-optimized; emails use compatible static styles). Use this skill whenever the user asks to build, style, or refactor anything for EDIC, or explicitly requests the EDIC / \"editorial olive\" design system. Ou","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":2096,"uniquenessScore":45,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-10T23:56:23.154Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-10T23:56:23.154Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-11T03:54:31.003Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}