DLS-Lead is a design system your AI tools can actually read. 100+ production-grade components in Figma and React, connected by a 4-layer DTCG-compliant token architecture that works for human designers, developers, and AI coding agents.
100+ components with auto-layout, variants, and component properties. Each with all interactive states.
Browse interactive stories in Storybook, test props and states live, grab code from GitHub.
Toggle between light and dark and every component adapts automatically through token references.
DTCG-compliant tokens organized in 4 cascading layers. Change a primitive once. Every component updates automatically. All exportable as JSON.
Structured token definitions and component specs that AI coding agents can read. Your AI stops hallucinating colors and spacing. It looks them up instead.
Token references across all layers, component API docs, usage guidelines, architectural explanations.
❌ UI Kits are fast to start, but hard to scale. Fine for prototypes, painful for production.
❌ Enterprise UI component libraries are powerful, but heavy. Require months of customization to feel like your product.
❌ AI coding agents generate UI fast, but without tokens to reference, every AI-generated component hallucinates. Visual debt accumulating at machine speed.
DLS-Lead is system infrastructure. Not a UI kit and not a heavy framework. It provides a 4-layer token architecture that enables safer theming, predictable overrides, scalable UI, and AI-readable token definitions.
When a developer builds a component, they reference the token system. When an AI agent builds a component, it reads the same token system. The design decision was made once by a human. Everything else looks it up.
From raw values to components, every layer of the system is documented and ready to use in both Figma and React
Try free version ►// 4-layer architecture: Primitives → Semantics → State → Component
{
"color": {
"primary": {"500": { "$value": "#6B4C9A", "$type": "color" }
},
"neutral": {"900": { "$value": "#0D0F12", "$type": "color" }
}
}
}Each component is built in Figma with variants and auto-layout, coded in React, documented with usage guidelines, and wired to the token system from primitives through to component-level tokens.
button | button group | input | fields | checkbox | radiobutton | switcher |slider | chips | badge| kbd.
alert | alert dialog | dialog | tooltips | spinner | skeleton | empty | progress bar
accordion | tabs | breadcrumbs | pagination | context menu | scroll | separator
table | list | item | chart | calendar| carousel | avatar| comment
sidebar | top bar | forms
assets | parts | resizable
Each layer references the one below it. Change a primitive, and it flows through semantics, state, and component layers automatically.
→ Change your brand foundation instantly
Raw values like colors, spacing, and typography scales live here. Update a primitive once and every semantic style and component updates automatically. This is where your brand identity lives.
The base palette: Neutral (0–900) |Primary (50–900)|Semantic scales for Info, Success, Warning, and Danger.
Additional palettes: Purple |Violet |Pink |Blue |Teal |Yellow |Green | Gold | Cinnamon | Orange.
Opacity tokens: Light|Dark overlay use cases.
→ Safer theming without breaking components
Meaning-based tokens like background.surface or text.primary reference primitives. Switch themes by remapping this layer. Components don't change. When an AI agent reads var(--color-text-primary), it gets the right value for whichever theme is active.
→ Consistent interaction across the whole product
Hover, active, disabled, and focus states are defined centrally. Every component inherits the same interaction logic automatically. No more "the button hover is different on the settings page."
→ Predictable overrides and scalable components
Component-level tokens define things like button padding, border radius, or background.Adjust one component safely without affecting anything else.
Unlike UI kits built for prototypes and marketing sites, and enterprise UI libraries designed for massive applications, DLS-Lead is built specifically for SaaS dashboards and product interfaces. And it's the only option structured for AI coding workflows.
Want to see DLS-Lead in action? Start with the Community kit. Evaluate the architecture, test the token cascade, see how components connect. Upgrade when you need the full library.
What's included:
✔ All 4 layers, all color primitives, typography, spacing, shadows
✔ 10 core Figma components, including Alert, Alert Dialog, Avatar, Badge, Button, Checkbox, Input-Fields, Kbd, Radiobutton, Switcher
✔ Light & Dark theme
✔ 10 matching React components in Storybook
✔ Full documentation site access
✔ GitHub token package (npm installable)
✔ AI-agent spec files for the included components
What's included:
✔ Everything in Community
✔ All 100+ Figma components with full variant sets
✔ All 100+ React components in Storybook
✔ Layout primitives: Sidebar, Top Bar, page shells
✔ 5 starter templates: Dashboard, Settings, Auth, Profile, Empty States
✔ Dark mode — all components and tokens
✔ All interactive states: hover, active, disabled, focus
✔ Complete AI-agent spec files + prompt library for Claude Code and Cursor
✔ MCP server configuration for AI coding workflows
✔ 12 months of updates & new components
✔ Priority support via email
Every piece references the same token architecture, so design, code, documentation, and AI agents stay aligned.
See how the tokens cascade, how the components connect, how the system thinks. Test it with your AI coding tools. Upgrade to Pro when you're ready for the full library.
Done-with-you design system sprints, starting at $3K.
DLS-Lead the kit gives you a ready-made foundation. But if your team needs a custom design system tailored to your product, your tech stack, and your AI workflow, I can build that too.
DLS-Lead is a design system infrastructure built for SaaS teams. It includes 100+ production-grade components in Figma and React, connected by a 4-layer DTCG-compliant token architecture (Primitives → Semantics → State → Component).
Unlike UI kits, DLS-Lead provides full token architecture, code sync via Storybook, comprehensive documentation, and AI-agent-readable specifications. It's designed for dashboards, admin panels, and complex product interfaces (not marketing sites).
Material UI, Ant Design, and Chakra UI are component libraries. They provide pre-built UI components with their own design language. DLS-Lead is system infrastructure. It provides a neutral design language with a 4-layer cascading token architecture that you customize to your brand.
The key differences: DLS-Lead uses DTCG-compliant tokens (the emerging industry standard), offers centralized state tokens (instead of component-level state definitions), and provides structured specifications that AI coding agents can consume directly.
You change the primitives (colors, spacing, typography) and every component updates automatically. Your product looks like yours, not like DLS-Lead.
AI-ready means the design system's tokens, component definitions, and usage guidelines are structured in a format that AI coding agents (Claude Code, Cursor, v0, and similar tools) can read and reference during code generation.
Without structured tokens, AI agents fabricate values. They hallucinate colors, spacing, and component states that look plausible but don't match your system.
DLS-Lead's DTCG-compliant token JSON and component spec files give AI agents a closed set of values to choose from. The AI looks up the correct token instead of guessing.
DLS-Lead organizes design tokens in four cascading layers.
Each layer references the one below it, so changes cascade automatically. Update a primitive color, and it flows through semantics, state, and component layers without manual intervention.
DTCG stands for the Design Tokens Community Group, a W3C community group working on a standard format for design tokens. DTCG-compliant tokens use a standardized JSON format ($value, $type) that can be read by any tool that supports the specification, including Figma, Style Dictionary, and AI coding agents. This means DLS-Lead's tokens are portable: they work in your current tools and any future tools that adopt the standard.
DLS-Lead is designed for SaaS teams building dashboards, admin panels, settings pages, and complex application interfaces. It works best for teams that use React and Figma, need tokens for consistency, and want a foundation they can customize rather than building from scratch.
It's not designed for marketing sites, landing pages, or mobile-only applications. If you're unsure, start with the free Community kit (it includes 10 core components and the full token architecture, so you can evaluate the system before purchasing).
Yes. The 4-layer architecture is designed for exactly this. Swap the primitive layer — your brand colors, typography, spacing scale — and every component updates automatically through the cascading token references. The semantic, state, and component layers provide the structural consistency while the primitives define the visual identity.
DLS-Lead includes structured spec files and DTCG-compliant token JSON that AI coding agents can read at the start of a coding session.
The Pro kit includes a prompt library for Claude Code and Cursor, plus MCP (Model Context Protocol) server configuration. When your AI agent generates a component, it references DLS-Lead's token system instead of fabricating values so the output matches your design system automatically.
The free Community kit includes 10 core components, the full 4-layer token architecture, light and dark themes, matching React components in Storybook, and GitHub token package. It's enough to evaluate the system and build essentials.
The Pro kit ($79) adds all 100+ components, layout primitives (Sidebar, Top Bar, page shells), 5 starter templates, all interactive states, AI-agent spec files and prompt library, MCP configuration, 12 months of updates, and priority support.
Yes. If your product needs a custom design system tailored to your specific components, tech stack, and workflows, I offer done-with-you Design System Sprints starting at $3K.
It's a 4-week collaboration: audit, build, and handoff.
Other services include off-the-shelf design system customization ($1.5K+), design system audits, and consulting ($150/hr).
Book a free 30-minute call to discuss your situation.
