A type-safe, compile-time design system language that bridges the gap between design tokens and CSS implementation. Write expressive, token-aware styles that compile to optimized CSS.
See it in action
Theme Configuration: The settings below define your JSON theme. Once configured in uxdsl.theme.json, the mixin above applies these responsive rules automatically.
UXDSL: The Design System Language
The Evolution of Styling
Atomic vs Semantic
The rise of design tokens
Runtime adaptability
Future of CSS generation
UXDSL bridges the gap between design tokens and CSS generation, allowing for a truly semantic and adaptable design system that scales with your application.
UXDSL provides a type-safe, token-aware styling experience that integrates seamlessly with modern frameworks.
Figure 1: Token dependency graph
const answer = 42;const theme = { colors: { primary: 'blue' } };Token-Aware Colors: Use palette() to access semantic colors (primary, success, surface) and their variants (main, light, dark).