Hierarchy
Rhythm
Color
Step 01
Import & score
Drop references. Studio OS reads hierarchy, rhythm, and palette — not vibes.
Design with References,
Now You Can.
Purpose-built for design-led teams. Taste, canvas, and handoff — in one calm system.
studio OS · Canvasdesktop · 1440
Hero — frame
Taste
Densitytight
Typeeditorial
Paletteneutral
Selection
WidthFill
HeightHug
The loop
One pipeline from inspiration to shipped UI — without losing your eye.
›Keep editorial type, tight vertical rhythm, no neon accents…
ProtectSerif display · 8/16/32
BendDensity · line length
AvoidGradients · shadows
Step 02
Compile taste
Directives become constraints: what to protect, what to bend, what to avoid.
Export HTMLPublish
Step 03
Edit & export
Work in a canvas that respects structure. Copy HTML or publish when you’re ready.
The editor
A real design tool.
Not a preview pane.
Hero Section
320
Canvas feel
Hover outlines, frame labels, measurement guides, smooth zoom. It feels like the pro tools you already use.
Inspector
Layout
Fixed
Fill
Hug
Type
FontGeist Sans
Weight500
Size28px
Precision inspector
Fixed / Fill / Hug sizing, typography, spacing, and fill — all in a familiar property panel the model can read.
Layers
Page
Hero Section
Heading
Subtitle
Cover Image
Features Grid
Card 1
Card 2
Component hierarchy
Clean tree structure, drag reorder, multi-select. See exactly what was generated and restructure it instantly.
FillStretches
HugWraps
96
Layout semantics
Fill, Hug, and Fixed sizing — not just pixels. Generate with these constraints; edit with the same vocabulary.
Taste engine
Moodboard in,
constraints out.
Every generation is biased toward your spacing habits, type choices, and color relationships — so output stays in your lane.
Spacing rhythm8 / 16 / 32
Type voiceserif display
Paletteneutral + accent
Pricing
Simple tiers. Ship when you’re ready.
We’re in early access — numbers below are the targets we’re building toward. Join the waitlist to lock in founder pricing conversations.
Early access
Free
For designers and builders trying the loop: references → taste → canvas → export.
- Waitlist + invite-only beta
- Core canvas, taste profile, and exports
- Community updates
Pro
$39/ mo at launch · billed monthly
For solo designers who live in the tool — higher limits, faster queue, full handoff.
- Generous monthly generation allowance
- ZIP + publish + copy-ready HTML
- Priority generation queue
- Email support
Team
Custom
For studios standardizing taste across projects and handoff to engineering.
- Multiple seats & shared libraries
- Admin & usage visibility (roadmap)
- SSO & security reviews (roadmap)
- Dedicated success channel
Indicative pricing — final plans and limits may change before public launch. No charges until we publish checkout.
Handoff
Real markup.
No lock-in.
Copy HTML with inline styles, bundle a ZIP, or publish a link. Your layout leaves as code you can own.
page.tsx
import React from "react";
export default function GeneratedView() {
return (
<div className="w-full min-h-screen bg-[#FAFAFA]">
<nav className="flex justify-between items-center p-6">
<div className="text-lg font-bold">studio OS</div>
<button className="bg-[#4B57DB] text-white text-sm font-medium px-4 py-2 rounded-[4px]">
Ship
</button>
</nav>
</div>
);
}1-click deployment. Zero translation errors.