Living spec

1. 01
   The shell is for the field, scenes, and type.All product UI lives in rooms.
2. 02
   The field is a sparse pixel matrix.Square pixels on a fixed grid, three sizes, mostly empty.
3. 03
   Orange means “this one is different.”Flagged pixels, the cursor, live readouts. Nothing else.
4. 04
   One family, three registers, one weight.Extended for statements, Standard for sentences, Mono for data.
5. 05
   Real over decorative.Readouts count what a scene is doing, the sky is tonight’s sky, the day is a real day.
6. 06
   Fun is discoverable, never in the way.Metal mode, the ghost’s flight, the playground: off the main path.
7. 07
   The ghost is clearly someone, rarely the focus.One body, many faces, always in ink. Why a ghost is below.
8. 08
   Plain words.Short sentences in sentence case. No hype. If there’s a joke, it’s on the ghost’s face, not in the text.

Ink and paper, a grey a real step below, a rule lighter than text, and one orange: the amber-red of a darkroom safelight, because the field develops. On paper the orange keeps its chroma rather than darkening to brown, and the grey sits further from the ink so the hierarchy holds on light.

A sparse matrix of square pixels on a 9px grid. Scenes are tone maps, one value per cell: a scene develops brightest first, each pixel fading in at its final size, and flattens into an even matrix at a chapter’s end.

1. 01
   Whole device pixels.2, 3, and 4 CSS px, snapped, so a square of a size is identical on every screen and a 1x screen never draws specks.
2. 02
   A pixel never grows to arrive.It takes its final size and only fades in; stepping through sizes read as a stutter.
3. 03
   Nothing is redrawn that hasn’t changed.The sky uploads only when something moves it, and the field idles at 30fps; the twinkle looks the same.
4. 04
   Draw what exists, not every cell.Primitives written into the tone map cost what’s drawn, not the whole grid.

Each case study gets a place, and the place acts out the system the product runs. The scene follows the study: develop is the problem appearing, the action runs in the middle, and the flatten is the design bringing order. One element in each is orange, the thing the case study is about, and the readout counts what the scene is doing, never a claimed statistic.

1. 01
   The gate.Radar, from fraud tool to risk platform. A crowd passes a gate under the moon; three are held in orange. One decision, made at scale.
2. 02
   The watch.Radar rules. The gate’s wall in a storm: three towers lit, seven more light in orange. Defending at scale.
3. 03
   The shop.Terminal, from one reader to a payments system. A dark plain, one stall with a lantern, a customer at the counter, the tap pulsing in orange; far stalls light one by one.
4. 04
   The lane.Uber Grocery. A lane winds up through pines to a cottage with a lit window; the orange courier walks the order up as you scroll. To the door.
5. 05
   Old light.The archive. A seven-star constellation, one star per earlier project and one in orange, watched by an observatory on a hill. Starlight is always from the past.

Previews run on a steady clock, in over 0.75s and out over 0.35s, never a chase toward a target, which slams in and dribbles.

The stars are the real sky above Walnut Creek, right now, facing south. Scrolling down tilts your gaze toward the zenith. The brightest planet above the horizon is the one orange point. On the homepage the sky rests as a Milky Way instead: every point in the field banded into one slow swell across the middle, drawn with the same star squares, the core steady and the edges twinkling; the real sky is a flag away.

1. 01
   Invisible by design.Good product design disappears into the outcome. The ghost is that idea with a face on it.
2. 02
   Present, not loud.It watches, reacts, and gets out of the way, the way a senior designer should in a room.
3. 03
   Signal from noise.Its shadow is the one orange thing on the page, inherited from the earlier R_ mark’s bar. In the field it assembles out of the noise.
4. 04
   A working sample.It reads signals (pointer, scroll, idle, pokes) and answers with tuned states. You see how Ryan thinks before you read a word.
5. 05
   Where it lives.The cover, the close, 404, the favicon, the playground. Never inside case studies, next to client marks, or anywhere the subject is a real loss. Always in ink, never orange.