Under the Hood

The design system — what this site runs on

This site practises what the methodology page preaches. Every screen is built and maintained by an AI agent working inside the system below — tokens, a grid, typographic rules, and codified skills. This page exposes it, because a system you can't inspect is just a claim.

Colour — four tokens, one accent

A blue-black ink (hue 222°) instead of pure black, warm white paper, a cool grey, and one fluorescent accent used only for numerals and markers. Every hairline, underline, and drawn rule derives from the ink at reduced opacity — nothing is a one-off grey.

Ink · Primary

#10151F — text, rules at 15–38% alpha

Paper · Secondary

#FFFFFF — background

Mist · Grey

hsl(222 14% 92%) — surfaces, reveal cells

Volt · Accent

#BFFF00 — numerals and markers only, always with ink text

The 40px grid

Every measurement on this page is a multiple of a 40px module — section rules, gutters, indents, padding, with 20px as the half-step. The cursor-reveal animation in the background runs on the same lattice, anchored to the content container so a column boundary always sits on the text margin. The visible rules aren’t CSS borders: they’re drawn by the same renderer as the animation, snapped to the same grid. One system, one coordinate space.

Type — light, editorial, baseline-locked

Display headings are large and light (64px at weight 200), section titles 2rem at weight 400 with tightened tracking, body text at a 68-character measure with 1.75 line-height. Emphasis is weight 500, never bold. Section numerals share a first baseline with their titles — a lockup, not a nudge. Numerals are tabular everywhere. Headings balance their line breaks; paragraphs avoid orphans.

Context, rules, skills — the working files

The system lives where the AI works: in files it reads before every session. Context describes the system and the reasoning behind it. Rules constrain what may be built. Skills are repeatable playbooks. This is the actual rules file the agent maintaining this site operates under — not a mockup:

# design-rules.md — reloop.digital
# Read before any visual change. These are constraints, not suggestions.

## Tokens — never use raw values
colour.ink      = #10151F   (Primary — all text; rules at 15–38% alpha)
colour.paper    = #FFFFFF
colour.mist     = hsl(222 14% 92%)
colour.volt     = #BFFF00   (accent — numerals, markers, hover fills ONLY)

## Volt pairing law
text on volt    = ALWAYS ink, never paper — paper on volt fails contrast
volt as hover   = the interactive cue: nav links and index chips fill volt
                  on hover and switch text to ink

## Grid
module          = 40px      (half-step 20px — no other spacing values)
rules           = drawn by the canvas renderer, snapped to module; CSS borders
                  exist only as no-JS fallbacks and go transparent when JS runs
grid.anchor     = content container left edge (never the viewport)
blocks          = chips, cards and index entries are square, sized to the
                  module (40px tall) and snapped to grid rows
columns         = multi-column grids use tracks of whole cells with gutters
                  of exactly one cell, so every column starts on a lattice
                  line; leftover width falls to the right edge
dark sections   = the inverse of the light system, not a different design:
                  flat ink, a paper lattice at 11% phase-locked to the global
                  document rows, paper hairlines in place of ink ones

## Type
display         = 64px / 200 / 1.1 / -0.015em, max two lines, text-wrap balance
section title   = 2rem / 400 / 1.25 / -0.01em
lead            = 1.35rem / 300 / 1.6, max-width 62ch
body            = 16px / 1.75, max-width 68ch, text-wrap pretty
meta / chips    = 0.875rem / 400 / 1, letter-spacing 0.01em
emphasis        = weight 500 — 700 is never used
numerals        = tabular-nums everywhere; section numbers baseline-lock to titles

## Imagery
corners         = square (no border-radius on content imagery — or anything else)
edges           = 1px ink ring at 8% alpha so light screenshots hold on paper
chip borders    = 1px ink at 15% alpha, transparent fill

## Motion
hover           = colour/underline shifts at 150–180ms ease; no lifts, no shadows

## Voice
language        = Australian English, direct, no corporate filler
                  (banned: seamless, leverage, solution, unlock)

## Do not
- introduce new colours, radii, shadows, or spacing off the module
- use volt for body text or backgrounds larger than a chip
- put paper text on volt — ink on volt, always
- ship anything the reviewer wouldn’t put their name on

Alongside the rules sit context files — brand voice, component inventory, decisions and their reasoning (including what was deliberately not built) — and skills: codified playbooks for competitive analysis, story breakdown, and applying this style guide to new pages. Written once, run by any session.

Why expose this

Because the point of the methodology is that AI output quality is a function of context quality — and the proof shouldn’t be hidden. Everything you’re looking at, including this page, was produced by an agent operating under the file above: the restyle from pure black to this ink system, the grid renderer, the baseline lockups, the navigation fixes. The system caught and constrained hundreds of small decisions so they came out consistent.

If you’d like the same under the hood of your product — talk to me.

I streamline complexity into clarity with end-to-end digital strategic expertise.

Schedule a call →