All articles
DesignJul 9, 2026 · 6 min read
Designing dark-first: how we built the Studio Butterfly system
A look at the tokens, type and motion behind a product that lives comfortably in the dark — and stays sharp everywhere.
TH
Tanvir HasanProduct Design
Dark mode is not just an inverted palette. Get it wrong and everything muddies; get it right and the product feels calm, focused and premium. We designed dark-first, then let light mode follow.
Contrast is a budget
On a near-black canvas, pure white text vibrates. We spend contrast deliberately — bright where it guides the eye, muted where it should recede — so a screen has one clear focal point, never ten competing ones.
- A single accent family: teal, green and lime
- Sharp, squared geometry over soft rounded corners
- Motion that clarifies hierarchy, never decorates it
The system is opinionated on purpose. Constraints are what let a small team ship a consistent product fast.
