# Reloop Digital — design system Site: reloop.digital This is the source of truth for how this site is built. Any agent — human or otherwise — working on reloop.digital reads this before making a change. It is not documentation written after the fact. Where the site and this file disagree, that disagreement is a bug and is logged at the bottom. --- ## 1. Tokens Six colours. Always bind to the variable; never hardcode a hex value in a style. | Token | Value | Variable | Used for | |------------|------------------------|-----------------|----------| | Ink | `#10151F` | `--ink` | All type and rules. Blue-black, hue 222°, never pure black. | | Paper | `#FFFFFF` | `--paper` | Page background. | | Mist | `#E8EAEE` | `--mist` | Cards and panels that sit back from the page. | | Volt | `#BFFF00` | `--volt` | Highlighter. Emphasis, numerals, markers. | | Signal Red | `#E62D2D` | `--signal-red` | One job only: the scribbled overline drawn under a link on hover. | | Ink Muted | `rgba(16,21,31,0.6)` | `--ink-muted` | Secondary and supporting text. | Every hairline, underline and drawn rule is Ink at reduced opacity. Nothing is a one-off colour. **Volt is rationed.** It is the only saturated colour on a neutral site, so its value is scarcity. If more than roughly one element in six on a screen is Volt, it has stopped being emphasis and become pattern. --- ## 2. Grid - **Module: 40px.** Every width, height and offset is a whole number of modules. - **Left margin: 60px.** Content container 1360px at desktop. - **Column canon: 1, 2, 3, 4 or 6.** No other division exists. Five columns would give 208px and seven would give 125.7px — neither is a whole module. If a layout seems to want five, it wants six with one left open. - **Fields bleed off one edge** and terminate on a column line. Symmetric insets read as a boxed panel, which is the habit this system rejects. - **Horizontal rules land on document-absolute multiples of 40** — not merely 40 apart from each other. Alignment is measured against the page, not the parent. --- ## 3. Type - **Baseline: 24px.** Re-synchronises with the 40px module every 120px — three modules, five lines. - **Measure: 45–75 characters**, target 66. Below 45 the eye jumps; above 75 it loses the line return. - **Body: 18px / 28px** on editorial pages. - Weight carries hierarchy before size does. A 500 weight at 15px outranks a 400 weight at 16px and costs less vertical space. --- ## 4. The rules 1. Every width, height and offset is a whole number of 40px modules. Nothing lands between lines. 2. Columns come from 1, 2, 3, 4 or 6. No other division exists here. 3. Fields bleed off one edge and stop on a column line. Never boxed in on all four sides. 4. Running text stays between 45 and 75 characters a line, with 66 as the target. 5. Type sits on a 24px baseline, re-syncing with the module every 120px. --- ## 5. Known trade-offs Documented deliberately. A system that only records its intentions is marketing. - **Readability beat arithmetic.** The 24px baseline does not divide the 40px module. A 20px baseline would, but at 17px body copy that is 1.18 leading and lines collide. Cost: a three-module sync instead of one. - **The measure runs long.** Body text sits near 75 characters — the top of the range rather than the 66 optimum. Narrowing the column would fix it and shorten the page. - **Cards tighten before the grid breaks.** In three columns, card text drops to about 34 characters on narrower screens, under the 45 minimum. The grid should fall to two columns sooner. - **Nav and footer predate the system** and are not yet module-aligned. --- ## 6. Drift log Places where the live site currently contradicts this file. These are bugs. - **Paper is white, not warm.** The `/design-system` page describes Paper as `#F7F7F5` and "warm, so it reads as paper". The rendered background is `#FFFFFF`. Either the token changes or the copy does. Unresolved — 8 Aug 2026. - **`.marquee-inner-box` at the `xl` breakpoint** sets 28px padding (off-module), 20px type and a hover of ink-fill / paper-text instead of Volt / Ink. Predates this file and contradicts §1 and §2. ### Resolved - **Token names now match the system.** Variables were `Primary`, `Secondary`, `Grey`, `Accent Volt`, `Hover` — generic names that forced a translation step between the documentation and the build. Renamed to `Ink`, `Paper`, `Mist`, `Volt`, `Ink Muted`. Fixed 8 Aug 2026. - **Signal Red had no variable** and was hardcoded wherever it appeared, which contradicted §1. Now `--signal-red`. Fixed 8 Aug 2026. --- ## 7. How this file is used This site is built in Webflow, so nothing compiles. There is no build step that reads this file and fails a check — and claiming otherwise would be the exact kind of unfalsifiable statement this system exists to avoid. What it does do: it is the context an AI agent is given before it touches the site. Tokens, module, canon and measure arrive as constraints rather than preferences, which is why the tenth screen matches the first. The drift log is the honest half — it records where the site has got ahead of its own rules. *Last verified against the live site: 8 August 2026.*