Product
The lifecycle is the product
Why one design system running through Compose, Ship, and Optimize beats stitching separate tools together.
Hilal Tasdan
Dozens of crafted themes
one Active by default
Change a few tokens. Retheme the whole system.
Exports to the tools you already ship with
- CSS
- Tailwind
- JSON
- shadcn/ui
- Figma
- React
- Next.js
Presets
Start from a crafted theme, or your own.
Librarythemes
Active
Default Launch
Gray · InterMidnight Ops
Slate · Neo GroteskCalm Growth
Stone · HumanistSignal Editorial
Zinc · System UITune
Palette, type, radius, and appearance — one panel.
Colourpalette
PrimaryIndigo
Neutral · Gray
ButtonBadgeLink
Apply & export
Scope it anywhere, then export it as real code.
Scopewhere
Whole project8 pages
Single page/pricing
One sectionHero
Live preview
See the system retheme, not a swatch sheet.
Every change re-themes real components in place — a profile card, a conversion chart, and a product card — so you judge the theme on the product, not a palette.
app.plusui.com/theme
PrimaryIndigo
NeutralGray
FontAaInter
Radius10px
AppearanceLightDark
Peter Morgan
@petermorgan
2231,254
ConversionMonthly
120%
Nike ZOOM
NEXT PremiumDance
Toronto Dance Festival
Indigo · Gray · Inter — Light · 10px
One source
Light and dark, every surface and every component resolve from the same token set — change it once and it lands everywhere.
Real components
The preview is built from the production components you ship, so what you approve themed is what you get themed.
Already running
Plus UI's own site runs on it. The theme you're reading resolves from the same token system Theming Studio edits.
The library
Dozens of crafted themes, ready to apply.
Browse the Created Theme library — each card is a full theme you can apply, edit, and save as your own.
Default Launch
Gray · InterMidnight Ops
Slate · Neo GroteskCalm Growth
Stone · HumanistSignal Editorial
Zinc · System UICoastal Relay
Ash · System UILagoon Notes
Stone · InterPaper Trail
Stone · InterCarbon
Zinc · GeistDefault Launch
Gray · InterMidnight Ops
Slate · Neo GroteskCalm Growth
Stone · HumanistSignal Editorial
Zinc · System UICoastal Relay
Ash · System UILagoon Notes
Stone · InterPaper Trail
Stone · InterCarbon
Zinc · GeistCarbon
Zinc · GeistPaper Trail
Stone · InterLagoon Notes
Stone · InterCoastal Relay
Ash · System UISignal Editorial
Zinc · System UICalm Growth
Stone · HumanistMidnight Ops
Slate · Neo GroteskDefault Launch
Gray · InterCarbon
Zinc · GeistPaper Trail
Stone · InterLagoon Notes
Stone · InterCoastal Relay
Ash · System UISignal Editorial
Zinc · System UICalm Growth
Stone · HumanistMidnight Ops
Slate · Neo GroteskDefault Launch
Gray · InterTheming Studio
Questions about theming.
Presets, scope, export, and how light and dark come from one source. Still have a question? Talk to the team.
Dozens of crafted presets are in the library — Default Launch, Midnight Ops, Calm Growth, Signal Editorial, Coastal Relay, Lagoon Notes, and more — and one is always marked Active. Click any card to apply it, and your saved themes sit in the same library.
From the blog
More on theming and design tokens.
Guides on building a theme, scoping it, and exporting tokens that stay in sync.
Design systems
Theme rotation as composition
Light and dark aren't a toggle. Used per section, the tonal shift carries an argument the layout alone can't make.
The Plus UI Team
Product
Ship a marketing site in an afternoon
Compose the pages from components you already trust, connect the stack, publish. The slow parts were never the design.
Hilal Tasdan
Theme it once. Ship it everywhere.
Pick a preset, tune the tokens, preview on real components, and export the whole theme as code — light and dark from one source.