Colophon
The page where a site explains itself. No frameworks and no build step: everything here is HTML, CSS and JavaScript you could read with view source.
Ingredients
- Markup
- HTML written by hand. Every tag on purpose.
- Style
- One stylesheet with custom properties. The playground rooms keep the old lab stylesheet.
- Motion
- A little plain JavaScript and the Web Animations API. The playground still runs on GSAP.
- Type
- Instrument Sans for everything, with DM Mono for the small labels. Both are open-license fonts, self-hosted.
- Colors
- My six (paper, navy, teal, coral, and their pale tints), plus honey and sage.
- Drawings
- Made in my Heliopolis style with an image model, then recolored into this site’s colors. Each file keeps its prompt next to it.
- Shapes
- Suns, cogs, blobs, beans and arches, drawn once as SVG and reused everywhere.
- Pictures
- Room pictures are screenshots of the real rooms. Magpie’s popup is redrawn in HTML from the real one.
- Host
- Vercel. Every push to main goes straight to the internet.
- Memory
- Git for time travel. No backup files, no final-final-v2 folders.
House style
Version 1.0.
A poster, not a hero.
Every page opens with one of my drawings on a big round shape, never boxed in or cropped.
Round, never square.
Suns, blobs and arches do the decorating. Buttons are pills. Bands end in waves and scallops, not straight cuts.
Eight colors.
Paper and navy carry every word. Teal, coral, honey and sage carry the shapes. The pale tints are the bands.
One typeface.
Instrument Sans at a regular weight, big where it matters. DM Mono for dates and numbers.
Real over cute.
If it doesn’t work, it isn’t in the projects. The fun stuff lives in the playground.
No em dashes, mobile first.
Ever. And everything is tested at 390 pixels wide.
References
The structure and the shape language come from Figma Slides (opens in a new tab): a calm frame, big friendly type, chunky shapes and bands of color. The drawings come from Heliopolis, the team space I designed for HelioFlux, where the fine navy pen started. The colors are my own, tuned until navy could carry all the text, with honey and sage added so the sun could be a sun.
Versions 0.5 to 0.9 were the lab: stacked color slabs, dot tags, draggable stickers and a lot of confetti. The rooms in the playground still wear that look, and the log keeps the receipts.