This is a colophon — a note on how this site is made. It exists because the how of a thing often reveals more than the thing itself.
The stack
This site is built with Next.js 16 (App Router) and TypeScript, styled with Tailwind CSS 4 and the @tailwindcss/typography plugin for the long-form .prose. Content is local MDX — plain text files in a src/content/ directory, no database, no CMS, no comments.
The fonts
Three families, each chosen for a purpose:
- Inter — the primary sans-serif for body text. Clean, neutral, designed for screens.
- Lora — a serif used for headings. It gives the page a quiet editorial warmth without straining legibility.
- Noto Sans Devanagari — for the occasional post in Nepali (Devanagari script). Set with a looser line-height because the script needs room to breathe.
- JetBrains Mono — for code blocks and small monospace labels.
Loaded via next/font/google so they're self-hosted and subset automatically.
The writing
Math is rendered with KaTeX (remark-math + rehype-katex). Code is highlighted with Shiki via rehype-pretty-code, using a dual light/dark theme that switches with the site's color mode. Footnotes, tables, and GFM features come from remark-gfm and remark-footnotes.
The principles
A few quiet rules I try to follow:
- Content is the product. Everything else — the build, the styling, the deploy — should disappear into the background.
- Plain text is durable. If this site's build tooling disappears tomorrow, the writing should still be readable.
- Whitespace is a feature, not a gap. Calm pages reward attention.
- Speed is respect. Not the anxious kind of speed (everything instant), but the calm kind — pages that load and then get out of the way.
- Dark mode is not optional. It respects the reader's environment and their eyes.
The palette
A warm, minimal stone-and-clay palette: off-white paper, near-black ink, a single muted clay accent used sparingly for links, dots, and emphasis. No indigo, no blue — the brief asked for warmth and I agreed.
The type
Body text sits at ~17px with a 1.8 line-height for long-form readability. Headings use a serif at a slightly tighter leading. The drop cap on the first paragraph is a small editorial flourish, disabled for Devanagari (where it would be illegible).
What's not here
- No analytics. (Add your own if you want them; I don't want to know which posts are popular enough to be tempted to write more of them.)
- No comments. (Email is better for thoughtful disagreement.)
- No tracking. (The only cookie is the theme preference, in
localStorage.)
The best websites are the ones you forget you're using. I've tried to build one of those.
The source
The code for this site is open and adaptable — it started as a personal scaffold and I keep it honest by sharing it. If you want to build something similar, the README covers the setup.
An easter egg, for the terminal-inclined
╔═══════════════════════════════╗
║ arjun bhujel · notes & code ║
╚═══════════════════════════════╝
╱╲
╱ ╲ ─── built with
╱────╲ next.js · mdx
╱ ╲ tailwind · katex
╱ · · ╲ shiki · remark
╱──────────╲
╱ ╲ ─── and patience
╱ ▓▓▓▓▓▓▓ ╲
╚════════════════╝If you're reading this in a terminal, the alignment is probably perfect. If you're reading it in a browser, it's a small reminder that the web is, at heart, plain text wearing nicer clothes.