Creative North Star: “The Considered Study”
This is a calm, well-kept desk, not a landing page. Everything sits in one narrow column (max-w-2xl), left-aligned, on warm paper — as if a maker cleared a surface, placed a few things down on purpose, and invited you to look. The impression to leave is the strategic line from the product: someone who both builds things and thinks carefully about making them. The design’s whole job is to get out of the way of the apps and the essays while feeling handmade rather than generated.
Restraint is the aesthetic, but never coldness. Warmth comes from the paper-cream ground, the near-black (not pure black) ink, and a single moss-green accent — carried by typography and rhythm, not by decoration. There is no hero-metric block, no card grid, no shouting display type; headings top out around 33px because the writing, not the scale, is the point. Density is generous: sections breathe with large vertical intervals, and the reader is never crowded.
This system explicitly rejects SaaS/startup polish (no “book a demo” energy, no gradient heroes), résumé-site conventions, personal-brand-influencer shine, and — the opposite failure — minimalism so bare it goes cold. It equally rejects glassmorphism, gradients, dark-mode glow, and cards-everywhere. Light theme only.
Key Characteristics:
A tinted-neutral palette — warm paper and near-black ink — with exactly one saturated accent doing all the signalling.
#3a7a15): The single voice color. Every link, the focus ring, form-field focus, list markers, and syntax-highlight keywords. Its rarity against the neutral field is what gives it force. Hover / active deepens to Moss Green Dark (#336814).#1a1a1a): All body copy, headings, and default text. A tinted near-black, never pure #000. On the paper ground it clears 4.5:1 comfortably.#fbfaf3): The page background (body uses bg-light). A warm off-white that reads as paper without tipping into “cream template” — the warmth is slight and intentional.#f5f3e0): The deeper warm neutral, and the fill behind code blocks (--color-bg). Used sparingly as a tonal step down from Paper.rgba(26,26,26,0.6)): Secondary text — post dates, project descriptions, tag counts — as a transparency of Ink, not a separate gray. Never lighter than ~0.55 opacity, so it stays legible.The One Voice Rule. Moss Green is the only accent, and it appears only where something is interactive or structurally a signal (links, focus, markers, code keywords). Never use it decoratively, and never introduce a second accent hue — the palette’s restraint is the identity.
The Tinted-Neutral Rule. Secondary text is a transparency of Ink (text/60, text/55), never a stock gray. Grays go washed-out on the warm ground; the tinted approach keeps everything of a piece.
Display / Body / Everything Font: Satoshi (with sans-serif fallback), weights 400 and 700, plus a 400 italic.
Mono Font: system stack (ui-monospace, Cascadia Code, Menlo, Consolas, monospace) — code only.
Character: One warm geometric-humanist sans carries the entire site. There is no display/body pairing; contrast is created by weight (400 vs 700) and a restrained fluid scale, not by a second family. The result reads as considered and unfussy — a single confident voice rather than a designed system showing off.
One fluid scale (~1.2 ratio, 16px floor), fluid between ~375px and ~768px, then clamped. Used everywhere — prose, layouts, and includes — so lists and paragraphs never mismatch on mobile.
clamp(1.75rem → 2.0625rem) / 28–33px, lh ~1.15): Page and post titles. The ceiling — this site never shouts with giant type.clamp(1.375rem → 1.6875rem) / 22–27px, lh ~1.2): Section headings (“Building”, “Archives”).clamp(1.1875rem → 1.375rem) / 19–22px): Sub-sections; also post/project row titles at body size when inline.clamp(1rem → 1.125rem) / 16–18px, lh ~1.7): All prose. Column capped at max-w-2xl to hold line length in the 65–75ch band.tabular-nums): Dates, counts, timestamps. Aligned with tabular figures so numbers line up.The One Family Rule. Satoshi does everything. Do not introduce a second typeface for “display” or “editorial” flavor — hierarchy is weight and size, full stop.
The Balanced-Heading Rule. Headings (h1–h4) use text-wrap: balance; long prose uses text-wrap: pretty. Even line lengths on titles, no orphans in body.
Flat by default. This system conveys depth through tone and hairlines, not shadow. There are no card shadows, no lifted surfaces, no ambient glows. The only shadows in the whole system are near-invisible depth cues on code blocks (0 1px 2px rgba(0,0,0,0.02) on inline code, 0 1px 3px rgba(0,0,0,0.05) on pre), and a 1px inset outline (rgba(0,0,0,0.1)) on content images to crisp their edges against the paper.
The Flat-Paper Rule. Surfaces do not float. If you’re reaching for a box-shadow to separate something, use whitespace, a hairline border, or the Cream tonal step instead. A drop shadow on this site reads as a foreign object.
underline with underline-offset-2 and decoration-accent/60 (60% opacity underline). This one treatment is used everywhere — nav, footer, tags, and inline prose links — via a single .link / .prose a rule.transition-colors.outline in Moss Green, offset, visible.rounded, 4px).px-5 py-2.transition-colors duration-300.focus-visible:ring-1 in Moss Green.border-b border-text/30), square corners, px-1 py-2.text/60 — a transparency of Ink, meeting contrast, never stock gray.transition-colors duration-300; no outline box.about, archives, photos, now) on the right, using the .link treatment. Stacks vertically and centers on mobile (flex-col sm:flex-row).The homepage project and post lists, and the tag row, use a shared pattern: a stack of full-width rows, each a link laying out title + meta on a baseline. On hover or focus of any row, all siblings dim to opacity-50 while the active row stays at 100% (has-[a:hover]:*:opacity-50 + hover:!opacity-100), with a 300ms ease. Each row’s title carries a small ↗ arrow SVG (16px, currentColor) marking it as a jump. This spotlight-dim is the site’s one piece of choreography and its most distinctive behavior — reach for it, not cards, when listing things.
bg-light) fill, 1px Moss-tinted border (rgba(65,104,35,0.15)), rounded-lg. Syntax highlighting stays in the palette: keywords and tags in Moss Green, strings in deeper greens (#2d5016), numbers in #416823, comments as italic ink/50.#3a7a15), hover/active Moss Green Dark (#336814) — one voice color, nothing else.text/60, text/55), never a stock gray.max-w-2xl), left-aligned, with generous vertical rhythm.prefers-reduced-motion fallback (already global) for every transition.border-left/border-right >1px as a colored accent stripe on any element.