The System Nobody Asked For

Where the brand lives

Primitives hold raw values, semantics say what something means, and themes decide which brand answers. Only the theme tier knows it's Sleep or Health. One semantic token, four answers. Only the Theme tier knows what brand it is.

One token, three brands

Nothing inside the component changes between verticals. The theme tier supplies the value, so a new brand is a set of values rather than a new library.

Product-specific components, system values

Sleep needed components the foundation didn't have. They were built in Sleep's own library, but every value in them resolves from the foundation's tokens, so they inherit theming and both modes without being part of the shared library.

Light and dark come free

Modes resolve at the semantic tier, so a new vertical inherits a complete light and dark palette on day one instead of building a second one. The same component and the same semantic tokens. Only the mode changes the value.

States are tokens, not variants

A component picks a role, and the system resolves default, hover, active, and disabled. Twelve states authored once, instead of rebuilt in every component.

AI drafted the structure. I set the boundaries.

I used AI heavily to work out token structure and naming conventions, then pressure-tested every tier boundary by hand to decide what belonged where.

Sleep, from the first screen

Sleep had no legacy to protect and I was designing it from zero, so it ran on the new foundation from the very first screen rather than being retrofitted later.

It sped me up

The foundation didn't slow the launch. Designing from a system meant fewer decisions per screen and no rebuilding patterns that already existed. Same screen, fewer decisions. The foundation removed the ones that were never design.

Four months, concept to global iOS

Calm’s first new consumer app in 12 years shipped to global iOS in four months, entirely on the foundation. Android followed from the same foundation, with no separate design library.

Dark mode is a value swap, not a second design

The same components and the same semantic tokens resolve to different values in dark mode. Nothing is duplicated, so a new vertical inherits both modes on day one.

Full fidelity, not a stripped-down version

Depth, elevation, and type all resolve from the system, so Sleep shipped at full fidelity instead of a stripped-down version of the design.

Made the image the card

Contrast couldn't be guaranteed over artwork that changes every session, so the MVP kept text off the image. I pushed for full-bleed cards, and engineering built a scrim that adapts to the image at runtime. It went back into the foundation.

Proving the foundation could absorb Classic

I themed Calm Classic through aliased tokens to show that 12 years of legacy UI could resolve from the same foundation, in dark mode included. It was a proof, not a migration. DTC never prioritized moving Classic over.

Who adopted it

Two product lines run on one foundation. Calm Health chose it without a mandate, and two more vertical themes are ready when the business is. Classic was themed as proof, never migrated.

Weekly, for months

Health's team met with me weekly for 3 to 4 months to learn the system and push it further. The sessions kept running because they were getting something out of them.

Handed over the structure, not just the library

I built Health's token structure with them and taught the mechanics: how aliasing works, how modes resolve against a component, and how to build component properties so collection theming actually holds. They left able to extend the system without me.

Tokens into Claude, screens back out

I showed Health's team how to feed the token structure into Claude and generate screens for the components they wanted to add, so new work came back already speaking the system's language.

One component, a themed screen

The same Content Hero Card, with Health's theme applied through collection theming, rendered into a full screen. Nothing was redrawn: the card, the tab bar, and the tokens all came from the foundation.

What it looked like from their side

“Deep design systems craft paired with real fluency in AI-to-code workflows. It's not common to find in one person.” Spencer S., Sr. Product Designer, Calm Health.