6 min read9 hours ago

–

(My journey from building CSS-in-JS for Angular to creating a design language for the AI era)

Press enter or click to view image in full size

The Hook: CSS Should Be Smarter Than This

I love CSS, but I hate the verbosity of modern responsive design. Whether it’s the clutter of utility classes ([p-4 md:p-6 lg:p-8](https://uxdsl.vercel.app/docs/breakpoints)) or the mental context-switching of standard media queries, something always felt inefficient.

I wanted to write intent, not just values. I wanted to describe how an interface behaves in a single line, without a heavy JavaScript runtime.

So I built UXDSL (UX Design system Language).

It works as a specialized layer for design systems on top of PostCSS. It accepts standard CSS (and SCSS syntax), but enhances it with dynamic tokens that are compiled for performance and managed by a tiny runtime helper that updates your design tokens instantly in the browser, bridging the gap between static CSS performance and dynamic AI capabilities.

Before I tell you how it works, look at the code. This is what I mean by “Superpowers”:

/* src/components/Hero.uxdsl */.hero-section {  display: flex;    /* ⚡️ The Holy Grail: Responsive layout in ONE line */  flex-direction: xs(column) md(row);     /* Works with ANY property */  width: xs(100%) md(50%);  text-align: xs(center) md(left);    /* 🧠 Intelligent Density: No more hardcoded pixels */  padding: density(2);   gap: density(1);}

That’s it. No media query blocks. No utility class soup. Just clean, semantic CSS that compiles down to highly optimized, standard CSS.

Check our UX-DSL documentation demo next project

The Backstory: An Obsession with Architecture

Design Systems are my passion. I’ve spent years obsessing over the perfect frontend architecture. I’m not new to this — I previously created sjss.dev, a CSS-in-JS solution specifically for Angular.

I loved the developer experience of colocating styles with logic. But as I pushed [sjss\.dev](https://medium.com/design-systems-collective/from-flash-to-angular-signals-my-accidental-journey-to-design-systems-b5e6e39dd12b) and other runtime libraries to their limits, I always hit the same wall: Performance.

The “runtime cost” of calculating styles in JavaScript always felt inadequate for the modern web — it blocks the main thread and slows down hydration. On the other hand, I tried to embrace the popular “Utility-First” approach. While it offers incredible speed, I never felt comfortable with it. It stripped away the semantic clarity I value in HTML.

I decided to build it myself (again). But this time, I chose PostCSS as my engine. I realized I didn’t need a heavy runtime; I needed a smart Compiler.

Superpower #1: Inline Responsiveness

The biggest friction in standard CSS is the mental context switch. To change a layout from mobile to desktop, you usually have to scroll down to the bottom of your file, open a @media block, and rewrite the selector. You end up splitting your logic across the file.

In utility frameworks like Tailwind, you solve this by cluttering the HTML (class="flex-col md:flex-row"). It’s fast, but it sacrifices readability.

UXDSL eliminates this trade-off.

The code you saw above isn’t pseudo-code. It’s real. In UXDSL, the compiler detects functional values like xs() and md() inside any property and automatically extracts them into the correct @media blocks in the final CSS.

The Result: Your source code tells the “complete story” of how an element behaves across all devices in a single read.

Superpower #2: Intelligent Density (Intent > Values)

Most design systems break when you try to scale them. If you hard-code p-4 (1rem), you are stuck with it forever.

In UXDSL, I introduced Intelligent Density (See Documentation). Instead of thinking in fixed pixels, you think in “Density Levels”:

• density(1): "Compact" (Mobile-first tight spacing)
• density(2): "Standard" (Comfortable reading mode)
• density(3): "Spacious" (Marketing headers)

When you write padding: density(2), the system doesn’t just output 16px. Under the hood, it is compiled as if you had manually written the responsive scaling logic yourself:

/* What you write: */padding: density(2);

/* What it actually means (The Macro): */padding: xs(space(2)) md(space(3)) xl(space(4));

Press enter or click to view image in full size

The system automatically outputs a responsive CSS variable that “breathes” — shrinking to space(2) on mobile and expanding to space(4) on desktop. You write the token once, and the system handles the scaling logic.

Superpower #3: Fluid Typography (Scale Without Struggle)

In traditional CSS, making text responsive is tedious. You define a base size, then open a media query for tablets, then another for desktops. If you want to change the H1 size later, you have to hunt down three different blocks of code.

In UXDSL, typography tokens are self-aware.

I designed the typography system to accept the same responsive syntax as the layout engine. But more importantly, I created Smart Typography** Mixins** that handle the entire font stack for you.

/* src/components/Hero.uxdsl */.hero-title {  /* 🪄 Magic: Injects font-family, weight, and responsive size */  @ds-typo(h1);     color: palette(primary-main);  margin-bottom: density(4);}

.section-heading {  /* Scales automatically from 24px (mobile) to 38px (desktop) */  @ds-typo(h3);}

When you use [@ds-typo\(h3\)](https://uxdsl.vercel.app/docs/typography), you aren’t just setting a font size. You are inheriting a responsive behavior. The compiler automatically injects the correct font family, font weight, and generates the breakpoints so your headings scale smoothly from a phone screen to a billboard-sized monitor. You write one line, and your typography is perfect on every device.

Superpower #4: Semantic Surfaces (The “Smart” Mixin)

Most developers copy-paste the same 5 lines of CSS for every card: background, border, shadow, radius. If you change the "Card" style, you have to find-and-replace across the whole app.

UXDSL introduces Smart Mixins like [@ds-surface](https://uxdsl.vercel.app/docs/surfaces).

CSS

.card {  /* One line defines the entire visual physics of the element */  @ds-surface(elevated);}

This single line injects the correct background color, border-radius (linked to your density settings), and box-shadow depth. If you switch your theme to “Dark Mode,” the [@ds-surface](https://uxdsl.vercel.app/docs/surfaces) mixin automatically swaps the token mapping to ensure perfect contrast, handling the complexity of semantic layers for you.

Press enter or click to view image in full size

Superpower #5: The Future is Generative (Live AI)

This is the ultimate superpower. Unlike Sass or standard CSS, which are “dead” after compilation, UXDSL includes a tiny Runtime Engine (~1kb).

This runtime allows the design tokens (colors, density, radius) to be updated instantly in the browser without reloading the page.

Why does this matter? It creates a bridge for Artificial Intelligence.

Because UXDSL strictly separates Structure (CSS) from Tokens (Data), I was able to connect the system to AI models (like Gemini).

The Demo: On our playground, you can type “Make my site look like a Cyberpunk movie”, and the AI re-writes the token layer in milliseconds. The colors, shadows, and contrasts update instantly — without breaking the layout — because the AI controls the data, not the code.

Press enter or click to view image in full size

👉 See it in action on the Demo Home Page

Join the Alpha

UXDSL is being built today. The entire documentation site runs on a modern Next.js stack, proving that it is possible to have the best of both worlds: the raw performance of static CSS and the dynamic flexibility required for AI.

It is still a work in progress. We are building VS Code plugins and polishing the docs, but the core engine is alive.

This is my vision for the frontend of the near future: fewer utility classes, smarter tokens, and systems that collaborate with AI rather than fighting against it.