Pick a palette, a font, an icon set — Compos builds the token foundation, locks every component to it, and exports ready-to-use code for your platform.
:root {--bg-surface-primary: #6D28D9;--text-content-warning: #F2B155;--spacing-4: 16px;--radius-2: 8px;}
Design systems don't fail all at once. They fail one eyedropper click at a time — and nothing in Figma tells you it's happening.
Nobody hands a new hire the chain from raw value → token → component — so picking by eye feels like the only option.
The brand color changes, the spacing scale changes — and every screen built with hardcoded values quietly falls out of sync, forever.
There's no signal for "this doesn't match the system" — drift stays invisible until a review, or a customer, catches it.
Once a screen ships, someone still reads every value out of Figma and manually retypes it as code — once per platform, every time.
The raw palette. color/500, spacing/4, radius/8. Nobody touches this layer directly.
The same values, renamed by what they mean. bg/surface/primary, text/content/secondary. This is the layer designers actually work in, every day.
Buttons, cards, whole screens. Every property here binds to a Layer 2 token — never straight to a raw value, never a hardcoded hex.
Pick a palette, font, and icon set — Compos generates the full color, spacing, type, and grid foundation in seconds.
41 components, 12 patterns, and 21 full screens — login, dashboard, pricing, booking, settings — already wired to the correct tokens. Drag in and use.
Export the same tokens to CSS, Tailwind, Swift, Kotlin, React Native, Flutter, JSON, or Figma Code Connect — one source of truth, any platform.
Read variables from any file — Compos-built or not — into a self-contained HTML styleguide, ready to share or use as a benchmark.
Change a brand color or spacing scale once — every screen built with Compos updates with it, because nothing was ever hardcoded.
CSS Variables
Tailwind
shadcn/ui
SCSS
Swift / iOS
Kotlin / Android
React Native
Flutter
JSON
Figma Code Connect
HTMLThe exact same color math the plugin uses — OKLCH ramps, WCAG contrast, five derivation schemes — right in your browser.
Read every Color, Typography, Spacing, Icon, Grid, and Motion variable in a file — Compos-built or not — into one self-contained HTML page.
<nav> Color · Hex Color Typography · Font Scale Spacing · Radius Icons · Grid & Layout Motion Components </nav> /* self-contained — no build step, host anywhere or just share the file */
See what designers and developers are saying
"We used to spend hours hand-creating variables for every new file. Compos scaffolds the whole foundation in seconds, and nobody reaches for the eyedropper anymore."
"The code export is a game changer. Every token comes out as clean CSS Variables, already matching what design built — no more re-typing hex codes by hand."
"We manage a system with 300+ tokens across three platforms. Foundation-wide Sync means changing one color updates every screen — nothing drifts anymore."
Planned pricing for when Compos opens up — nothing to pay today. Reserve a plan and lock in the price.
Free forever for personal use — 10 lifetime actions with every feature unlocked, plus a 1-click 7-day free trial for unlimited actions when you need more room. Pro removes the cap for good — no trial required.
Free forever — 10 lifetime actions included, no credit card required.