Sheet01 / 05 · The design system

Sourcepublic/the-desk and public/one-screen · read at build

Mathsscripts/lib/oklch.mjs · shared with the gate

The design system

A blue mat, white paper and one amber.Six grounds, one ink each.

My Desk is drawn from fourteen colours, three typefaces and one curve. Everything below is read out of the desk's own stylesheet when the site is built, so it can't describe a desk that has since moved on. Every pairing is measured.My Designs gives every scene a ground and exactly one ink to go with it, and two typefaces between them. Everything below is read out of the page's own stylesheet when the site is built, so it can't describe a page that has since moved on. Every pairing is measured.

The desk is a real object lying on a real mat, so the palette is materials before it is anything else: the mat, the paper, the glass of a monitor, a receipt, a post-it. Each material gets the one ink you'd actually find on it.Each scene is a poster in two colours, picked as a pair and never mixed with the pair next door. The one exception is the phone, which is an interface inside the poster and gets plain paper and ink.

Open this page from the other design and every section here changes to describe that one instead. The switch is the pill at the top.

Sheet02 / 05 · Colour

SpaceOKLCH throughout, never flattened to hex

Tightest pairMy Desk 7.92:1 · My Designs 8.94:1

Colour

Grounds, the ink on each, and two marks.Seven pairs, and the ratio each one measures.

Grounds

The materials. Nothing on the desk sits on a colour that isn't one of these.

--matoklch(0.30 0.035 245)The cutting mat. The ground under everything.
--mat-doklch(0.235 0.03 245)The darker mat, under the pills and the dock.
--paperoklch(0.965 0.012 85)Every sheet you pick up off the desk.
--screenoklch(0.2 0.025 255)Monitor glass.
--thermaloklch(0.975 0.006 95)Receipt paper.
--stickyoklch(0.9 0.13 98)The post-it.

Ink

One for each material, so a sheet of paper never borrows the mat's cream.

--coreoklch(0.93 0.03 85)Cream, for anything written on the mat.
--inkoklch(0.21 0.015 60)Pen on paper.
--redoklch(0.43 0.18 27)The red pen: corrections and my notes in the margin.
--navyoklch(0.3 0.09 262)Ballpoint, on the post-it.
--tinkoklch(0.25 0.012 260)Thermal print on the receipt.
--iceoklch(0.94 0.02 230)Type on the monitors.

Marks

The two colours that sit on top of everything else rather than under it.

--accentoklch(0.78 0.15 62)Amber. Focus rings, highlights, the one warm thing on a blue mat.
--hioklch(0.91 0.15 100)Highlighter, under the lines that matter.

Every pairing, measured

WCAG contrast, ink against ground. The tightest is --red on --paper at 7.92:1.

--core on --mat11.05:1Labels and type on the desk itself
--core on --mat-d13.53:1The pills, the dock and the clock
--ink on --paper16.04:1Every sheet
--red on --paper7.92:1Handwriting and corrections on a sheet
--tink on --thermal14.89:1The receipt
--navy on --sticky10.29:1The post-it
--ice on --screen15.24:1The monitors

The pairs

A ground and its ink, and where on the page each pair is used. The tightest is --peach on --rust at 8.94:1.

--rust on --cream9.69:1The payment, and the last screen
--brown on --sand10.73:1Before: the four screens it used to be
--peach on --rust8.94:1The BPO numbers, and the web work
--amber on --night9.36:1How it's built
--orchid on --plum10.75:1inclusive.io
--soot on --yolk11.70:1Quoin
--ink on --paper16.90:1The phone's own interface

Sheet03 / 05 · Break it

Gated558 pairings · 82 decorative

ScopeWritten to this page only, never to :root

UndoOne button, and it says how many moved

Break it

Drag a token and watch what it costs.

This page runs on its own named tokens, set to the design's values. Turn System Mode on and every token on it gets a slider, the page repaints as you drag, and the table recomputes what each pairing measures against what it's held to.

Press Ctrl + . to take the screwdriver to it. Everything below is the live palette either way.

Token

oklch(97% 0.01 85)

What this token is held to, recomputed as you move it

Body on deep16.28:1clears 7
Secondary body on deep16.28:1clears 7
Eyebrow on deep8.04:1clears 7
Margin note on deep8.04:1clears 7
Accent rule on deep8.04:1clears 3
Hairline on deep1.52:1decorative
Row rule on deep2.87:1decorative

Sheet04 / 05 · Type

ServedFrom this site, never from Google

Type

One wide sans, one mono, and my handwriting.A tight sans for saying it, a serif for reading it.

Craig HawkesArchivo · variable, 400 to 900, width 62 to 125%The name, every headline and the body. The width axis is what lets the name fill the desk.
SPEC SHEET · 551JetBrains Mono · 400 to 700Labels, kickers, numbers, the dock. Anything a printer or a machine would have set.
fixed to 10Caveat · 400 to 700My notes on my own work, in red pen on paper and amber on the mat. Never for anything else.

Four screens down to one.Inter Tight · variable, 400 to 900The name, the claims and the interface on the phone. Set tight and heavy, because each scene says one thing.
Six people tried it before me.Newsreader · 400 to 600, with italicEverything you read rather than scan. A serif so the story reads like one.

Sheet05 / 05 · Space and motion

Grid8px baseline, seated by Quoin on My Designs and on My Desk's phone layout

Space and motion

One desk, and a camera that moves over it.One artboard, scaled to your screen.

Every object has a place on the desk in plain pixels, and each section is a frame the camera flies to and fits to your screen. On a phone the same objects stack into a column you scroll.The desktop page is designed on a 1440 by 900 artboard, and one unit, the smaller of your width over 1440 and your height over 900, scales all of it. A phone gets its own layout rather than a squeezed one.

The desk's motion, as declared. One curve, two durations, and a spring kept for objects landing.My Designs' motion, as declared. The same curve and the same two durations as the desk.
Token	Value
`--ease`	cubic-bezier(.22,1,.36,1)cubic-bezier(.22,1,.36,1)
`--d1`, most things	700ms700ms
`--d2`, the big moves	1300ms1300ms