Lean web components: warm paper, 7 variables, no framework

I love web development because it's immediate. You change a variable, you see the page warm up.

This site is intentionally lean — a single design system of CSS variables, no framework, no build step. Just HTML, CSS, and a little JS.

The variables

:root{
  --bg:#020810;
  --surface:#0A1628;
  --border:#1A2F4A;
  --cyan:#22D3EE;
  --green:#10B981;
  --text:#F0F9FF;
  --light:#8BAFC9;
}

That's most of it. --bg is the deep water everything sits on, --text is the ink you trust, --cyan is the one bright color that means "look here". The light theme flips the same seven roles — two worlds, one system.

Typography

Instrument Serif for the editorial moments — headlines, project titles, the odd italic. DM Sans for body. Space Mono for the small stuff: labels, dates, meta. All variable-font safe, all system-fallback safe.

Constraint is a feature. One accent pair, two type voices, one mono. The rest is whitespace.

Components, not pages

Each work card is border:1px solid var(--border) + background:var(--surface) + a radius. No shadow until hover. The story timeline is a grid: 140px 1fr. The blog is just max-width:720px + line-height:1.75.

The stack is simpler than most portfolios: static HTML, two stylesheets, one small JS file for the reveal observer, theme toggle, and scroll progress. When I need a markdown build step, I'll add Eleventy — but not before I need it. Properly means not adding what I don't need.

View source, copy the variables, make them yours. Change --cyan for a different energy, --bg for a different depth. The web is still the best place to build properly.