Show HN: Styleframe – Type-Safe, Composable CSS in TypeScript (opens in new tab)

Hi HN, Over the past 10+ years I’ve been building design systems at various companies, tooling, and UI libraries, including an open-source UI library called Inkline. Through that work I kept running into the same recurring issues: CSS styles breaking due to typos or wrong values, design tokens getting duplicated or drifting, themes becoming unmanageable, and tooling that didn't scale in TypeScript-heavy front-end stacks.

I built Styleframe to address these problems. It’s a TypeScript-native way to build type-safe, composable, and scalable design systems.

Key features:

- Type-safe CSS: Write selectors, variables, utilities, themes and tokens in TS and have compile-time checking (no silent runtime CSS bugs).

- Composable design systems: Build tokens, themes, selectors and utilities as reusable pieces, combine modules cleanly, share across projects.

- Rich design tokens and theming: Variables for color, spacing, typography, breakpoints, border-radius and shadows; theme overrides for light/dark/brand variants; output optimized CSS.

- Framework-agnostic usage: Works with React, Vue, Svelte, Solid, Astro, any bundler.

In large teams or systems, styling becomes a fragile surface area: styles leak, tokens diverge, themes multiply, build complexity increases, and developer experience suffers. By writing styling in a typed API, Styleframe aims to make CSS first-class and manageable in modern TS-driven design systems.

What I’m looking for

I’d appreciate feedback from the HN community — especially if you:

- Are maintaining or have built design systems in TypeScript-heavy stacks

- Have experienced pain with CSS scalability, theming or token drift

- Are interested in typed styling APIs or trying out Styleframe in your stack

Happy to answer questions, walk through how the core engine works, or compare to existing solutions. Thanks for reading — looking forward to your thoughts.

— Alex