01Framework
Next.js · App Router
- React and TypeScript in strict mode — no stray any hiding in the dark.
- Server components by default; client islands only where interaction earns it.
- Statically generated — most routes ship as plain HTML.
Last built · July 2026·hand-rolled — no template
How this site
is put together.
A colophon is the back-of-the-book note on how something was made. This is mine — the stack, the type, the tokens, and the rules I refuse to break. The site itself is the first thing I want to stand behind.
54static routes, prerendered
2languages, RTL-first
1token set themes it all
AAcontrast, dark & light
The build
Every layer chosen to stay fast, legible, and mine to maintain.
02Styling
Tailwind v4 + design tokens
- One set of CSS custom properties drives colour, radius, density and motion.
- Every shade derives from tokens via color-mix() in OKLCH — no hardcoded hex in components.
- Dark-native, light-ready; the theme flips with a single attribute.
03Type
Mona Sans + JetBrains Mono
- Mona Sans for text and UI, its condensed cut for display.
- A dedicated Arabic face swaps in for RTL, tuned to match.
- Self-hosted, subset, and preloaded — no third-party font requests.
04Motion
Reduced-motion first
- Scroll reveals run on IntersectionObserver with a safety timeout — content never sticks hidden.
- Draw-on SVG and scroll-driven CSS, with no animation library.
- prefers-reduced-motion is a real path, not an afterthought.
05Craft
The details most skip
- Real focus states, semantic landmarks, and keyboard paths throughout.
- A command palette and boot sequence, because the site should feel like a system.
- Bilingual copy kept at strict parity — the types won't compile if a string is missing.
06Ship
Vercel + GitHub
- Pushed to GitHub, deployed on Vercel, previewed per branch.
- A small content pipeline generates project and writing pages at build time.
- ESLint and tsc gate every commit.
Type & tokens
The whole site speaks in three voices and one palette.
Display — Mona Sans Condensed
Behind the interface
Text — Mona Sans
I build the parts you don’t see: frameworks, component libraries, and published extensions — fast, accessible, and quietly obsessed with the details.
Mono — JetBrains Mono
const theme = tokens.map(colorMix)
Design tokens
--color-accent--color-cat-library--color-cat-extension--color-cat-pwa--color-cat-app- budget
- Ship it small — every kilobyte earns its place
- access
- Keyboard, screen reader, RTL — parity, not a checkbox
- motion
- Optional by default; nothing depends on it
- tokens
- One source of truth; no magic values in components
- honesty
- Only ship what actually works in production
Want the long version?
The whole site is open source — every layer above is a click away on GitHub. Borrow the parts you like.
The word “colophon” comes from the note printers left at the end of a book, naming the type and the press. This is the web version.