~600 W3C DTCG Tokens
Standard-compliant design tokens that work across Figma, CSS, iOS, Android, and every major platform. Semantic, layered, production-ready.
v0.4.2 — Open Source
190 Rules. 55 Sectors.
Zero Guesswork.
Other design systems give you tokens and wish you luck. This one cross-references 20 databases to recommend palettes, components, and anti-patterns — by industry.
55 Sectors
190 Rules
84 Anti-patterns
WCAG 2.2 AA Validated
Interactive Demo
Live Playground
Type a product description and watch the engine recommend palettes, components, and design rules in real-time.
This is a preview with pre-computed results. Install the CLI for the full BM25 recommendation engine: npx @mkatogui/universal-design-system search
Try these examples
Switch palette
Recommended Palette
Recommended Components
Reasoning
Anti-patterns to Avoid
Three Steps
How It Works
From product description to shipped design system in seconds. No configuration needed.
Describe Your Product
Tell the engine what you are building. A fintech dashboard, a kids learning app, a healthcare portal.
Engine Reasons
BM25 search cross-references 20 databases of industry rules, color psychology, typography, and anti-patterns.
BM25 searching
☐ products.csv → matched
☐ colors.csv → matched
☐ ui-reasoning.csv → 7 rules
☐ anti-patterns.csv → 3 warnings
☐ products.csv → matched
☐ colors.csv → matched
☐ ui-reasoning.csv → 7 rules
☐ anti-patterns.csv → 3 warnings
Ship It
Get implementable tokens, accessible components, and framework-ready code. Copy, paste, deploy.
<html data-theme="corporate">
/* ~600 design tokens ready */
/* WCAG AA validated */
<button class="uds-btn">
/* ~600 design tokens ready */
/* WCAG AA validated */
<button class="uds-btn">
Structural Palettes
9 Palettes, One Attribute
Switch the entire visual language of your product with a single data-theme attribute. Every palette passes WCAG AA.
Capabilities
Everything You Need
Not just tokens and components. A complete design intelligence platform for AI-powered development.
43 Accessible Components
BEM-named, CVA-compatible components with full ARIA support, keyboard navigation, and focus management baked in.
BM25 Reasoning Engine
Cross-references 20 CSV databases of industry rules, color psychology, typography, and anti-patterns to reason about design decisions.
9 Structural Palettes
From AI Futuristic to Corporate Enterprise. Switch the entire visual identity with one data-theme attribute. No rebuild required.
100+ Industry Rules
Sector-specific design intelligence. Finance demands navy and serif. Healthcare needs calming blue. Education loves illustration. The engine knows.
20+ AI Platform Support
Works with Claude Code, Cursor, GitHub Copilot, Kiro, Windsurf, Gemini Code Assist, and every major AI coding assistant.
Comparison
Why Universal Design System?
Not all design systems are created equal. See what sets UDS apart from generic recommendations.
| Feature | Universal DS | Others |
|---|---|---|
| Implementable tokens | ✓ W3C DTCG + CSS variables | ✗ Just recommendations |
| WCAG validation | ✓ Automated contrast validation (108 pairs) | ✗ Manual or none |
| Runtime palette switching | ✓ data-theme attribute | ✗ Rebuild required |
| Reasoning engine | ✓ BM25 + 20 databases | ✗ Relies on AI model |
| Framework output | ✓ React, Vue, Svelte, Tailwind | ✗ Generic only |
| Industry-specific rules | ✓ 100+ sector rules | ✗ One-size-fits-all |
| Anti-pattern detection | ✓ Context-aware warnings | ✗ None |
Get Started
Up and Running in 30 Seconds
Choose your workflow. Works with any AI coding assistant, CLI, or plain HTML.
# Just ask Claude Code in natural language
"Build me a fintech dashboard using the
Universal Design System. Use the corporate
palette with accessible components."
# Claude reads the UDS skill, searches the
# BM25 engine, and generates production code
# with the correct tokens and components.
# Install the Universal Design System
npx @mkatogui/universal-design-system install
# Search for design recommendations
npx @mkatogui/universal-design-system search "fintech dashboard"
# Generate a full design specification
npx @mkatogui/universal-design-system generate "healthcare portal"
<!-- Add a single data-theme attribute -->
<html data-theme="minimal-saas">
<!-- ~600 CSS custom properties are now active -->
<style>
.my-card {
background: var(--color-bg-primary);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
padding: var(--space-6);
}
</style>
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: {
primary: 'var(--color-brand-primary)',
secondary: 'var(--color-brand-secondary)',
accent: 'var(--color-brand-accent)',
}
},
borderRadius: {
DEFAULT: 'var(--radius-md)',
}
}
}
}
Trusted By AI Platforms
Built for the AI Coding Era
Reverse-engineered from 100 modern websites. Works with every major AI coding assistant.
Claude
Cursor
Copilot
Kiro
Windsurf
Gemini
★ Open Source
MIT License
v0.4.2
WCAG 2.2 AA Validated