Introduction

Welcome to styleframe — the open-source tool for writing type-safe, composable, and future-proof CSS in TypeScript. Build robust, scalable Design Systems in minutes, catch style bugs before they ship, and supercharge your Front-End workflow with a developer experience you'll actually love.

Why styleframe?

• Type-Safe CSS API: All your styles are validated at compile time. No more typos, no more runtime surprises.
• Composable & Modular: Mix, match, and reuse style logic using simple functions, variables, and plugins. Build your design system from ready-made parts.
• Built-in Theming: Create light/dark modes and custom themes with zero pain—just a few lines of code.
• Framework Agnostic: Works seamlessly with React, Vue, Svelte, Solid, Astro, and more.
• First-Class Developer Experience: Enjoy IDE auto-complete, in-editor docs, and static analysis—right where you code.

How does it work?

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

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.

What can you build with styleframe?

Styleframe is completely framework-agnostic and integrates seamlessly into any modern Front-End stack, including React, Vue, Svelte, Solid, Astro, and beyond.

• Design tokens (colors, spacing, typography) that live in TypeScript and generate real CSS variables.
• Reusable component styles for buttons, cards, layouts, and more.
• Runtime Recipes for styling your components based on props.
• Custom themes for brands, products, or just dark mode fans.
• A fully custom design system without writing a single line of raw CSS.

Who is styleframe for?

• Front-End developers who want fewer bugs and more confidence in their code.
• Teams and companies building or maintaining Design Systems.
• Anyone tired of fighting CSS tools that don't scale or catch mistakes.

If you're ready for a new, more reliable way to write and manage styles, styleframe is here for you. ❤️

Questions? Feedback?

If you have questions or feedback, or just want to see what others are building, join our community on Discord or open an issue on GitHub. Styleframe is open source and built in public - we'd love for you to be part of the journey.