Studio Theme
Craft•
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.
Dark
Studio theme
Studio ledger
Calm surfaces for focused work.
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?