Type-safe Styling Engine for Design Systems

Write tokens, themes, utilities and recipes in TypeScript, and compile them to zero-runtime CSS and types. Catch a renamed token before your users do.
Get started Star on GitHub

01 Config
03 Themes
05 Scanner
07 AI

Scroll to explore

01One config

Your whole design system, from one config

Change a token once, and it flows to every selector, theme and recipe that uses it.

The compiler is your design-system reviewerAutocomplete runs from a token to a recipe variant. Rename a token and the build fails at the reference, not in production.
ComposableCompose and reuse styles with functions, variables, arrays or objects.
Built-in ThemingLight, dark and custom themes, all from the same tokens.
One plugin, every major bundlerThe same config drives Vite, Nuxt, Webpack, Rollup, esbuild, Rspack, Farm, Astro and Bun. Framework-agnostic output works with React, Vue, Svelte, Solid, Astro and more.
Fully ConfigurableEvery option is typed and in one place.
Intuitive Developer ExperienceAutocomplete, in-editor docs and static analysis for your CSS.

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 by Default, Dynamic When You Need It

Your system compiles to static CSS at build time. When you need prop-based styling, 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