EDIC Design System

Problem it solves

LLMs often generate pages with hard-coded colors, type sizes, and spacing, causing inconsistent light and dark output, broken component hierarchy, and missing accessibility. EDIC Design System moves visual constraints into generation rules, requiring components, pages, docs, emails, and reports to follow the same design tokens and component classes instead of ad-hoc styles.

How it works

It first selects a page skeleton by scenario, such as landing page, docs, blog, résumé, or report, then enforces section rhythm: alternate ds-section and ds-section--alt, never skip heading levels, and include a skip link plus semantic landmarks. Colors must use var(--ds-*) and OKLch mixing; dark mode avoids pure black and uses a warm grey. Spacing, radius, shadow, type scale, and motion all come from tokens. Components use BEM-style names such as ds-btn ds-btn--primary; icon buttons require aria-label, and decorative SVGs require aria-hidden="true".

Boundaries

It fits runnable HTML fragments, especially design-system-driven pages, docs pages, blogs, reports, and landing pages. Light theme is default, and the same markup should work under [data-theme="dark"]; email output must use inline sRGB styles only. Inline styles are allowed for runtime-dynamic values, but they must not replace tokens; custom animation should respect prefers-reduced-motion.