← Creative

Case study 03 · Concept · Systems design · Color science

A photograph becomes the ground the interface sits on.

Insulator — an offline music player. ARC is the modern skin, and my design. You pick the image; the palette is generated from it, so no two installs look alike.

Most brand systems survive by being enforced. This one had to survive the opposite — being handed to the audience. If the user supplies the photograph, the system cannot depend on any particular color arriving, and it still has to look like itself.

The naming carries the same idea. It is electrical rather than glass: an insulator holds high tension so it never arcs, and ARC is the one place that energy is allowed to show. High tension. Low noise.

The ARC player panel: transport controls and a spectrum analyzer over a photograph, on a near-black ground.

Proof · the design, at size

ARC, running — not a screenshot of it.

The live interface with working controls, and every decision written beside the thing it decided. One image behind all three panels, cut out by them, desaturated under the controls so white type stays legible over any picture. The app cannot know what photograph is coming — that constraint is the whole design problem.

Open the proof →

The generator

A photograph in, a palette out — and the interesting part is what happened when my own specification turned out to be wrong.

Above, a Gulf-liveried race car in pale blue with an orange flank, generated in Adobe Firefly. Below, the six colors the generator extracted from it, shown as swatches with their hex values and the share of the frame each covers. The orange, at 13.2 percent, is outlined in yellow-green and marked as the accent.
A photograph in, a palette out. The generator clusters the image in Oklab and assigns color roles — and it takes the accent from highest chroma regardless of how many pixels carry it. Run on this frame it picks the orange at 13.2% of the image, over the sky at 31.5% — a cluster 2.4× rarer than the most common one. Anyone who knows this livery thinks “orange” — and so does the rule. That is the difference between a palette and a brand.
sourceMy own render, made in Adobe Firefly — the same workflow as the MoneyLedger sidebars. The numbers above are measured from it, not carried over from an earlier example.
Two versions of the same generated player interface, one above the other. The upper version has muddy brownish-orange accents and flat, low-contrast bevels. The lower version has bright saturated orange accents, crisp white numerals and bevels that read clearly.
My own spec was wrong, and building it is what proved it. I had written “recolor by role color times luminance”. Top row is what that produces: in sRGB it has no pivot, so every value darkens and the color never reproduces — measured #3B302B arriving as #251E1B, with chroma collapsing from 0.0123 to 0.0055 because multiplying toward black desaturates. Bevel shadows went gray instead of staying in the skin’s hue. Bottom row scales lightness about a pivot in Oklab instead; chroma holds flat at 0.018. Both are published because the wrong one is the evidence.
The classic player window rendered in the Insulator palette: a near-black ground, mid-gray transport buttons with visible bevels, yellow-green slider handles, pale gray display type, and a live spectrum analyzer decaying at the left.
The classic shell, in the brand palette — and it cost the brand’s own ground color. The identity names cobalt as the ground. Generated that way the window goes flat: every button is cobalt on cobalt and nothing separates. The cause is structural, not a setting — the generator derives roles by luminance, and a mid-lightness saturated ground has no range to derive from. Widening the bevel spread from 0.16 to 0.40 barely moved it.
what that settlesThe classic skin cannot be brand-literal and still read as a skin. This one drops cobalt and uses the near-black instead — which is what the phone interface had already done, before anyone had worked out why it had to. The design reached the right answer before the reasoning caught up.

The photograph

the photograph A 35mm film scan looking up between city towers at night, sodium-lit yellow-green against a dark sky, sprocket holes left in down both edges.
the interface it becomes

A 35mm film scan, sprocket holes left in. Nothing here was chosen for the interface’s convenience — the sodium yellow-green the app runs on is the light that was in the street. The generator reads it exactly the way it would read anything a user drops in.

One frame, two products

The riveted-panel photograph that grounds Insulator’s default skin is the same frame behind City in MoneyLedger — one image, two palettes, two products. The MoneyLedger theme system →

My role — concept, systems design, the color system, naming and the trademark clearance behind it, AI direction.
Status — in build. The generator runs on any photograph the user supplies; the classic shell loads real .wsz skins.
Built with Claude — authored, not just used. I wrote the build as twenty-one ordered specs and directed against them.

The product-side case study → — where the form-factor decision lives: two interfaces, split by where the thing is used.