Standards
Issue 04 · type, colour, parts · deviation must be justified
Every part of this site is assembled from what follows: four faces, two materials, one brand colour, one chamfer. The sheet reads live: switch theme or mode in the header and the specimens below re-issue themselves.
Now in force: resolving the look…
Faces§ 01
Headings, card titles, register rows. Weight, case and tracking travel with the face, so a blackletter or stencil theme swaps cleanly.
Running prose and lead paragraphs. Never below 14px; body measure capped at sizes.measure (62ch).
Every label, badge, caption, timestamp and ID. Tracked .04–.12em. This is the bureaucratic voice of the site.
Stamps only: the footer mark and classification overlays. Two uses on the whole site; keep it that way.
Scale§ 02
Welcome. This is where I build. I see the past not as a burden but as the lifeline that got me here.
Feeds are optimised for someone else. A personal site is the one place on the internet where the layout, the pace and the silence are yours; it does not need to convert, retain or trend. Inline parts: an ordinary link, strong emphasis, italic aside, a token, and a footnote1.
A custom storefront built with Gatsby and React: streamlined product catalog, secure Stripe checkout.
Colour§ 03
Paper
the page and everything set on itInk
solid blocks: header, bands, footer, figuresBrand and field
the flower, CTAs, poster bandsShape, rule, space§ 04
Content centred in the wrap; gutters hold at every width. Below 820px the header collapses to a menu and grids fall to one column.
Motion§ 05
Three curves, borrowed from the logo. Hover a strip to run it; the footer toggle and prefers-reduced-motion zero every duration.
Parts§ 06
StreamSync
A music dashboard on the Spotify API with OAuth and real-time playback control.
A website is a room. Most of mine had been waiting rooms.
:root {
--paper: #F6EFE6;
--ink: #111111;
--brand: #ED3232;
}