Type-safe styling engine for the AI era

Author tokens, themes, utilities and recipes in TypeScript, and ship zero-runtime CSS. The types catch a renamed token before your users do, whether you or an agent made the change.
Get started Star on GitHub

01 Config
03 Themes
05 Scanner
07 AI

Scroll to explore

01One config

Your design system, in one TypeScript config

Tokens, themes, utilities and recipes live in one typed source. Change a token once, and it flows to every selector, theme and recipe that uses it.

styleframe.config.ts

import { styleframe } from 'styleframe';
import { useDesignTokensPreset, useGlobalPreset, useModifiersPreset, useSanitizePreset, useUtilitiesPreset, useButtonRecipe } from '@styleframe/theme';

const s = styleframe();

useDesignTokensPreset(s, {
  colors: {
    primary: '#0066ff',
    secondary: '#7c3aed'
  }
});
useSanitizePreset(s);
useGlobalPreset(s);
useUtilitiesPreset(s);
useModifiersPreset(s);

useButtonRecipe(s);

export default s;

02Compose

Compose your system from existing parts

Build your design system from composables you already have, all resolving through one source.

Infinitely CustomizableMake it your own. Start from the default theme and customize every token.
Mix and Match ComposablesColors from one theme, typography from another.

Explore the default theme

styleframe.config.ts

import { styleframe } from 'styleframe';
import { useColorDesignTokens } from '@styleframe/theme';
import { useTypographyDesignTokens, useSpacingDesignTokens } from '@orgname/theme-minimal';
import { useComponents } from './my-components';

const s = styleframe();

// Colors from the default theme
useColorDesignTokens(s, {
    primary: '#318fa0',
    secondary: '#ff6b6b'
});

// Typography and spacing from another theme
useTypographyDesignTokens(s);
useSpacingDesignTokens(s);

// Plus your custom components
useComponents(s);

export default s;

03Themes

One source, every theme

Light, dark and custom themes come from the same tokens, with no separate stylesheet to keep in sync.

Learn about themes

styleframe.config.ts

import { styleframe } from 'styleframe';

const s = styleframe();
const { variable, ref, selector, theme } = s;

const surface = variable('color.surface', '#ffffff');
const text = variable('color.text', '#18181b');

selector('.card', {
    background: ref(surface),
    color: ref(text),
});

// Every theme reuses the same tokens — just override their values
theme('dark', (ctx) => {
    ctx.variable(surface, '#18181b');
    ctx.variable(text, '#ffffff');
});

export default s;

04Output

Zero-runtime CSS, with recipes when you need props

Your tokens, themes and utilities compile to static CSS at build time, so they cost nothing at runtime. When a component needs prop-based variants, an optional runtime handles recipes.

Static GenerationYour base styles cost nothing at runtime.
Dual OutputThe transpiler outputs both CSS and TypeScript, and you control exactly what each token generates.
Optional RuntimeRecipes turn props into dynamic component variants, built on the static CSS.

Learn more about Recipes

Output

/* Static CSS generated at build time */
.button {
    background-color: var(--color--primary);
    padding: var(--spacing);
}

/* Optional runtime for prop-based Recipes */
recipe({
    name: 'button',
    base: { background: '@color.primary' },
    variants: {
        size: {
            sm: { padding: '@spacing.sm' },
            md: { padding: '@spacing.md' },
            lg: { padding: '@spacing.lg' },
        },
    },
    defaultVariants: { size: 'md' },
});

05Scanner

Write Markup, Skip the CSS

Our Utility Scanner is like Tailwind JIT, but type-safe and built on your own design system. Write utility classes in your markup, and it generates only the CSS you use.

Automatic DetectionNo need to pre-define every value: the scanner matches each class to your factories and resolves your tokens.
Framework AgnosticBuilt-in extractors for HTML, Vue, React, Svelte, Astro, MDX and more, or add your own.

Learn more about the Scanner

Component

<!-- Write utility classes in your markup -->
<div class="_padding:lg _display:flex _gap:[1rem]">
    <button class="_background:primary _hover:background:secondary _padding:md">
        Click me
    </button>
</div>

06Figma

Sync Design Tokens with Figma

Export your Styleframe design tokens to the W3C DTCG format and import them into Figma, with a mode for each theme.

Bidirectional SyncImport tokens into Figma, or export Figma Variables back to JSON, with structure and aliases intact.
Multi-Mode SupportLight, dark and custom themes become Figma modes, on every sync.

Learn more about the Figma Plugin

07Coming Soon

AI that authors your design system

Hand work on your design system to AI agents, from writing tokens and recipes to other technical tasks. It's all typed TypeScript, so the compiler checks what they write.

Styleframe MCPConnect styleframe to Cursor, Claude, ChatGPT and more.
Useful AI, built inAI workflows that build your design system for you.

08Fluid design

Typography that flows naturally across every screen size

Skip the breakpoints. Styleframe scales your typography and spacing fluidly from phone to desktop.

01: Step 1
Set the scale for phones
02: Step 2
Set the scale for desktops
03: Step 3
Watch as everything scales fluidly in between

Fluid Responsive Design

styleframe