Design system
How this is built.
The visual language Loopwork ships, written down. Tokens, hairlines, components, and the principles that hold them together. The same rules apply across the practice and the publication.
01Tokens
The atoms.
Colour, type, and spacing. Each token has a name and a job.
Colour
Eight stops. Two purposes.
Cream papers for the two sides of the brand, ink and ink mutes for type, two sepias (one decorative, one for text), surface for tinted bands, and two signal colours for verdicts. Sepia text is the only sepia that may appear on type.
-
PaperPractice cream
--color-paper -
Paper pubPublication cream
--color-paper-pub -
InkBody type
--color-ink -
SurfaceTinted bands
--color-surface -
SepiaDecorative only
--color-sepia -
Sepia textAnchors, eyebrows
--color-sepia-text -
SignalRed verdict
--color-signal -
GreenMet verdict
--color-green
Typography
Three families. Each with one job.
Source Serif 4 carries the brand (display, body, marginalia). Inter handles interface and navigation. JetBrains Mono is reserved for numbers, codes, and technical material. Italic Source Serif is the brand's emphasis tool, not a separate face.
Spacing
Vertical rhythm.
Section padding sits at 96px top and bottom on landing surfaces, 80px on report surfaces. Subsection breaks sit at 56px. Paragraph rhythm comes from line-height, not extra margin.
02Hairlines
Three hairlines, three jobs.
The most-violated rule. Each kind of line means a different thing. Mixing them is the fastest way to make the page noisy.
Sepia hairline
Section breaks.
Between top-level sections.
The loud structural mark. Use sparingly so each occurrence reads as a section-level boundary. Token: --rule-hairline. 0.5px solid sepia.
Soft-ink hairline
Within-section framing.
Between rows in a list, question rows in a report, items in a stack.
Quieter than sepia. Ties the spine and the margin into a horizontal unit without competing with section breaks. Token: --rule-soft. 0.5px ink at 8% opacity.
Whitespace
Paragraph rhythm.
Within prose. No line.
For paragraph spacing inside a single thought, the answer is whitespace, never a hairline. If a section feels noisy with lines, the fix is usually demoting some sepia to soft-ink, not removing the line entirely.
03Components
The patterns.
Each is reusable. Each has a job. Built from the tokens above.
Component
Eyebrow label.
Sans uppercase, letter-spaced 0.1em, sepia-text. Sentence-case content, treated as a register not a heading. Sits above titles, section heads, and aside rows.
Component
Marginalia row.
Trade-off.
WatchSpeed of capture against fidelity of listening.
Risk.
WatchConsent boundaries.
Italic sepia kind label, sepia-anchor (Watch, Use, Strong on, Gap), sans body. Soft-ink hairline between rows.
Component
Level dot (Gauge).
Sepia ring with an inner solid sepia dot that grows with the automation level. Encodes "AI fills more of the work" without RAG-coded judgement. 22px at-a-glance, 28px display.
Component
Verdict dot (Plumb).
RAG colour from the brand palette: green for Met, sepia-text for Amber, signal for Red. Used only where a qualitative verdict is meant.
Component
Hand-drawn sketch.
Sepia 1px stroke, round line-caps, slight bow (~1px deflection), corner overshoots (~3px). Italic Source Serif label below. Concept first, never decoration.
Component
Section head.
01Section tag
A section title here.
A short italic lead beneath.
Eyebrow + title + italic lead, with an optional 240px sketch in the right column at desktop. The page's most-used header pattern.