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?

Getting started is simple. Install the package, create a TypeScript file for your styles, and use the type-safe API to define your design tokens, selectors, and themes. Styleframe will generate optimized, portable CSS you can use in any application.

You'll immediately notice the benefits: code that's easier to maintain, safer to update, and ready to scale as your project grows.

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.
• 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.