Zeus CSS

Every new project started the same way. I rebuilt the tokens, redid the colour logic, wrote breakpoints by hand and watched design decisions get scattered across class names. Two years ago I started testing how much of that modern CSS could do for me. It began as five small frameworks: fluid sizing with clamp(), generated utilities, semantic naming and tokenization.

Then AI assistants became part of the workflow, and the old problem came back in a new form. If the assistant can't see the real design system, it guesses colours and spacing, and the design drifts again.

I merged the five experiments into one engine with one rule: you define a few tokens and Zeus works out the rest. Most of what I've learned about CSS architecture went into making that rule hold up.

• The fluid part is one Sass math core. You give it a minimum and a maximum, and it writes the clamp() with container query units. Type, spacing, borders and icons all use it, so I don't write breakpoints for fluid values anymore.
• Colour is OKLCH. Five base colours turn into 135 tokens, including light, muted, surface and border variants, and they update live through relative colour syntax.
• You can use it as utility classes, SCSS mixins or plain CSS variables, all from one override file, in any framework.