UX-DSL

Default

The quick brown fox jumps over the lazy dog.

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.

SPAN

Inline token usage

BODY

UXDSL provides a type-safe, token-aware styling experience that integrates seamlessly with modern frameworks.

CAPTION

Figure 1: Token dependency graph

SMALL

v1.0.0-beta

PRE

const theme = { colors: { primary: 'blue' } };

The Power of Semantic Typography

UXDSL decouples visual style from HTML tags. While you can write standard HTML, the real power comes from the @ds-typo mixin. This allows you to apply the visual properties of a "Heading 1" to any element, while maintaining semantic correctness.

Because these mixins are backed by CSS variables, changing the theme instantly updates every instance of that typography style across your entire application—spacing, weight, size, and line-height included.

Usage Example

/* Apply H1 visuals to a div */
.hero-title {
@ds-typo (h1);
color: palette(primary-dark);
}

/* Apply Body visuals to a span */
.description {
@ds-typo (body);
opacity: 0.8;
}

Available Variants

Headings: h1 through h6 (Responsive sizes, tighter line-heights)

Body: body, p (Optimized for reading)

Utility: span, small, caption (Subtle styles)

Code: pre, code (Monospace family)

Customizing Typography

You can override the default type scale by adding a typography_details section to your uxdsl.theme.json file. This allows you to fine-tune sizes, weights, and line-heights for every semantic tag.

The fontSize property supports UXDSL's responsive syntax, allowing you to define fluid scaling from mobile to desktop in a single line.

// uxdsl.theme.json
{
"typography_details": {
  "h1": {
    "fontSize": "xs(32px) md(48px) xl(64px)",
    "fontWeight": "800",
    "lineHeight": "1.1",
    "letterSpacing": "-0.03em"
  },
  "p": {
    "fontSize": "xs(16px) lg(18px)",
    "lineHeight": "1.6"
  }
}
}