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
Interactive Playground
Adjust Breakpoints
xs
px
sm
px
md
px
lg
px
xl
px
Window Width0px
Active TokenXS
Resize your browser window to see the active token change in real-time.
Interactive Demo: Typography
Theme Config (Live Typography)
h1: {
"fontSize": "xs(space(7)) md(space(8)) lg(space(9)) xl(space(10))",
"fontFamily": "Inter"// inherited
"fontWeight": "700"
"lineHeight": "xs(1.2) md(1.3)"
"letterSpacing": "-0.02em"
"textTransform": "none"// inherited
"textDecoration": "none"// inherited
"fontStyle": "normal"// inherited
"marginBlockStart": "auto"// inherited
"marginBlockEnd": "0.2em"
}
CSS Usage
.any-class{@ds-typo(h1);}
Theme Configuration: The settings below define your JSON theme. Once configured in uxdsl.theme.json, the mixin above applies these responsive rules automatically.
Typography Showcase
h1
UXDSL: The Design System Language
h2
The Evolution of Styling
h3
Atomic vs Semantic
h4
The rise of design tokens
h5
Runtime adaptability
h6
Future of CSS generation
p
UXDSL bridges the gap between design tokens and CSS generation, allowing for a truly semantic and adaptable design system that scales with your application.
body
UXDSL provides a type-safe, token-aware styling experience that integrates seamlessly with modern frameworks.
spanInline token usage
caption
Figure 1: Token dependency graph
smallv1.0.0-beta
code
const answer = 42;pre
const theme = { colors: { primary: 'blue' } };