Élan Design System is a living example of human-AI co-evolution and harnessing. Unlike others, Élan's token architecture and documentation are designed convenient for an AI agent to read, generate, and self-correct with minimum human intervention.
Agent Harness Architecture
The harness that constrains and co-evolves with the AI agent — dual evaluation, 3-domain feedback routing, and guardrails that tighten with every repeated failure.
Dual evaluation (AI pre-check + human review) · 3-domain routing · Self-tightening guardrails
Agent-Native Semantic Tokens
A token naming convention designed for machine readability — every name fully describes its intent, so agents can generate and validate tokens without a lookup table.
Pick a color swatch to begin — the role auto-fills and available dimensions filter to valid combinations.
What element type the color applies to
Prominence level within its group
Adopted the Goldman Sachs property · role · emphasis hierarchy because each token name fully describes its intent. An AI agent can parse color.surface.brand.bold without a lookup table — the name IS the documentation.
Goldman Sachs–inspired property · role · emphasis naming · Machine-readable by default
Systemic Pattern Map
Patterns invisible to individual incidents become obvious in aggregate. Four categories hit the 3-strike threshold and promoted to hard guardrails.
47 incidents · 6 failure categories · Documented → Audited → Guardrailed
ScrollSpy — A Micro-Interaction Deep Dive
One component, 7 anti-patterns, 4 iterations. Click and drag share the same pointer — a 3px dead zone discriminates intent.
7 anti-patterns · AP-011 pointer mapping · AP-012 dead zone · AP-031 Framer Motion transform conflict