The system

Principles

1. Hairlines, not containers. Structure is drawn with 1px rules on a shared grid. No cards, no shadows, no rounded corners — border-radius: 0 is set globally and is a system rule, not an oversight.
2. Compression marks data. Anything that is a value rather than prose — a date, a period, a stack, a label — is set in the condensed width. This is what reads as technical. It replaces the monospace eyebrow that every other engineer site uses.
3. Monospace is for code only. Nothing else on the site is monospaced. Reserving it keeps it meaningful.
4. Numbers get room. Tabular figures everywhere, so columns of dates and durations align down the page.
5. One accent, load-bearing. Magenta means active, current, or the one thing to click. It is never decoration. If a page has more than three magenta marks, one of them is wrong.
6. Density is a courtesy. Do not pad to fill space. An engineer reading this should get a lot per screen.

Typeface

Width axis

• Condensed · 87%Labels, dates, periods, stacks
• Display · 94%Headings and titles
• Normal · 100%Body copy and long-form prose

Type scale

• DisplayEuan Cowie
• Page titleNotes from production
• LedeInfrastructure for places you cannot redeploy into
• Row titleShipping software to the North Sea
• BodySatellite links offshore are narrow, expensive and intermittent.
• LabelSelected work
• Data2023—Present · 4 min read

Colour

Surface

• --paper

  Ground. Cool drawing paper, not warm cream.

• --paper-sunk

  Code blocks, insets, pressed states.

• --paper-raised

  Form fields.

Ink

• --ink

  Primary text. 16.9:1 on paper.

• --graphite

  Secondary text and body copy. 6.4:1.

• --faint

  Labels and metadata. 4.8:1 — clears AA at 11px.

Linework

• --rule

  Hairline. The graticule. Decorative.

• --rule-strong

  Section boundaries. Decorative.

• --field

  Interactive borders — inputs, buttons, pickers. 3.5:1, so it clears WCAG 1.4.11 for non-text contrast. Decorative rules do not need this; controls do.

Accent

• --accent

  Chart magenta. Lights, hazards, live things. 6.2:1.

• --accent-quiet

  Selection and focus halo.

Every value has a dark-mode counterpart defined in the same file. The dark palette is a night chart: deep blue-black, magenta lifted to stay above 4.5:1. Measured: ink 16.9:1 light / 15.1:1 dark, graphite 6.4 / 7.6, faint 4.8 / 5.1, accent 6.2 / 6.1. Switch your OS theme to see it — nothing here is hard-coded to a mode.

Components

Control strip

Actions share hairlines rather than floating apart. The first is the primary; hovering any of them fills with accent.

Row

The workhorse. Title and summary left, metadata right-aligned in condensed caps over a data line.

Title block

Article metadata as labelled fields, like the block naming a drawing’s scale, date and revision.

Field

Rules of thumb

• Never introduce a second accent hue. If something needs to stand out and magenta is taken, use weight or a rule.
• Never add a border-radius, a shadow, or a gradient.
• Never use monospace outside a code block.
• Section rails are numbered in document order and reset per page.
• Vertical padding lives on .sheet-body, never on the grid container — that is what keeps the rail hairline unbroken.
• A new colour needs a contrast check against both palettes before it goes in. Text ≥ 4.5:1, interactive borders ≥ 3:1.
• Anything a person can click or type into is bordered with --field, never --rule-strong.