rotemgotlieb.com/registers
The Registers in its bold flat register: a heavy black headline reading Style is a decision, on warm paper, beside a coral note card, with the switcher strip of register names along the bottom.
you are watching the real page · bold flat, liquid glass, Y2K OS, spatial

The Registers · Bold flat, liquid glass, Y2K, spatial

Open The Registers

One page becomes bold flat, liquid glass, Y2K, spatial.

Each register is its own design system, not a theme of another. Before any pixel I wrote down the cliche that register would attract, then the structural rule that refuses it, and dated the list before the pixels it governs. Refusing first is slower than designing first and editing after.

Two facts about it are checkable in ten seconds: one HTML file, zero JavaScript libraries.

A register is derived, not picked.

Liquid glass attracts panes floating over nothing, so in that register every pane sits on an opaque backplate.

Every change here is a substitution in the same slot.

The switcher is rebuilt in every register, not recolored once.

One component survives every register: the switcher itself. It is never themed. In bold flat it is a row of stamped blocks inside an ink border.

A switcher that only changes color is a theme toggle, and a theme toggle is exactly what this page must not be.

rotemgotlieb.com/registers/usecases/spatial
THE ATLAS, the spatial register: a dark star chart at a 22 degree field of view, Orion drawn in dashed lines, with a data card for Betelgeuse listing magnitude 0.45, 498 light years and class M2.

Spatial is a corridor you move through.

I killed six directions and printed the reason.

The reason for each is printed on the live page rather than filed away. Killing your own output and publishing why is the part a generative system does not do.

The corridor as the whole site: published genre. The OS-desktop container: derived from a specimen tile. A neutral eighth chrome: it would out-shout the seven.

Four registers taken further, each at full length.

Each is a complete page written in its own register, set in that register's own type. They are the same argument at length: a register is a system, not a skin.

What it cost, and what I would change.

The expensive part was not the designs. It was the refusal list. Writing it is slower than designing first and editing after, and it is the only reason these read as separate designs.

What I would change: the hero above is a recording of the artifact, so the two can drift, and they did.

A capture that stands in for a live product needs a check that fails when the product moves.

The hero and the artifact drifted once, and that still needs its own check.

The motion register's five phases at poster scale, laid out in order: 01 ENTER, 750ms on cubic-bezier(.16, 1, .3, 1), arriving from below decelerating; 02 SETTLE, 480ms, the overshoot instant caught at minus 4px past rest; 03 ACCENT, 340ms, skew and a breath of blur; 04 HOLD, 650ms, full presence; 05 EXIT, 600ms on cubic-bezier(.5, 0, .75, 0), leaving faster than it came. Each phase sets the word MOTION in its own treatment.

Five phases, each with its measured number and its reason.

Open the live page and switch registers yourself →

Other Work