DLS-LEAD
One design system for designers and developers
Designed for SaaS teams building dashboards, admin panels, and complex application UI. Production-grade.
Designed for SaaS teams building dashboards, admin panels, and complex application UI. Production-grade.
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 four cascading layers. All exportable.
Token references across all layers, component API docs, usage guidelines, architectural explanations.
Sidebar, Top Bar, and page-level layout primitives. Dashboards, settings pages, auth flows – built-in.
❌ UI Kits are fast to start, but hard to scale.
❌ Enterprise UI component libraries are powerful, but heavy.
DLS-Lead is a system infrastructure. Not a UI kit and not a heavy framework. It provides a structured token architecture that enables safer theming, predictable overrides, scalable UI, and AI-readable token structures.
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.
Safer theming without breaking components
Meaning-based tokens like background.surface or text.primary reference primitives. If you switch themes by remapping this layer, components won't change.
Consistent interaction across the whole product
Hover, active, disabled, and focus states are defined centrally. Every component inherits the same interaction logic automatically.
Predictable overrides and scalable components
Component-level tokens define things like button padding, border radius, or background.Adjust components safely without affecting the rest of the system.
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
Want to see DLS-Lead in action? Start with the Community kit. Upgrade when you need the full library, templates, dark mode, and ongoing updates.
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
✔ Light & Dark theme
✔ 10 matching React components in Storybook
✔ Full documentation site access
✔ GitHub token package (npm installable)
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
✔ 12 months of updates & new components
✔ Priority support via email
Every piece references the same token architecture, so design, code, and documentation stay aligned.
See how the tokens cascade, how the components connect, how the system thinks. 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, we can do that too.
