Design notes · how this was made

The pit-wall aesthetic.

This site sells a fictional privateer Le Mans team to fans and sponsors. Everything on it is code — no photography, no stock. The design bet: a race engineer's screen is already beautiful, so build the whole identity out of telemetry.

Concept & art direction

APEXLINE is a twelve-person LMP2 privateer entering the 24 Hours of Le Mans. The page has three jobs: the car, the drivers, the 24-hour mission. The art direction treats speed as diagonal geometry — skewed plates, clipped section edges, italic type wherever motion is implied — over carbon black, with livery red and pit-lane amber doing all the talking.

Palette

Red is reserved for the car, the brake trace, and one call to action per screen. Amber is data: gears, sector clocks, throttle. Green appears only when a sector is a personal best — exactly as it does on a timing screen. The drivers section flips to livery white so the page itself reads like a car: dark body, white number panel.

Type pairing

Chakra Petch has squared, chamfered terminals that look machine-cut — in bold italic caps it reads like a sticker on a sidepod. Share Tech Mono is the dashboard: tabular, technical, slightly retro like a timing monitor. All three stay in their lanes: display shouts, body explains, mono measures.

The signature: a lap of Le Mans, live

The hero is an SVG map of the Circuit de la Sarthe with a car marker lapping it. The trick that makes it feel real is that the dot does not move at constant speed — it follows a speed profile keyed to the real corners, so it visibly brakes for Arnage and stretches out at 329 km/h down Mulsanne.

The circuit is one SVG path. Feature coordinates (Dunlop, Tertre Rouge, both chicanes…) are mapped to fractions of the path length at runtime, each with a target speed:

// [x, y, target km/h] at known circuit features
var FEATURES = [
  [408, 181, 126],  // Tertre Rouge
  [790, 418, 329],  // Mulsanne kink, vmax
  [810, 448,  86],  // Mulsanne corner
  [508, 509,  90],  // Arnage
  ...
];
// each frame: chase the target, then advance by real physics
v = tgt >= v ? Math.min(tgt, v + accel * dt)
             : Math.max(tgt, v - 118 * dt * brakeBias);
u += (v / 3.6) * dt / 13626;              // meters around a 13,626 m lap
var p = path.getPointAtLength(u * path.getTotalLength());

Everything else falls out of that one simulation: gear is a lookup on speed bands, throttle and brake chase the same target with different response rates, and the canvas strip charts just plot the last 520 samples of the ring buffer — speed in white, throttle amber, brake red, like an engineer's overlay. Sector clocks tick because the sim knows which split fraction the car is between. A full lap lands near 3:31, which is an honest LMP2 pace, compressed ×9 so you see a lap in about 23 seconds.

With prefers-reduced-motion, the sim silently runs one full lap into the buffer, draws a single captured frame, parks the car on Mulsanne, and says so in a note.

Other techniques

• Diagonal geometry: plates and buttons use transform: skewX(-8deg) with counter-skewed inner spans; the white drivers section is cut with a clip-path polygon so its edges run at the same angle the car travels.
• Carbon weave: two crossed repeating-linear-gradients at 45° / −45°, at 1.4% white — visible only where light would catch real weave.
• 24-hour bar: a single gradient from afternoon amber through night blue-black to dawn gold, divided into 24 cells by a repeating gradient overlay. The event markers hang off it at their true hour positions.
• Livery zones: the sponsor picker toggles .lit on rect overlays inside the car SVG — hover a row, see where your name rides.

The three iteration passes

Do this yourself

1. Pick a subject with an instrument panel. Racing has telemetry; ships have charts; labs have plots. Build the identity out of the subject's own screens, not stock imagery.
2. Ask Claude for a token system first: 4–6 named hex colors, three type roles (display / body / data), and one signature element. Refuse anything that would fit a different subject.
3. Make the signature honest. A dot moving at constant speed is a loading spinner; a dot that brakes for corners is telemetry. Push for the version where the data means something.
4. Drive one simulation, render many widgets. Speed, gear, pedals, traces and sector clocks here all read from a single state object — ask for that architecture and every gauge agrees.
5. Reserve each accent for one meaning. Red = the car and braking, amber = data, green = a best. When color is grammar, the page needs no decoration.
6. Screenshot, critique, repeat — three times. Ask Claude to screenshot its own build at 1440px and 390px, name the three weakest things it sees, and fix them. Do not accept "looks good".
7. Test reduced motion and keyboard last. A calm fallback (a captured lap, not a dead panel) is the difference between a demo and a product.

← Back to APEXLINE