Design System Registry
The machine-readable, two-layer formal specification of every UI component. The DSR is the single source of truth that bridges AI intent and brand-compliant rendering.
The Data Contract
The DSR is not a component library. It is a formal contract — a structured data file that describes each component at two levels:
Layer A: Agent Layer — What it means, when it is effective, and what data it requires.
Layer B: Renderer Layer — How it looks, behaves, and adapts across devices.
The DSR is authored by humans but read by machines. It eliminates the need for manual layout coding by providing a strictly typed bridge between reasoning and execution.
The Two-Layer Model
Agent Layer
The reasoning metadata used by LLMs to select and populate components.
- Journey Stages (Awareness, Decision, etc.)
- Emotional States (Anxious, Exploratory)
- Content Schema (Zod Fields)
- Composition & Anti-Patterns
Renderer Layer
The visual and behavioral spec consumed by the frontend engine.
- Design Tokens (Spacing, Color, Type)
- Visual Variants (Dark, Light, Premium)
- Micro-interactions & Animations
- Responsive Breakpoint Overrides
Component Lifecycle
Adding a component is a formal process from intent to pixel. Each node must complete this validation cycle to ensure the generative engine remains stable and precise.
Need the full pipeline view?
Return to the architecture documentation for the high-level data flow and modular orchestration.