Every design system I've used has a theme switcher. Dark mode, light mode, maybe an accent color. And after you've swapped every color in the palette, all of your themes still behave like the same material: shadows fall the same way, corners curve the same way, hover states move at the same speed with the same easing. You haven't changed what the UI is made of. You've repainted it.
When I designed theming for the design system I've been building, I ended up splitting it into three independent axes:
- Palette — which colors.
- Mode — light or dark.
- Physics — what material the interface is made of.
This post is about the third axis: what a "physics" actually is, why my system ships exactly three of them, and the one physics × mode combination it refuses to render.
What I mean by "physics"
A material, in UI terms, is a set of rules about light and time. Not a color — a behavior. My system has three:
Glass — the object emits light. Surfaces are translucent with a backdrop blur. Borders are thin. Shadows aren't black — they're derived from the canvas color, so depth reads as atmosphere, not dirt. On hover, elements physically lift a few pixels, and the lifted shadow includes a glow in the accent color, because in this material the surface itself is the light source. Motion is springy: overshooting cubic-beziers, slightly slower durations. Things float.
Flat — external light casts shadows. Surfaces are opaque. Shadows are neutral black at very low opacity — 5 to 10 percent, the way paper shadows under office lighting actually look. Nothing glows, ever. Nothing lifts on hover. Easing curves are quick and polite, with no overshoot. This is the material almost every product you use today is made of.
Retro — there is no light model. No soft shadows at all. The "shadow" under a raised element is drawn, not cast: a hard 3px 3px 0 offset in a solid color, the way a pixel artist would draw it. Border radius is zero everywhere. Borders are thick. And — my favorite detail — every duration token is 0ms, and the easing functions are steps(2) and steps(4). State changes snap. The era this material quotes couldn't animate, so the material doesn't either.
In CSS, the whole mechanism is one data attribute and a set of custom properties:
[data-physics='glass'] {
--radius: 12px;
--speed: 300ms;
--ease: cubic-bezier(0.34, 1.56, 0.64, 1); /* springy, overshoots */
--lift: -3px; /* hover raises the surface */
--shadow-lift: 0 8px 28px -4px var(--shadow-tint),
0 0 12px var(--glow); /* ...and it glows */
}
[data-physics='flat'] {
--radius: 12px;
--speed: 130ms;
--ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* quick, no overshoot */
--lift: 0px; /* nothing floats */
--shadow-lift: 0 4px 12px rgb(0 0 0 / 0.1); /* neutral, barely there */
}
[data-physics='retro'] {
--radius: 0;
--speed: 0ms; /* state changes are instant */
--ease: steps(2); /* what little moves, steps */
--lift: -2px;
--shadow-lift: 3px 3px 0 var(--accent-dim); /* drawn, not cast */
}
Components only ever consume the variables — var(--speed), var(--ease), var(--shadow-lift) — and never know which material they're rendered in. That's the entire trick. One component tree, three materials, zero per-component branching.
Why these three? Because UI history did it first
I didn't pick three aesthetic moods I happened to like. The three materials fall out of how screen UI actually evolved:
1. The terminal era (retro, dark). Phosphor characters on a black tube. A character grid: hard edges, no curves, no transitions — the screen redraws, it doesn't animate. Green or amber light on darkness.
2. The paper era (retro, light). When bitmapped GUIs arrived — the Xerox Alto, the original Macintosh — they were deliberately black-on-white, because the metaphor was paper. Documents, desktop publishing, WYSIWYG. The geometry stayed hard and the motion stayed instant; only the light flipped. Today's neo-brutalism trend is this era quoted back at us.
3. The flat era (flat, both modes). Metro, then iOS 7, then Material. The industry threw out texture and ornament and settled on the external-light model: opaque surfaces, minimal neutral shadows, restrained motion. This is still the mainstream default — it's what "a normal app" looks like in 2026.
4. The glass era (glass, dark). This one has been trying to happen for twenty years. Aero shipped translucent window chrome in 2007 and the hardware mostly couldn't carry it. iOS 7 smuggled frosted blur into the system even while flattening everything else. Then the glassmorphism trend, and now Apple has pushed translucent, light-emitting material across its entire platform line. The new trend is becoming the new mainstream.
The obvious objection: where's skeuomorphism? Where are the leather calendars and felt game tables of the 2000s? My answer is that skeuomorphism was never a light model — it was the external-light model wearing theatrical decoration. Textures, bevels, stitching: all of it was imagery layered onto the same physics flat design uses. Which is exactly why, when the decoration fell out of fashion in 2013, what remained underneath was flat. Materials survive trend cycles; decoration doesn't. That's the test I use for whether something deserves to be a physics.
So: three light models in roughly fifty years of screens. Everything else that looks like a "different era" is a palette riding on one of these three.
The part I didn't expect: physics owns time
I went into this thinking the physics axis was about shadows and corners. The bigger payoff turned out to be motion.
Most design systems define one global motion scale — duration-fast: 150ms, ease-standard: ... — and every theme inherits it. Which means every theme moves identically, and that's a big part of why ten themes can feel like the same product wearing different shirts.
In my system, duration and easing tokens live inside the physics layer. The consequence: a modal opening under glass enters slowly with a soft overshoot, like something surfacing through liquid. The same modal, same component, same code, under retro appears in two frames via steps(2). Under flat it's quick and businesslike. No component opted into any of this. Moving time into the material was a one-time architectural decision that made every current and future component era-correct for free.
If you take one implementation idea from this post, take that one: a material is a light model plus a time model. If your timing tokens are global, your materials are paint.
The combination I refuse to render
Three physics × two modes = six combinations. My system ships five. Ask for glass in light mode and the runtime silently corrects it to flat.
That sounds like a bug, or at best laziness. And I know the obvious objection: Apple has spent years teaching everyone that glass looks perfect in light mode. So let me be precise about what I'm actually claiming — because it's narrower, and it's defensible.
The claim is not "light glass can't exist." The claim is that this glass — and most glassmorphism you see on the web — is an emissive material, and emission doesn't survive light mode. Dark glass differentiates itself through accent glows, canvas-tinted shadows, specular highlights on translucent surfaces. All of that reads because it's light against darkness. A light surface cannot emit — light-on-light is invisible. That's optics, not taste.
Strip the emission out and what's left is translucency: backdrop-filter: blur(). And blur has a precondition people forget — it needs something behind it. Blur is an averaging filter, and the average of a solid color is the same solid color. You can verify this in ten seconds: open any glassmorphism demo and replace the background photo with plain white. The glass disappears.
Apple never faces this problem, because Apple designed the content to always be there. Their glass is OS chrome — toolbars, docks, tab bars — floating over wallpapers and scrolling feeds. The backdrop is guaranteed. And where blur alone isn't enough, their material leans on refraction: edge lensing, specular highlights, content-aware tinting. Notice that's a different optical mechanism from emission. What Apple ships in light mode isn't dark glass with a light palette — it's another material, engineered for light from the start. Even then, they spent an entire beta cycle publicly seesawing its transparency after legibility complaints, and "Reduce Transparency" exists as an accessibility setting for a reason. Light glass walks a knife edge between invisible and illegible, and that edge is exactly where the world's best-resourced design team keeps adjusting its footing.
Product UI — the kind my system targets — is mostly panels over a solid canvas. No wallpaper, no photo feed passing behind every card. In that context, an emissive glass with the emission turned off renders identically to flat, except you're paying GPU cost for blur the user can't see. And a physics in my system is global: every surface, every component, the whole page. A material that's only visible where imagery happens to pass behind it isn't a material — it's an effect. Rather than ship a combination that quietly renders as flat-but-slower, the runtime corrects it.
So the matrix is deliberately ragged:
| dark | light | |
|---|---|---|
| glass | ✓ | → corrected to flat |
| flat | ✓ | ✓ |
| retro | ✓ | ✓ |
I used to feel uneasy about that hole — asymmetric APIs look like design debt. I now think the opposite: mode support is a property of the material. The asymmetric matrix is physical honesty. The dishonest version is the complete matrix where one cell silently renders as a worse version of another cell.
And Apple doesn't contradict this — Apple confirms it. They earned light mode by engineering a refraction-first material from scratch, not by relaxing a dark one. If I ever want light glass, that's the honest path: a fourth physics, built for light, with its own rules. Never a palette swap on this one.
The clamp I got wrong
Here's the part that earns the previous section, because I almost made the same call twice and one of them would have been a mistake.
Originally retro was clamped to dark mode too. CRTs are dark — obviously. But when I actually audited why retro needed darkness, the material decomposed into two layers. There's a phosphor layer — the emissive, glowing-characters-on-black part — which is genuinely dark-only, same argument as glass. And there's a structural layer — zero radius, stepped motion, hard drawn offsets — which doesn't reference light at all.
Put the structural layer on warm paper-colored ink with a typewriter monospace and you don't get "broken retro." You get the paper era from the history section: early Mac, print, neo-brutalism. Historically real, visually coherent, and it cost almost nothing to support because the geometry never cared about mode in the first place. The dark coupling had been palette convention, not physics.
So I asked the same question of two materials — "can this work in light mode?" — and got opposite answers. Glass: no, because its identity is emission. Retro: yes, because its identity is geometry. The answer lives in the material, not in the theming API. A blanket rule in either direction — "every physics supports both modes" or "exotic physics are dark-only" — would have been wrong once.
What I'd steal from this if I were you
You don't need three materials. But if you're building or maintaining a theme system, four things transfer:
- Make material an axis, orthogonal to palette and mode. Even two materials force the right architecture: components consume physics variables and stop hardcoding what light does.
- Define a material as light + time. Shadows, radius, blur — and durations, easings, hover displacement. The motion half is the one everyone forgets and the one users feel most.
- Let materials refuse modes. Auto-correct invalid combinations at the runtime level instead of rendering something subtly broken. A ragged support matrix you can explain beats a complete one you have to apologize for.
- Before adding a theme, ask: new light model, or new colors? Almost always it's new colors — a palette entry, cheap, add as many as you want. A new light model is rare and expensive. UI history has produced about three in fifty years. If you think you've found a fourth, you're either wrong or you're early — both are worth knowing.
The whole industry is mid-transition into the glass era right now, which makes it a strange and useful moment: for once, the mainstream material and the trending material are different. A theme switcher can't express that difference. A physics axis can.
Top comments (0)