Colophon
Design notes
How this site is put together — the shared design system, and a page-by-page breakdown of every page on ggrigo.xyz.
Living reference — it describes the current build. As of June 2026 the whole site runs one kit: Spectral × IBM Plex Mono on a slate-and-rose colourway. This page is the canonical description of it.
// the system
One small kit, used everywhere
Every page is a single hand-written HTML file with an inline stylesheet — no build
step, no framework. They share a warm, editorial look: a soft paper background, a slate ink, and a
rose accent carried as a recurring slate-and-rose ribbon. Display is set in Spectral;
everything you read sits in IBM Plex Mono. Colours are CSS custom properties with a
prefers-color-scheme dark variant, so the whole palette flips automatically.
Moving forward: the :root token block at the top of this page's
stylesheet is the canonical kit — copy it verbatim into any new page. Both faces ship globally in
/fonts.css, so no per-page @font-face is needed.
Palette
The four · selected
Supporting — light
Same kit — dark
Data accents — IBD & benchmark pages
Type
Layout & components
- Column widths. Home is a tight 30rem card; articles run 42–47rem; the dashboards are wider at 880–920px.
- The slate-and-rose ribbon. A 7px two-tone bar — slate, then a rose tail — separates the header block from the body. The one recurring motif.
- Cards & panels.
--cardbackground, 1px--lineborder, 12–16px radius, ~1.4rem padding. - Eyebrow / kicker. Mono, uppercase, wide letter-spacing, rose-ink accent — sits above every h1.
- Dek. Spectral italic in muted ink — the standfirst under each title.
- Draft banner. Left ribbon border + mono text — the shared “work in progress” marker on every draft page.
- Data viz. Hand-built inline SVG (log-scale line charts), CSS bar charts, and a small vanilla-JS calculator — no chart library.
- Fluid type.
clamp()throughout, so headings scale with the viewport instead of breakpoints.
// the pages
Page by page
The hub — name, role, the outbound links, and the index of writing.
The most minimal page: a single centred 30rem column, no cards. Sets the palette and type everything else inherits — Spectral name, the slate-and-rose ribbon.
One year of following every IBD Leaderboard alert, marked to the dollar — net roughly flat against a market that ran away.
A data dashboard rather than an essay — verdict hero, benchmark bars, stat grid, per-position P&L. On the kit, keeping its dedicated green/red/gold data colours and a wider 920px column.
A plain-English explainer on measuring whether an AI agent can do real work — train, test, bench, baseline, review.
A card-and-steps explainer — the cleanest expression of the editorial kit: Spectral headings, numbered step circles, the dashed flag boxes.
An hourly email agent that drafts replies, posts them to Slack for review, and learns from emoji feedback — without ever sending.
A flow-and-grammar diagram page. Migrated off its old indigo product palette onto the kit, and gained a dark-mode variant it didn't have before.
Putting the never-sends agent on a held-out benchmark — driving invented facts from ~half its drafts to zero across five versions.
The same indigo-to-kit migration as its sibling, plus a results table whose win-row and good/bad metric colours were tuned to read in both light and dark.
// specimen pages — intentional exceptions
Two pages stay off the kit because their whole job is to show other type and design: /type-pairings (a matrix of five serif × monospace pairings — it must render many faces) and /design-system (a separate reference sheet with its own typewriter theme and a three-direction switcher). Converting either would defeat its purpose. The slate-and-rose kit is proposal 02 from /type-pairings, applied.
Type & colour reselected and rolled out. The site moved from Newsreader + terracotta
to Spectral × IBM Plex Mono on a slate-and-rose colourway — chosen on
/type-pairings (the Editorial Kit). Home, IBD, measuring-agents and
both shadow-worker pages are now on the kit; the old style is backed up off-deploy under
_private/style-backup-2026-06-20-pre-spectral/.