UX-DSL
UX Design System Language
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.
Quick Start
Get up and running with UX-DSL in minutes.
Documentation
Explore the comprehensive guides and API references.
Palette
Explore the color system and semantic tokens.
Typography
Master the fluid typography system.
Densities
Manage spacing and sizing across different contexts.
Breakpoints
Responsive design breakpoints and layout rules.
See it in action
Interactive Demo: Typography
CSS Usage
.any-class{@ds-typo(default);}
Theme Configuration: The settings below define your JSON theme. Once configured in uxdsl.theme.json, the mixin above applies these responsive rules automatically.
default: {
"fontSize": "xs(16px)",
"fontFamily": "Inter"
"fontWeight": "400"
"lineHeight": "1.5"
"letterSpacing": "normal"
"textTransform": "none"
"textDecoration": "none"
"fontStyle": "normal"
"marginBlockStart": "auto"
"marginBlockEnd": "auto"
}
Interactive Demo: Palette
Background
Text
Live Palette Preview
CSS Usage
.my-element{
background:palette(primary-main);
color:palette(primary-contrast);
}
Token-Aware Colors: Use palette() to access semantic colors (primary, success, surface) and their variants (main, light, dark).
Palette Explorer
Primary
Brand actions and key highlightsmain
light
dark
contrast
Select Tone
Primary
Secondary
Tertiary
Success
Info
Warning
Error
Dark
Neutral
Light
Surface
Density & Spacing
7
Auto Width
Content
density(1)
density(2)
density(3)
density(4)
density(5)
density(6)
density(7)
density(7): {
"value": "xs(space(7)) md(space(8)) xl(space(9))"
}