KROMA RUNTIME V3.4 // ZERO-RUNTIME CSS-IN-JS & AST TOKEN COMPILER

The Design System Engine Built for Machine Velocity.

Synchronize design tokens from Figma directly into type-safe React, Vue, Svelte, and iOS/Android code in 12ms. Zero runtime overhead, 100% WCAG AAA accessible, and multi-brand theming out of the box.

play_circle Explore Component Sandbox

$ npx kroma-init@latest

tune kroma.workspace.tokens.ast.json — Live Reactive Link

12ms AST JIT SYNCED

palette Root Token Variable Map FORMAT: W3C DTCG

--kroma-brand-primary #bef500 (Acid Lime)

--radius-primitive 4px [0.25rem]

// Live AST Token Output (Zero Runtime)

export const ThemeTokens = {

"color": {

"primary": "var(--kroma-brand-primary)",

"contrast": "#101319"

"border": {

"radius": "4px",

"hairline": "1px solid #434933"

}

};

devices Compiled Component Preview check_circle WCAG AAA PASS (8.9:1)

Interactive Button Primitives

security_update_good Schema Drift Interceptor

ESC to close

1 breaking token alteration detected in packages/tokens/v3.json. Auto-generating codemod migrations.

TARGET	BUNDLE	LATENCY	STATUS
React 19 (Server)	0.00kb	11.4ms	COMPILED
SwiftUI 6.0	0.00kb	8.2ms	COMPILED

280,000+ Weekly Compiled Tokens

12ms Average AST Sync Latency

0.0 kb Runtime Client Footprint

100% Strict TypeScript Autocomplete

Trusted by Platform Engineering & Design Ops at Scale

▲ Vercel ● Linear ■ Stripe ⚡ Supabase ✦ Raycast

SYSTEM CAPABILITIES & ARCHITECTURE

Mechanical Rigor for High-Velocity Platform Teams

Engineered to permanently dissolve friction between design systems in Figma and production runtime codebases.

01 // SYNC sync_alt

Bi-Directional Figma Token Sync

Direct integration with Figma Variables and Modes. Changes pushed in design automatically produce git pull requests with typed tokens and theme manifests.

figma.variables.onModeChange(→ git.pr)

02 // ARIA accessibility_new

Headless Accessible Primitives

Engineered with full WAI-ARIA compliance, roving tabindex, keyboard focus traps, and automated contrast verification down to pixel boundaries.

aria-checked="true" data-focus-visible

03 // THEMING style

Multi-Brand & White-Label Theming

Switch entire enterprise multi-tenant theme matrices with 1 root variable. Zero CSS duplication and zero bundle inflation across 50+ sub-brands.

04 // DIFFING difference

Automated Visual Regression

Sub-pixel Playwright diffing executing in GitHub Actions on every pull request. Immediate alerts for unexpected component layout shifts.

diff: 0.00% pixels altered [PASSED]

05 // COMPILERS memory

Framework-Agnostic Compilers

One shared token AST compiles simultaneously into React components, Tailwind config presets, Swift tokens, and Android Jetpack Compose classes.

compileTargets: ["react", "tailwind", "swift"]

06 // LINTING gavel

Token Governance & Drift Detection

Strict AST linter checks for raw hex strings or unapproved layout paddings inside developer PRs. Prohibit design debt before merge.

error: hardcoded hex #f43f5e prohibited

ZERO-RUNTIME PIPELINE

Code You Can Audit. Types You Can Trust.

Unlike heavy runtime CSS-in-JS abstractions, Kroma pre-calculates every token during build time into clean, human-readable TypeScript interfaces and standard CSS variables.

check IntelliSense autocomplete with real-time documentation hover previews
check Automatic tree-shaking for unused utility tokens
check Instant hot module replacement (HMR) within 12 milliseconds

Read compiler specification arrow_forward

// Zero-overhead React 19 Server & Client Component
import { Button, type ButtonProps } from "@kroma/primitives";
import { kromaTokens } from "@kroma/tokens";

export const DeployAction = () => {
  return (
    <Button
      variant="signal"
      elevation="active-glow"
      leftIcon={<span className="material-symbols-outlined">bolt</span>}
      onClick={() => console.log("AST Engine Initiated")}
    >
      Compile Micro-Frontend
    </Button>
  );
};

TypeScript 5.4.3 • Strict Null Checks • ESLint Passed 0 Errors

VERIFIED ARCHITECT TESTIMONIALS

Validated on Mission-Critical Workbenches

"Kroma eradicated token drift between our Figma workspace and Next.js frontend code in less than an hour of deployment. The 12ms build execution is completely transparent to our engineering velocity."

▲

Marcus Vance

VP of Design Systems • Vercel

"Maintaining multi-brand support across dozens of payment interfaces used to require complicated CSS overrides. With Kroma's AST engine, we swapped out entire client brand styles with zero bundle size penalty."

■

Elena Rostova

Lead Systems Architect • Stripe

"The AST linter catches rogue hardcoded hex strings right in GitHub PRs before they ever reach staging. It's the highest level of mechanical governance our design ops team has ever had."

❖

David Sterling

Head of Design Ops • Airbnb