Sheet 09 — the working system
The system that draws these sheets
Not a style guide written about the site — the site’s own tokens, classes and timing, rendered here so any claim on this sheet can be checked against the thing that makes it.
01 Colour
Nine roles, emerald field and violet attention
Every colour is a custom property declared once and read everywhere. Both themes change only these values; not one rule below them names a colour.
--pageThe sheet itselfpaper ground--paperInkbody text · 14.78:1--mutedSecondary inkcaptions, hints · 5.34:1--accent-textAttentionlinks, markers, focus · 8.54:1--edgeBoundaryfield rules only · 5.52:1--ruleHairlinedecorative · —--rule-2Row rulea touch stronger · —--slabRaised paperplates, receipts--bandClosing bandemerald field
Contrast figures are measured against the sheet, not copied from a palette generator. Emerald is the field; violet is attention and never body text.
02 Type
Three faces, five steps
- Fraunces 600 · clamp(42→64) · −.024emSheet headings
- Fraunces 600 · clamp(30→44) · −.016emSection heads
- Fraunces 600 · 19/1.3Small heads
- Newsreader 400 · 19/1.62The line under a heading, set once.
- Newsreader 400 · 15/1.7 · mutedSecondary paragraphs and notes.
- Plex Mono 400 · 11 · .16em · capsFolio 01 — the sheet’s address
Fraunces for display, Newsreader for reading, IBM Plex Mono for the ledger’s labels — all self-hosted, none loaded from a third party.
03 Rhythm
One beat, every sheet
| Token | Value | What it is for |
|---|---|---|
| --section-top | 6rem / 96px | the shoulder above a section |
| --section-top-sm | 4.5rem / 72px | the same, on a phone |
| --section-bottom | 3.75rem / 60px | the floor beneath every section |
| --mast-h | 68px / 58px | the sticky bar; sticky table heads clear it |
| --dot-gap | 24px | the pad’s lattice, and the hero dust’s grid |
The measure is 1180px with 40px gutters; the sheet is 1280px with a 56px spine. Nothing is expressed in vw except the display clamps, so the column never changes with the window.
04 Surface
Paper, not panels
A 24px lattice of ink points at 10%, painted by the sheet itself. Tables that run the full measure sit on a clean sheet of the same paper, so a rule never lands on another rule.
One pixel, two weights: --rule for decoration, --rule-2 for rows. A field’s own boundary uses --edge, because a boundary is a control, not decoration.
Elevation is an inset accent rule, never a drop shadow. Radii are 2px, or 0 on a field so the rule stays a rule.
05 Controls
One box, two weights
44px tall, 600 15/1, 2px radius. The secondary keeps the underline idiom at the same height, so the pair reads as weight, not size. Disabled keeps three channels: the word, the fill, the cursor.
The underline is painted as a background gradient so it draws along each wrapped line. A status never travels as colour alone — the word is always beside it.
Fields are rules, not boxes: a mono label in the margin, one hairline under the answer, and 2px of accent on focus. The accent lands instantly; nothing fades in.
06 Motion
Four interactions, one curve
| Interaction | What moves |
|---|---|
| Door reveal | the 4:3 plate in a home door, 220ms |
| Logo ink-to-colour | the wordmark dot and plate, 220ms |
| Link underline draw | a rule painted left to right, 200ms |
| Statement reveal | the home h1, once per visit, 240ms |
| Graphite dust | the hero field; pointer only, asleep at rest |
Everything timed runs 200–250ms on --ease-move, cubic-bezier(.4, 0, .2, 1). Nothing animates on scroll, nothing autoplays, and prefers-reduced-motion turns the lot off — the dust simply never mounts.
07 Accessibility
Built in, not audited in
- Every colour pair above meets WCAG 2.2 AA; the figures are the ones in the token comments.
- Focus is a 2px accent ring with 2px offset, always visible, never animated in.
- Both themes are one rule set — switching changes token values only, so nothing goes unchecked.
- The skip link is the first focusable thing on every sheet, and lands on
#main. - Content is visible with scripting off; the hero’s dust is the only layer a script adds.
- Motion respects
prefers-reduced-motion; touch pointers never get the dust.
This page names rules, not scores: an audit result belongs to the build it was run on, and would be out of date the moment the next sheet shipped.
08 Where it lives
The files behind this sheet
tokens.css (colour, type, rhythm) · base.css (reset, type, primitives) · components.css (the sheet, its parts) · resume.css (the CV, scoped). Decisions and their reasons are in the repo’s decision log, not on this page.