modern
Aa Bb Cc
ActionGhost
Stripe-ish
@annSaturated indigo + crisp grids.
v0.2 · early accessnew · pairs · diff/update CLI
A design toolkit
with a feel.
disenio.studio is a copy-paste component library you can re-skin in seconds. Pick a Feel, choose an accent, share the URL — the whole site re-tunes around you. Then copy the source and own it forever.
11components
8layout primitives
4pairs
live theme
Accent
theme.css
:root {
--ds-paper: #000000;
--ds-paper-deep: #0a0a0f;
--ds-ink: #f6f7fb;
--ds-ink-soft: #b8bdcd;
--ds-muted: #6b7186;
--ds-line: #15161d;
--ds-radius: 12px;
--ds-duration: 180ms;
--ds-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
--ds-shadow: none;
--ds-font-serif: Inter, ui-sans-serif, system-ui, "Helvetica Neue", Arial;
--ds-font-sans: Inter, ui-sans-serif, system-ui, "Helvetica Neue", Arial;
--ds-letter-spacing: -0.02em;
--ds-button-radius: 10px;
--ds-field-radius: 10px;
--ds-accent: #6d4cf2;
--ds-accent-ink: #ffffff;
}copy → own → restyle✦theme tokens, not theme prisons✦pairs over primitives✦live diff against upstream✦share themes as URLs✦
copy → own → restyle✦theme tokens, not theme prisons✦pairs over primitives✦live diff against upstream✦share themes as URLs✦
01 · why disenio
What other libraries don't ship.
Most copy-paste libraries dump primitives in your repo and walk away. disenio.studio ships the layer everyone else skips — pairs, layouts, an upgrade path, and a viral theme system.
feature
Feels system
Six themes that bundle radius, motion, shadow, and type — not just color. Switch above to watch.
Learn more →featurePairs
FormField, Toolbar, EmptyState, StatCard. The unit between primitives and templates that nobody else documents.
Learn more →featurediff & update
Lockfile-tracked components. Run `disenio diff` to see what changed upstream, `update` to pull it in.
Learn more →featureShare themes
Click Share. Send the URL. The recipient sees the entire site rendered in your theme. Built-in viral.
Learn more →02 · themes in the wild
Curated themes you can apply or share.
Every theme below is a real /t/<hash> URL. Click Apply to render the entire site in that theme — or copy the share link to send it to anyone.
modern · dark
Aa Bb Cc
ActionGhost
Linear-ish
@annCool gray tight type, dark first.
stark
Aa Bb Cc
ActionGhost
Stark Mag
@annMono, hard edges, magazine red.
editorial
Aa Bb Cc
ActionGhost
Editorial Light
@annWarm paper, ink type, terracotta.
playful
Aa Bb Cc
ActionGhost
Pastel Pop
@annRound, springy, candy pink.
modern · dark
Aa Bb Cc
ActionGhost
Synthwave
@annPure black + neon magenta.
Make and submit a theme
Open the editor, share the URL, and we'll feature the best ones here.
Open editor →03 · showcase
Built from the toolkit, theme-aware.
These are pairs and primitives composed in the wild. Change the Feel above — every card, button, badge, and stat re-tunes in real time.
Installs (7d)
1,284+18%
Pro revenue (MTD)
$2,304+9%
Churn
0.8%-0.2%
Form pairFormField
a11y wired · WCAG AA
Toolbar pairToolbar
active3
Tabsprimitive
Switch between related views without navigating away.
No components yet
Run `disenio add button` to install your first one. Or just browse the registry — it ships 11 components, 4 pairs, and 8 layouts out of the box.
SettingsCard
Diseño Pro
popularMarketing Kit + Dashboard Kit + Email Kit.
$96lifetime · all updates
- · 30+ premium pages
- · 8 hand-crafted Feels
- · Email components
- · Figma kit
- · Pro CLI features
- · Priority support
04 · install
Four commands. Yours forever.
No runtime dependency. No version lock. Components copy into your repo as plain TSX, styled with CSS variables you exported from the editor.
Setup guide for your stack →01
npx disenio init02
npx disenio add button form-field stack03
npx disenio diff04
npx disenio update --force05 · pricing
Free core. Polish coming soon.
The library, layout primitives, pairs, CLI, and 6 Feels are MIT. Premium kits and themes ship next.