PAGES WERE
PLACES ONCE.
Windows drag, MINES.EXE plays, the desktop answers a right-click. Interactivity was the whole promise, and this floor still keeps it.
Style is
a decision.
No template, no house style. Pick a register and everything you are reading re-derives: type, color, chrome, motion. Range is not the point; one process made them all, and that is the point.
you are in BOLD FLAT · one ink does everything; the color is the layout
the grid is already at work · seed 1731 · the full poster is below
This page is one spine wearing a complete design register at a time. You are in the analog era right now: beveled chrome, a live taskbar, windows that drag.
Switch to LIQUID GLASS on the taskbar and thirty years of interface history change state in front of you.
a torus, projected to text at 30fps · the era rendered 3D in the only material it had
a real program in the world: pixel pencil, four inks
fully playable: left opens, right flags; the era’s whole promise was interactivity
the second hand steps; the era did not ease either
Desktop: Teal #0E7C7B
Chrome: #C6C6C6 · two-ring inset bevels
Title bars: #000082 · one navy at a time
Easing: steps(6, end) · the era did not ease
Faces: Silkscreen · Verdana · IBM Plex Mono
HALF
STATES
The construction is the design.
one ratio, 1.5, applied without exception: 16, 24, 36, 54, 81; the ladder is a tester: click a size and the headline takes it, instantly; a grid does not ease
measured center is not visual center; the eye wins
Composed on the grid, not on taste.
seed 0001 · hand-set default · 32 units of 11.25° · ring widths double: 8 16 32 · one accent beam, budgeted
Every look. One process.
- 01
Read first
The brief, the record, and what already exists, in full, before any opinion. A direction is not picked from memory.
- 02
Research the register
Named anchors, live-viewed. Mechanisms read off the work itself, never remembered, never copied.
- 03
Write the direction
One page: audience, job, identity axes with provenance, what is killed and why. It is the contract every pixel is judged against.
- 04
Build to a measure
A depth budget, a module, a type ratio, an easing voice: stated as numbers before the first line, then held.
- 05
Judge blind
Fresh hands, one dimension each, against a named studio, on frozen renders. A score is a floor, never a verdict.
- 06
Fix at the mechanism
Every falsifier a judge names becomes a work order. Nothing is painted over; the function that produced the defect changes.
six steps, one 12-column construction; turn the grid on and every edge above lands on a column
a place, not a page: everything opens, drags, and minimizes; try a right-click on the desktop
hold the lens anywhere: real magnification with a liquid ripple, a spectral rim, one sun
drag the divider: the same light, two materials; frost is a decision, not a default
three panes at three depths: the stack answers your pointer, and the blur compounds through the layers
a working set: the press is a liquid squash with a shifting highlight, and the tint it sets is real; the release overshoots once, a printed break from this register’s voice, because liquid recovers
one light, three highlights: the sphere is nothing but where the light lands
Motion earns its place.
If a movement cannot say why in one sentence, it does not happen. Every section on this page states its own reason.
One easing voice.
Coherence is the premium tell: one curve, everywhere, with at most one deliberate break.
The still must poster.
Freeze any frame of this page and it should hold as a designed poster. Motion decorates nothing; it carries meaning or it is cut.
Four curves, one distance.
same distance, same 900ms; the curve is the personality
Five phases, one word.
enter, settle, accent, hold, exit; every animation on this page is built from these five and nothing else
The stagger field.
click anywhere: the wave radiates from your point; each dot’s delay is its distance, normalized to the nearest dot (anime.js’s grid-stagger math, re-derived)
the five phases at poster scale; your scroll is the scrub bar
01 ENTER
02 SETTLE
03 ACCENT
04 HOLD
05 EXIT
typeInstrument Sans, the page’s own reading face, kept: quiet holds what the others re-derive away
inkstwo: bone and charcoal; nothing else was needed
hairlinesone weight, one pixel, drawn only where reading turns
measureone module of 24 pixels; every interval in this register is a multiple of it
motiona breath every fourteen seconds; the rest is the decision to hold
nothing here is missing
door 01 of 06 ahead · scroll to walk; press a door to enter its register; keep going to fall
falling · seven cloud banks pass you on the way down; the pad catches you
One system.
Any style.
Bold flat to liquid glass, one process underneath: research first, a written direction, every motion with a printed reason, every build judged blind against a named studio before anyone outside sees it. Point at the register closest to your product; the same process produces it. The whole thing was built by one designer directing a fleet of design agents, and every decision on this page is his.
What taste killed
This page shows how I work, not what I have shipped. The product work is at rotemgotlieb.com. rotem.gotlieb@gmail.com
Authored pacing, live
Every motion on this page has a sentence; switch registers and the table re-derives.