RED DOT · DESIGN SYSTEM · 2026
ONE RED.
EVERYTHING ELSE
EARNS ITS PLACE.
A dark, institutional, near-monochrome system. Built from Helvetica, exact 1px detail, and a single flat red used only where it changes a decision.
[ 01 ] FOUNDATION
Premium through restraint, not decoration.
The language is institutional grotesque on an Apple-Music dark canvas. Confidence comes from hierarchy, spacing, and hairline precision, never from shadows, glows, gradients, or frosted glass. Every surface is flat. The only saturated colour on the page is a single red, spent like currency: a primary action, an active state, a status dot, one word in a headline. Remove the red and the page still reads; that is the test for every accent.
[ 02 ] COLOUR
A monochrome stack, lit by one red.
Four near-black surfaces stack to build depth without borders doing all the work. Text rides three ink levels of decreasing opacity. Borders are white at a whisper. Then the red.
Page canvas. The floor everything sits on.
Media wells, inset panels, chart grounds.
Cards and raised components.
Primary text and display type.
Body copy, secondary text.
Eyebrows, captions, mono labels.
Structural borders and dividers.
Section seams and quiet separators.
Red is a verb, not a colour.
It never fills a background for mood. It marks the primary action, the active nav item, a status dot, the period at the end of a headline, or one word that carries the meaning. Used anywhere else, it stops meaning anything.
[ 03 ] TYPOGRAPHY
Three voices, clearly ranked.
Helvetica speaks in headlines: heavy, tightly tracked, all business. Inter carries the reading. IBM Plex Mono handles anything that behaves like data: eyebrows, captions, numbers, coordinates.
Helvetica Neue
700 · tracking −0.035em
decoration, always.
Inter
400–600 · 1.6 line
IBM Plex Mono
400–500 · tracking 0.14em
RGBA(245,245,247,0.40)
TRACKING 0.14EM
[ 04 ] SIGNATURES
The tells that make it unmistakable.
Small, repeated details do the branding. None of them are loud; together they're unmistakable.
Every section opens with a bracketed mono index, the consulting-exhibit tell.
The "no middle" idea, made literal, struck in red as it scrolls into view.
Headlines land on a single red full-stop. One pixel of colour, maximum finality.
- Ranked, one idea per line
- Hairline rule between rows
- Red square, never a disc
Lists use a 5px red square on a hairline rule. Never a disc, never a dash.
[ 05 ] COMPONENTS
Built from panels and hairlines.
Every component is the same recipe: a panel surface, a 1px border, restrained radius, no shadow. State lives in the red and in motion.
A hairline border, restrained radius, no shadow. State lives in the red.
[ 06 ] MOTION
Crisp, short, transform-only.
Nothing loops or drifts forever. Motion animates transform and opacity only, runs once on entry, and always respects prefers-reduced-motion. Every curve is the same confident ease.
Reveal on scroll
Content rises 26px and fades in as it enters the viewport. Staggered, once, never again.
OPACITY + TRANSLATEY · 0.8SMasked line reveal
Hero lines slide up from behind a clip mask, one after another, on load.
TRANSLATEY 110→0 · 1.0SDrawn geometry
Sparklines and flow connectors draw themselves via stroke-dashoffset, then the endpoint lights.
DASHOFFSET 100→0 · 1.2SAmbient grid
A near-invisible canvas grid fades patches in and out at random. The faint pulse behind this page.
CANVAS · ≤5% WHITENav on scroll
The bar hides on scroll-down, returns on scroll-up, backed by a blur.
TRANSLATEY · 0.45SHover intent
Arrows nudge, cards lift 4px, buttons deepen. Small rewards for pointing.
TRANSFORM · 0.25–0.4Scubic-bezier(0.22, 1, 0.36, 1)
A fast, confident start that settles softly. One easing across the whole system, so everything feels like it belongs to the same hand.
[ 07 ] LAYOUT
Framed, architectural, deliberate.
Centred max-width columns, hairline seams between sections, and a masonry grid that lets content breathe at its natural proportion.
Columns & rhythm
Content lives in a max-width: 1200-1360px column with fluid clamp() gutters. Sections breathe on generous vertical space, clamp(88px, 12vw, 160px), so each reads as a framed exhibit rather than a continuous scroll.
Masonry work grid
The portfolio flows as CSS columns. Tiles cascade at their true aspect ratio, no cropping. It self-balances as pieces are added and steps down from three columns to one on the way to mobile.