design
rileycx, early explorations: site design for a network product
Post by Riley Hennigh (@rileycx), 2026-10-25
What it is, and who made it
Three tall frames of a website design for a private-network product: a dark ground, flower photographs, a node-graph overlay with coordinate and IP-style labels, one orange accent, a giant grotesk headline cropped at the frame, and numbered steps where the later steps are dimmed.
Parts, layer by layer
- Ground: two darks, page #0e0e0e and card #1a1a1a (M); ground luma 0.098 (M).
- Hot mark: orange #fc4b07 to #f94f0c (M). Area share 0.025 in frame 1, 0.285 in frame 2 (a full orange panel), 0.004 in frame 3 (M): one orange per view, from a thin bar to a whole panel.
- Photography: orange and white blossoms cut out on the dark ground; inside some flowers a rectangle turns grey (O).
- Graph overlay: thin white lines and small nodes over the photos, with boxed mono labels like coordinates and addresses (O). The overlay sits over the photograph and crosses petals and ground alike.
- Type scale: headline line runs of 87 and 51 px in a 640 px wide frame; body lines 19 to 24 px of 1080; headline to body about 4 to 1 by line height (M). The headline is cropped at both edges ('ct anythi / ere.') (O).
- Reading order: steps 1 and 2 at p99 luma 0.965, step 3 at 0.282 (29% of white), the small label above at 0.612 (M). Later steps wait in dim until reached (I).
The framework behind it
Three layers with three jobs: a living subject (flowers), a technical skin (the network graph and its labels) and a typographic voice (one huge cropped grotesk). Colour is rationed: one orange marks where to look. Brightness is used as reading order, so the page shows where the reader is.
The same idea in distant fields
- Botanical specimen plates with labels and leader lines.
- Air-traffic and network operations displays.
- Swiss posters with cropped giant type.
- Teleprompters and karaoke: the current line lit, the next dim.
Dual edge
Dimming future steps guides reading and can also hide terms the reader should see before agreeing; never dim anything a reader must consent to. The network graph over flowers reads as calm and natural; for a security product that softness can understate risk.
Measured
Image 1
- #0e0e0e 50%
- #1a1a1a 42%
- #585250 3%
- #fa6027 2%
- #e1e1e1 2%
- #121212 1%
- Mean saturation
- 0.026
- Contrast
- 0.91
- Edge density
- 0.043
- Dominant wavelength
- 0.0084
- Edge softness
- 1.39
Image 2
- #0c0c0c 35%
- #1b1a1a 29%
- #fc4b07 26%
- #f86e36 4%
- #a19d9b 3%
- #8d4d32 2%
- Mean saturation
- 0.322
- Contrast
- 0.627
- Edge density
- 0.03
- Dominant wavelength
- 0.0053
- Edge softness
- 3.86
Image 3
- #191919 54%
- #0b0b0b 31%
- #c8cfcc 6%
- #8f9a8f 4%
- #393b35 3%
- #6c6c5a 2%
- Mean saturation
- 0.043
- Contrast
- 0.866
- Edge density
- 0.033
- Dominant wavelength
- 0.0841
- Edge softness
- 3.09
Concepts
- advection
- air
- aperture eye
- body
- calm contemplation
- chance order
- code
- data
- focal point
- ink
- layering
- line hatching
- nature machine
- network graph
- paper
- plane sheet
- plant
- reading order
- rule one hot mark
- saturation hue
- scale crop
- sound
- sound as shape
- specimen plate
- tempo rhythm
- type