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

  • InkBody type--color-paper

  • SurfaceTinted bands--color-paper

  • SepiaDecorative only--color-paper

  • Sepia textAnchors, eyebrows--color-paper

  • SignalRed verdict--color-paper

  • GreenMet verdict--color-paper

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.

--size-hero
Hero statement
Page-opening H1. 64px display.
--size-section
Section title
H2 inside a section. 44px display.
--size-lead
Lead under the title
Italic lead paragraph. 24px.
--size-body
Body type for prose, sentence after sentence.
Primary reading text. 19px.
--size-marg
Margin notes anchored by sepia labels.
Marginalia and aside text. 14px.
--size-label
Eyebrow label
Sans uppercase eyebrow. 11px.

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.

96px
Landing section top and bottom padding.
80px
Report section top and bottom padding.
64px
Grid gap inside section-head and marginalia grids.
56px
Subsection break inside a section.
28px
Row spacing inside a list of rungs.

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: --color-paper. 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: --color-paper. 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.

Step 02 of 02 · User research

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 (Explorer).

Suggested
Assisted
Automated
Autonomous

Sepia ring with an inner solid sepia dot that grows with the automation level. Encodes "AI fills more of the work" without RAG-coded judgment. 22px at-a-glance, 28px display.

Component

Verdict dot (Diagnostic).

Green
Amber
Red

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.

04Principles

What governs the rest.

When the tokens and components aren't enough, these rules pick up.

  1. Motion is restrained or absent.

    Phase 3 build will introduce subtle motion: marginalia fade-ins on scroll, the wordmark threading on first load, gentle hover states. Never bouncy, never scroll-hijacking, never parallax. Reduced-motion preference always honoured.

    Phase 3

  2. Accessibility is the floor, not the ceiling.

    WCAG 2.2 AA across every surface. Two-sepia tokens for text contrast. Focus rings on every interactive element. Touch targets 24·24 minimum. Skip-to-content link on every page. Semantic HTML throughout. See the colophon for the full commitment.

    WCAG 2.2 AA

  3. Sketches are conceptual, never decorative.

    Every hand-drawn sketch carries a concept that ties to the brand or the surface's argument. Generic icons, decorative loops, busy multi-box diagrams are out. The motif is the brand's named thing rendered.

    Sketch grammar

  4. Tool inputs inherit the editorial register.

    Forms, multi-step flows, validation states, completion progress all source from these tokens and components. No SaaS chrome, no rounded card panels with semantic-coloured fills, no status pills. The redesigned Diagnostic and Explorer outputs are the worked examples.

    Tool surfaces

  5. Voice is part of the system.

    Sentence case, plain English, no em dashes, confident-present, no consultant register. The visual system and the voice are one system. Both apply to every surface. See the content style guide for the full rules.

    Voice