The design system
Everything the site is built from: colour, type, spacing, components and motion. Build any new page out of these parts and it will look like it belongs.
Colour
Two backgrounds only : bone and ink. Red is for one thing per view: the primary action, the live indicator, or a single emphasised card. Never a red gradient, never red body text.
Typography
Mono is reserved for eyebrows, prices, metadata and captions. It never carries a sentence of body copy : that's what makes it read as instrumentation rather than decoration.
Components
Hover inverts fill and text : red becomes bone, ink becomes red. 200ms ease, plus a 3px lift on the hero action only.
Page gutter clamp(20px, 3.5vw, 48px), max width 1720px, section rhythm clamp(52px, 6vw, 110px).
Card grids use auto-fit minmax(250px, 1fr) with a 1px gap over a border, so dividers are hairlines rather than gaps. Corners stay square everywhere.
Index rows fill with ink and shift right on hover. Images scale to 1.04 over 700ms. Buttons invert over 200ms. The scroll bar at the top of the page is the only ambient motion besides the service marquee.
Everything respects prefers-reduced-motion.
Rules for new pages
Every page opens with an ink header band: mono eyebrow, oversized uppercase title, one line of lede. No exceptions : it's what makes the site feel like one site.
Alternate bone and ink sections down the page. Two consecutive ink sections is a mistake; a red section is only ever the closing call to action.
Lists of things are index rows, not card grids, wherever the items have a price or a number. Cards are for things with images.
Never state a number you can't stand behind. No invented client counts, no fake testimonials, no percentage uplifts : the pricing is the proof.