the making-of

colophon…

Every printed book used to end with a note on how it was set. This is that note, for a site that redraws itself on every visit.

01 · how it's made

hand-built, statically sealed.

The whole site is prerendered: no servers waiting on you, just files. The source is private, but it is built with reusable open skill repos, so the method travels even where the code does not.

framework
SvelteKit (Svelte 5), fully static output
content
mdsvex · markdown with components, edited via Sveltia CMS
hosting
Cloudflare Pages, prerendered and served from the edge
fonts
Monument Extended, Chivo, Fragment Mono · all self-hosted
analytics
self-hosted vues, cookieless and anonymized

02 · the type

three voices, strictly cast.

  • monument extended · display · always lowercase

    show yourself more.

    The loud one. Headlines, section titles, the wordmark. Used sparingly, allowed to fill the viewport when it speaks.

  • chivo · body · the working voice

    A grotesque that stays out of the way: paragraphs, labels, forms, everything you actually read.

    Neutral and highly legible; it never raises its voice.

  • fragment mono · annotations · the margin notes

    seed #4f2a91c3 · n=03 · 45.7489°n 21.2087°e

    Seeds, dates, coordinates, readouts. The voice that makes the site feel like a living instrument. It never sets paragraphs.

03 · the colors

one pair per visit.

On every visit the site draws one dark main and one bright pastel secondary before first paint. The pair themes the accents, the selection color, and seeds the generative canvas art. Two visits are never identical; the system underneath always is.

mains · dark, saturated · n=18

  • #b30077
  • #92150c
  • #2100b3
  • #9e00b3
  • #3c1518
  • #007508
  • #793fff
  • #35281d
  • #cc3a00
  • #91171f
  • #00666b
  • #0b2a6f
  • #5e0b4a
  • #6e0f2e
  • #0b4d2c
  • #2e1a8f
  • #9a3a0a
  • #0a4f5c

secondaries · bright, pastel · n=19

  • #bcf141
  • #ffbb72
  • #f2f3ae
  • #41f1b6
  • #64b9ff
  • #ff7d7d
  • #d8a4ff
  • #e2f89c
  • #86e6b3
  • #f1c8db
  • #cdfff9
  • #ffd1a1
  • #b9c6ff
  • #fff3c4
  • #e7b7e1
  • #bfe9ff
  • #c9b8ff
  • #9cf0ea
  • #c8e6b0

04 · credits & inspiration

standing on shoulders.

  • the gallery

    GuyWithTwoCats' demo rooms, proof that a personal site can be a place you walk through, not a document you scroll past.

  • taste-skill

    The design framework that keeps this site honest: taste first, then the craft to back it up.

  • paul rand

    "Design is the silent ambassador of your brand." The line the whole studio leans on. It opens the homepage too.

05 · colophon readouts

fonts n=3
colors 10 × 11 pairs · 110 possible visits
framework sveltekit · svelte 5
host cloudflare pages