UX-DSL is a PostCSS-based design system language that supercharges your productivity by embedding responsive and theme-aware tokens directly into your workflow.
By combining a pleasant, CSS-like syntax with the raw power of SCSS, it delivers a developer experience that is both intuitive and robust. UX-DSL compiles at build time for lightning-fast, zero-runtime-overhead performance, while a dedicated runtime plugin enables instant token updates for dynamic theming.
It ensures consistent design constraints where you need them—handling typography, spacing, and surfaces automatically—without sacrificing the creative liberty and advanced features that SCSS offers.
A type-safe, compile-time design system language that bridges the gap between design tokens and CSS implementation.
.uxdsl-card {
@ds-surface (contained);
width: xs(100%) md(400px);
border-radius: radius(3);
box-shadow: shadow(3);
transition: all 0.2s;
overflow: hidden;
}
.card-header {
background: linear-gradient(135deg, palette(primary-main), palette(primary-dark));
padding: density(6);
display: grid;
place-items: center;
}
.logo-circle {
@ds-surface (contained light);
width: density(10);
height: density(10);
border-radius: radius(full);
display: grid;
place-items: center;
box-shadow: shadow(2);
}
.card-logo {
width: 60%;
height: auto;
}
.card-body {
padding: density(5);
text-align: center;
display: flex;
flex-direction: column;
gap: density(3);
}
.card-title {
@ds-typo (h5);
color: palette(primary-main);
}
.card-desc {
@ds-typo (body);
color: palette(primary-main);
}
.card-actions {
padding: density(4);
border-top: border(1);
display: flex;
gap: density(2);
}
.btn-primary {
@ds-button (contained primary);
width: 100%;
justify-content: center;
}
.btn-secondary {
@ds-button (outlined neutral);
width: 100%;
justify-content: center;
}