Studio Theme

Craft

npx shadcn add https://try.pungrumpy.com/r/studio-theme.json

A minimal studio-inspired theme with crisp light and dark tokens for calm, focused interfaces.

Light

Studio theme

Studio ledger

Calm surfaces for focused work.

Balance$24,920
Accent ladder

Dark

Studio theme

Studio ledger

Calm surfaces for focused work.

Balance$24,920
Accent ladder

How It Works

The theme is a single CSS layer that defines a tight set of design tokens using oklch() for perceptual consistency. Light mode keeps the palette nearly neutral, while the primary color oklch(0.452 0.313214 264.052) adds a single confident accent. Dark mode mirrors the same structure with deeper surfaces and softened borders to preserve contrast without glare.

Token groups are organized for real UI surfaces: background/foreground, card/popover, code/preview, sidebar, and charts. This keeps component styling cohesive without extra overrides. A --radius of 0rem locks in the studio-like sharpness across controls.

Usage

Install the theme and include the generated CSS in your base styles. Apply the dark class on the root element to toggle dark mode. All components inherit tokens automatically, so the look stays consistent without per-component tweaks.

Was this helpful?