The system the agents build with
Every page here is built from it: the rules the agents follow and what checks them, the tokens, and every component, working.
The rules
- Tokens only
- Colour, type, space, radius and motion come from one file, design/tokens.ts; the CSS is written from it.
- Checked: Tokens drift
- AA everywhere
- Every text and background pair passes WCAG AA: 21 pairs measured from the tokens, every page scanned on a desktop and a phone.
- Checked: Contrast, and axe
- No em dash
- Not in the copy and not in the code: a colon, a comma or a new sentence instead.
- Checked: The guard
- Every component documented
- Each one has its entry on this page and in ⌘K, or the build stops.
- Checked: The registry
- Nothing private
- No phone number, no other people's data; teammates by their roles.
- Checked: The guard's private list
- The agent knows the site
- Ask me answers from a prompt packed from this site's own words, never a stale one.
- Checked: The ask pack
Colour
- background#000000
- foreground#F1ECE4
- cardrgba(255, 255, 255, 0.04)
- card-foreground#F1ECE4
- popover#272727
- popover-foreground#F1ECE4
- glassrgba(38, 36, 34, 0.62)
- glass-edgergba(255, 255, 255, 0.11)
- primary#F69370
- primary-foreground#14100F
- primary-edgergba(0, 0, 0, 0)
- secondaryrgba(255, 255, 255, 0.06)
- secondary-foreground#F1ECE4
- mutedrgba(255, 255, 255, 0.05)
- muted-foreground#B1A9A2
- accentrgba(255, 255, 255, 0.07)
- accent-foreground#F1ECE4
- accent-ink#F69370
- signal#98BE84
- destructive#FF8A7A
- borderrgba(255, 255, 255, 0.07)
- inputrgba(255, 255, 255, 0.10)
- ring#F69370
Contrast
Each pair as it reads, measured from the tokens and held to WCAG AA by the check before every commit. Translucent backgrounds are blended over the page first.
- Aa17.86:1 (min 4.5)foreground on background
- Aa9.07:1 (min 4.5)muted-foreground on background
- Aa9.33:1 (min 4.5)accent-ink on background
- Aa9.17:1 (min 4.5)destructive on background
- Aa16.82:1 (min 4.5)card-foreground on card
- Aa8.54:1 (min 4.5)muted-foreground on card
- Aa8.78:1 (min 4.5)accent-ink on card
- Aa10.03:1 (min 4.5)signal on background
- Aa9.45:1 (min 4.5)signal on card
- Aa7.14:1 (min 4.5)signal on popover
- Aa9.03:1 (min 4.5)primary-foreground on signal
- Aa12.70:1 (min 4.5)popover-foreground on popover
- Aa6.45:1 (min 4.5)muted-foreground on popover
- Aa15.32:1 (min 4.5)popover-foreground on glass
- Aa7.78:1 (min 4.5)muted-foreground on glass
- Aa8.61:1 (min 4.5)signal on glass
- Aa8.40:1 (min 4.5)primary-foreground on primary
- Aa16.27:1 (min 4.5)secondary-foreground on secondary
- Aa8.40:1 (min 4.5)muted-foreground on muted
- Aa15.95:1 (min 4.5)accent-foreground on accent
- Aa9.33:1 (min 3)ring on background
Type
Families
Aa Ćć 0123
Bricolage Grotesque
var(--font-bricolage)
Aa Ćć 0123
JetBrains Mono
var(--font-jetbrains)
Scale
display
One line, set large.
clamp(3.5rem, 11vw, 10.5rem) / 0.88 / -0.04em / 300
display-sm
A story's title.
clamp(3rem, 9vw, 8.5rem) / 0.92 / -0.035em / 300
headline
A belief, or the line a section leads with.
clamp(1.5rem, 3.2vw, 2.5rem) / 1.12 / -0.015em / 300
title
The name of a decision.
1.25rem / 1.2 / -0.01em / 500
lead
A line or two under a heading, saying what the page is about.
clamp(1.125rem, 1.6vw, 1.375rem) / 1.5 / 0em / 300
body
The long version, for anyone who opens Read why, kept to a measure of 45 to 70 characters.
1rem / 1.55 / 0em / 400
small
Notes on a screen, a form's hints, the footer.
0.875rem / 1.5 / 0em / 400
label
Section names
0.75rem / 1.4 / 0.08em / 400
caption
Dates, counts and token values
0.75rem / 1.5 / 0.02em / 400
Space
- Gutter, base
- 1rem
- Gutter, md
- 2rem
- Gutter, lg
- 3rem
- Section, base
- 3.5rem
- Section, md
- 5.5rem
- Nav height
- 4.75rem
- Max width
- 90rem
- Columns
- 12, gap 2rem
12 columns
Radius
The base radius is 0.75rem; the scale derives from it.
rounded-sm
rounded-md
rounded-lg
rounded-xl
rounded-2xl
rounded-3xl
rounded-4xl
rounded-full
Motion
Working
Every duration and easing, at its own timing. Reduced motion moves nothing.
- fast, 150 ms
- base, 300 ms
- slow, 600 ms
- assemble, 1200 ms
- out, 600 ms
- inOut, 600 ms
Easing
out
cubic-bezier(0.25, 1, 0.5, 1)
inOut
cubic-bezier(0.65, 0, 0.35, 1)
Components
Components
- NewDraft
Badge
A short status or category, set as a pill.
- Anything that needs a surface of its own.
Card
A surface at 4% of the foreground with a quiet border and 12 px corners.
- ⌘K
Kbd
A key or shortcut, in JetBrains Mono.
- AboveBelow
Separator
A hairline between groups, in the border colour.
Tooltip
A name for an icon-only control, shown on hover and focus.
Popover
A small layer of glass anchored to its trigger, like the note beside Ask me anything.
Dialog
A focused layer of glass over the page, the page blurred behind it; closed with Escape. ⌘K, Ask me and Write to me are dialogs.
Command
Search across pages, sections, components and actions.
Chapter
A chapter of a case: one statement, two lines of story, the work large, and the long version under Read why.
Frame
A screen or a diagram, large, with the story's notes on it: peach for what I changed, pistachio for what I kept, grey for what I found.
DecisionNote
A decision inside Read why: the options weighed, the choice and why.
Foresight
What I saw coming: the edge cases designed for before they showed up, under a line of the case's own.
- 5,385
BuildNumbers
The Process chapter's proof: the days and what they built as one line, then how, six numbers counting in, beside the session's hours.
Closing
Home's last word: where I am now, Write to me folding the form open, LinkedIn and the resume.
ContactForm
Write to me: name, email and the message on hairlines, checked before it sends, straight to my inbox; nothing is kept.
WorkRows
Home's work as rows of type: the number, the title large, its line and the way in; the whole row is the link. Brief, without the line, on the System page, where Home already said it.
OffTheClockLine
An Off the clock line: the label, the line and a sentence, its form beside it, and what it opens in place: more words, the set or the puzzle.
Shell
- MK
Mark
The mark: MK in Bricolage Grotesque ExtraBold.
CaseStory
A case: the header with its facts, the case's own opening, then the story in chapters.
AskPanel
Ask my AI: an AI that answers as me, from my notes and this site, inside strict limits; on Home it is the hero's composer, Ask me anything.
ContactPanel
Write to me as a panel, from ⌘K and More on every page but Home, where the form folds open in the closing.
Signatures
- 5,385
CodeCount
A number that counts in through the site's own code: its digits flicker through the portrait's characters and settle, once.
ClaudeMe SessionGraph
The session, hour by hour, as small squares like GitHub's contributions: a row per day, Claude's work in the pistachio's depth, a peach mark where I wrote.
Portrait
The portrait in code, drawn with its own source.
KingHunt
The chess line's puzzle: find Lasker's moves against Thomas, London 1912, as the king is hunted to g1.
White knight
GothicSet
The twelve Gothic pieces close up: one large on a pale square of the board's pistachio, the set under it as two ranks of six.
CodeForm
A small form drawn in the portrait's letters, at its density, on its gradient: the keyboard, the bike and the knight in About; on the 404, the field alone, with no form in it.