REDSHIFT

Build note · Generative Assets · №118

How the deep field
learned to redden

REDSHIFT is a fictional cosmology instrument. The page has one job: take a span no eye can hold — billions of years of an expanding universe — and compress it into a field you can watch recede in a few seconds. Galaxies drift outward as space stretches, their light dragged from blue toward red with distance, while a Hubble diagram and a shifting spectral line tie the colour back to a number. Nothing is a recording; every galaxy, velocity and shift is computed live.

01 Concept

This is the eighteenth Wave-Five piece — the Deep Time set, where each page makes a single vast temporal process legible. Here the process is cosmic expansion. The mistake the design fights is the intuitive one: that galaxies fly away through space like shrapnel. They do not. Space itself grows between them, so the farther a galaxy sits, the more stretched-out space lies in the gap, and the faster it appears to recede. A light-wave crossing that swelling gap is stretched with it — a redder wave. The colour you read is the distance, printed onto the light. The whole field is built to make that one idea unmissable: a blue-white core, an amber middle distance, a deep-red rim, all in continuous outward motion.

02 Palette

Four values, argued from the physics of light and distance: the blue of a nearby galaxy, the neutral white of the middle distance, the violet midtone of the shift itself, and the deep red of the edge of sight.

Cosmic black
#0A0612
The void between galaxies — a black with the faintest violet bias, never a flat grey-black.
Near blue
#5A78D0
The close galaxies, and every line and mark. The unshifted end of the spectrum.
Far red
#D8442E
The horizon end. Reserved for the deepest galaxies, the tracked marker and the one accent word.
Shift violet
#A87CA0
The midtone of redshift itself — eyebrows and the Hubble line. A lifted tone of the spec's #7A4A6A.

The concept sheet names a darker #7A4A6A as the small-text ink, but on a near-black field that value lands near 2.4:1 — a contrast failure the collection has hit before. So the accents carry lines and marks only; body copy runs on a light lavender ink (#DED6E6) with two dimmer tiers, and the spec's violet is lifted to #A87CA0 for eyebrows. Nothing small leans on the near-blue, the far-red or the raw shift tone.

03 Type

toward red.
Every one dragged
Manrope for the display and wordmark; Space Mono for every readout, tag and axis label.

Manrope is a modern geometric sans with a tight, engineered feel — set heavy and negatively-tracked it gives the wordmark the clean authority of an observatory nameplate without any retro-futurist cliché. The moment of typographic bravery is the hero sentence, where the single word "red" is the only coloured, italic-weighted word on the page — the whole thesis compressed into one tinted syllable. Space Mono, with its tabular figures and slab terminals, does all the instrument work: recession velocities, redshifts, distances, the axis labels on the Hubble diagram — numbers that need to sit in stable columns as they climb.

04 Techniques

The signature — colour as a ruler

The hard part was making one law do everything at once. A galaxy's log-distance sets its screen position, its brightness (dimming with distance and with 1+z), and its colour — all from the same number. The tracked galaxy is the thread that ties it together: a single object whose distance, velocity, redshift and lookback time all climb in lockstep as it recedes, its point sliding up the Hubble line and its spectral line sliding right, until it crosses the horizon and the survey hands off to the next. Look long enough and you catch the second-read detail — one lone neighbour falling inward, blueshifted, the way Andromeda approaches us faster than expansion pushes it away.

05 Iteration log

Pass 1 · Craft

Kill the blown-out core, make the red read

The first render had a fatal exposure bug: near galaxies clustered at the exact centre with brightness scaling as 1/distance², and additive blending stacked them into a single blown-white blob — no field, no galaxies. Fixed it three ways: an inner-radius floor so nothing piles at dead centre, a raised brightness denominator and a lower size cap so no point saturates, and a longer birth fade plus a central clearing so newborn galaxies ramp in gently. Then the opposite problem — the reddening was compressed to the very edge because the colour ramp normalised z over too wide a range, leaving the whole visible field blue-white. Retuned the ramp to span the field, so the blue core, amber middle and red rim all read at once. Also gave the field a gentle curl so it stopped looking like radial spokes.

Pass 2 · Depth

A neighbour against the flow, and depth on the cursor

Added the second-read detail: one blueshifted galaxy drifting inward against the universal recession, drawn on an overlay canvas with a cool-blue glow and an "approaching" tag as it nears — the Andromeda case made literal, and a quiet contradiction of the page's whole thesis that rewards a second look. Added the micro-interaction: a pointer-driven parallax where near galaxies swing more than far ones, so moving the cursor tips the field into a shallow three-dimensional volume rather than a flat scatter. Both are eased and both switch off under reduced motion.

Pass 3 · Hardening

Contrast, 375px, reduced motion, the Chanel rule

Confirmed the light ink tiers clear 4.5:1 over the whole field so no small label leans on an accent, and verified 375px holds with the wordmark, nav and hero fully inside the viewport and zero horizontal overflow. Reduced motion bakes one settled, well-reddened static frame with the loop, parallax and neighbour all stopped — checked headless that two screenshots two-and-a-half seconds apart are byte-identical. Capped devicePixelRatio at 2, debounced resize, and paused the rAF loop on visibilitychange with a clamped delta so a backgrounded tab doesn't fast-forward the expansion. For the Chanel rule I removed the cramped 8-pixel λ₀ / λ labels from the spectrum strip — the arrow and the live Δλ readout already carry the shift, and dropping them cleaned up the one place small text was fighting the rainbow band.