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
UX-DSL
A type-safe, compile-time design system language that bridges the gap between design tokens and CSS implementation.
CardComponent.uxdsl
.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;
}