\ Design kit

The parts

Everything the site is made of, rendering live. Not a description of the components — the components. If something here looks wrong, it is wrong on the site too.

White dominates

Where the red may go

#e2342b measures 4.41:1 on white. That clears AA for large text (3:1) and misses it for body copy (4.5:1) — by a hair, which is the dangerous kind of miss, because it looks fine to whoever picked it. So the red splits into three values that are not interchangeable: a surface colour, a text colour, and a fill for anything that has words on it — because a white label on #e2342b is that same 4.41:1, and a button label is not large text however bold you set it.

The previous brand broke its entire light theme by using a surface colour as a text colour — links at 3.59:1, kickers at 2.14:1, quotes at 1.41:1 that nobody could read. That is the failure this split exists to prevent, and it is why every value below is quoted with the ground it was measured against.

Colour

• Red --red
#e2342b light #e2342b dark 4.41:1 light · 4.23:1 dark

  The one hue. A SURFACE and a display colour: the block, the mark, a glyph, a heading word at 19px/700 or bigger. Never a paragraph, never a caption, never a small link — and never a fill with a label on it, because white on it is that same 4.41:1.

• Red, field --red-field
#c9251d light #c9251d dark 5.58:1 against the white label

  The fill for a red thing with WORDS on it — the primary button, the live pill, the skip link. One value in both themes, because what it has to clear is the white label sitting on it, not the page underneath. Its hover (--red-field-hover) is the theme-aware half: it darkens on white and lifts on the dark page, so the label never gets harder to read on the way in.

• Red, readable --red-deep
#c9251d light #f0524a dark 5.58:1 light · 5.34:1 dark

  The only red allowed at body size — links, kickers, small bold, inline code. It goes darker on white and lighter on the dark page, because the ground moved.

• Red, bright --red-bright
#f0524a light #f8776f dark 3.49:1 light

  Hover on something that is already a red fill. Never text.

• On red --on-red
#ffffff light #ffffff dark 4.41:1 on --red · 5.58:1 on --red-field

  White, and only white, on a red field. On --red that is 4.41:1, which buys a GRAPHIC (the mark on the block) and large display type — not a label. Anything with words in it sits on --red-field instead.

• Paper --paper
#ffffff light #131217 dark the ground

  The page. Pure white, not cream — white is the dominant colour of this brand and the red only reads as loud because of how much of it there is.

• Surface --surface
#f7f6f5 light #1b1a21 dark the ground

  A panel lifted off the page.

• Surface 2 --surface-2
#efedea light #232128 dark the ground

  A panel on a panel; the code-block ground. The harder background to pass contrast against, which is why every ratio above is quoted against it too.

• Line --line
#e9e6e2 light #2c2a33 dark decorative

  Hairlines and dividers. Decorative only — it is not required to pass anything, and nothing you need to see is drawn in it.

• Edge --edge
#8a848e light #7a7482 dark 3.64:1 light · 4.13:1 dark

  The border of something you can click or type in. Non-text contrast needs 3:1, which is a different bar from text and this clears it.

• Ink --ink
#16151a light #f4f2f6 dark 18.16:1 light · 16.76:1 dark

  Body copy and headings. Nearly everything you read on this site is this colour.

• Mute --mute
#56525c light #a8a2b0 dark 7.62:1 light · 7.51:1 dark

  The standfirst, meta lines, captions. Still AAA — quiet is not the same as low contrast.

• Faint --faint
#6c6771 light #8e8896 dark 5.50:1 light · 5.43:1 dark

  Labels — kickers, eyebrows, breadcrumbs, captions — BOLD UPPERCASE MONO, and nothing else. It used to be two steps lighter on the theory that the treatment let it hold at 3.46:1; there is no such exemption, and it was the kicker on every page. Never prose, never a sentence, never a link.

The mark

Five strokes: three teeth leaning 13° off vertical, a true vertical, and a leg kicking out at 26°. It is the cut of a key in front of an M and a K sharing one stem. The two angles are different on purpose — matched, the leg becomes a fourth tooth and the whole thing reads as one long zigzag. How it is built and how to use it: the brand kit.

One colour per context, and the mark is never split. All red on the white page, all white on the red block. Two-tone was tried in every combination and it destroys the letters rather than decorating them: a red stroke on a red field is an invisible stroke, and once one of the five is gone there is no mark left to read.

The block in the middle is squared off, not torn. These tiles are well under the size the rough edge is tuned for, and at this scale the filter chews the mark rather than the edge — which is the rule below, demonstrated by obeying it.

The wordmark

Mate, the middle word in red, Key. The name is a dad joke on mine and it is meant to land as one — the red is on the word that does the joke, not scattered across all three.

Below about 19 px it drops to all ink — the second sample above, which is the component's ink variant. Same 4.41:1 rule as everywhere else: under display size the red word stops being a display word and starts being body text. The footer wordmark, at 14 px, is the one you will see this on.

Three strokes, no numbers

There are no numbers anywhere on this site. Not on the beats below, not on a list of steps, not on a set of features. A number would be arbitrary — three because three fits the grid. These three are the logo taken apart, so the marker means something.

• /

  One wish

  a tooth of the key — the thing you wish your computer did

• \

  a few key strokes

  the counter-tooth — the words that turn it into a thing

• |

  your mates deliver

  the stem — the vertical the M closes on and the K stands on

The rough edge

Type

Three faces, self-hosted and subset at build, so the page never calls a font host at runtime. A display serif with a bit of wonk in it, because this is one bloke talking rather than a product; a plain sans under it; one mono doing two jobs.

Those two mono jobs are worth naming. In a code block it means this is literally code — something you paste into a terminal. In a small uppercase label it is a brand voice, not a claim that the label is code. That is the only place the face is allowed to be decorative, and it holds because the label is short, bold and tracked. Setting sentences in it would make a site written for people who have never opened a terminal look like a developer tool.

The icon library

56 shapes, hand-drawn on a 24×24 grid for a 2px stroke, round caps and joins, all on the same optical weight — so any two sit together without one looking bolder. They inherit currentColor, which is what lets the same icon be ink in a paragraph and white on the block.

Components

Buttons

One filled and one outlined, and that is the whole set. A third variant would need a second colour to be a variant of anything.

Tags

• files
• a script
• no repo needed

Card

Code block, with its copy button

Every code block in rendered content gets one. The prompt is the single thing a visitor has to get out of a project page intact, and selecting thirty lines in a scrolling box on a phone is genuinely awful.

The button is labelled Copy and keeps saying Copy — only the glyph swaps on success, so the box never resizes under the reader's eye. And nothing but the prompt ever goes inside the <pre>: the button serialises the block's text, so a line-number gutter or a language badge in there gets copied into the prompt and corrupts it silently.

echo "the copy button is added at runtime, to every block"

Artwork

Abstract cut-paper collage, used as the banner on the listing pages. It is generated: node scripts/art/generate.mjs, with the concepts in scripts/art/concepts.json and the medium in a single constant, so the whole set can be restyled in one edit. Alt text is written by the same script into src/assets/art/alt.json and read from there — a description kept anywhere else drifts from its picture, and it drifts for exactly the readers who cannot check.

This set was made for the previous identity and still carries its two colours. Four of the thirteen are below; the rest are in src/assets/art. It is the one part of the site that has not been redrawn against the one red — read it as a placeholder, not as a licence to bring a second hue back.

Every page

All 14 of them, live. These are iframes of the real pages, not screenshots — a screenshot is a picture of the site as it was the day someone last remembered to retake it. Click any one to open it properly.