I'm building Styleframe (https://styleframe.dev), a zero-runtime CSS-in-TS Framework written for theming and maintaining Design Systems.

After 4 years of maintaining an Open Source Design System, I needed a better way for theming than Sass and PostCSS. I needed the power of a full-featured programming language. That's how the first version of Styleframe was born.

My vision is for Design Systems to be endlessly configurable and composable, like you would configure any library, with or without AI. Want to change your entire website to look like Linear? Simply install and use the Linear Design System configuration. Want only your buttons and cards to look like Linear, and the rest be the default theme? Use the button and card composable functions from that package.

Styleframe is built as a transpiler-first system. You write your design tokens, selectors, utilities, and recipes in TypeScript, and Styleframe tokenizes everything into an internal representation. From there, the transpiler generates dual outputs:

- CSS output: variables, selectors, utilities, themes, keyframes

- TypeScript output: typed recipe functions with full IDE autocomplete (with an optional Runtime)

This architecture means you can have complete control over customizing how your system is output. You could even use the generated tokens to render documentation for your design system components. The output code can be integrated with any headless UI Components Library, or with your own custom components.

Fun fact: I've reimplemented the entirety of TailwindCSS using Styleframe's utility and modifier tokens. Not only that, but I've also built a scanner which picks up your CSS Classes from your markup. It's basically Tailwind, but 100% configurable (even utility class format can be changed), and is always based on your design tokens.