skip to content
06 · System

A warm-paper, bento-structured, two-accent system.

Six pages, two hues, one voice. The rules the site tries to keep.

Neutrals — warm paper scale
--paperTile backgrounds, frame interiors
--paper-2Page background (one notch darker)
--paper-3Chrome, code blocks, inset fills
--hairDefault borders
--inkBody type, dark tiles
--ink-2Secondary text, deks
--ink-3Meta, mono labels, captions
Palette — primary × accent
--primaryTitle italics, primary CTAs, "live" chip
--primary-inkPrimary tile bg, deep-green fills
--accentSection numbers, CTAs, dots, "WIP" chip
--accent-inkAccent text on paper (contrast-safe)
Principles
§ 01

Bento is the layout primitive

Every page uses a 12-col grid with fixed-height rows. Tiles span 2–8 cols, 1–3 rows. Visual weight rotates.

§ 02

One italic word per headline

Titles carry exactly one italic, primary-colored word. It is the emphasis and the voice.

§ 03

Mono does the data work

JetBrains Mono is reserved for anything data-shaped: kickers, chips, timestamps, receipts, legends, nav.

§ 04

Every label carries a mark

Kickers open with a hand-drawn icon — the genre where one exists, a hash where none does. § keeps the section heads.

§ 05

Italic is the punchline

Bold does not do emphasis in body copy. Italic does. Bold is reserved for bold-lead + explanation list items.

§ 06

Delights must be earned

One per page minimum. Three per page maximum. A page without a delight should justify itself or find one.