Guides
2026-10-12 • 8 min read
The DESIGN.md Specification: How Agents Follow Design Systems Without Hallucinating
Our exact methodology for encoding design tokens, typography scales, and anti-slop rules into LLM-friendly markdown files.
When you ask an AI model to build a web page without design rules, it defaults to what we call "AI template slop": purple-blue gradients, rounded pill buttons, drop shadows as decoration, and centered text on every section.
The DESIGN.md Format
Our DESIGN.md specification is an exhaustive, deterministic design system document placed at the root of every stack kit. It defines:
- Strict Typography: Inter for UI, JetBrains Mono for metadata, Newsreader italic as the single signature accent. Tight tracking (-0.03em on hero, -0.02em on titles).
- Exact Geometry: 8pt spacing scale, 40px buttons with 6px radius, 8px card radius with 22px padding.
- Color Discipline: Warm ink (#12140F) and brand orange (#E85D26) restricted to at or under 5% of any screen.
- The Anti-Slop Rules: Zero gradients, zero glass blur except sticky header, zero glow shadows, zero emojis as icons.
Result: By encoding these rules directly into the agent's context, every generated page matches the visual quality of Linear, Notion, or Stripe Docs.
UF
Umar Farooq
AuthorSenior Full-Stack & Security Engineer. Creator of TechTalks Stack Kits.