Colophon

How this site is built. The design system is the work — visible by design.

Version

The site is on its second design. v1 got a portfolio up; v2 came out of a 28-version exploration. Toggle to see the difference.

Apr 2026 · Zoned Warmth + Raw Edge · aperture + logbook

Tokens

All values live in assets/css/base.css. The swatches below render from those variables — change a value, the colophon updates.

warm concrete

#faf9f6

--bg

body text

#1a1a1a

--text

muted

#888

--muted

oxide red

#b84233

--zone-portfolio

ochre

#8a7d3c

--zone-writing

system mono

#555

--zone-mono

accent red

#e84040

--red-line

surface

#eeedea

--surface

light line

#d4d2cd

--light

Type

author voice

IBM Plex Sans

Body text, orientation

Build from zero. Identify the core primitives.

system voice

IBM Plex Mono

Titles, code, metadata

— OBSIDIAN MCP · 2026-04

Furniture

Repeating structural elements. Each shows up across the site — some live on this page right now.

Red margin line

Two parallel red lines fixed at the left edge. Notebook reference. Scroll fills the inner one.

Section marker

Section title

Red dash before every h2. Visual anchor without a heavy line.

Zone borders

portfolio writing system

Left-border color signals zone. Writing also gets a warm yellow tint.

Stat callout

672notes

2,599links

14tags

Mono numbers, weight 600, micro labels. Used on project pages.

Pull quote

The constraint is the brief.

Italic, red left rule. Used to surface a key sentence.

Scroll indicator

↑ Look up.

The red line at the page edge fills as you read this. Same vocabulary as the margin.

Process

v1 was built fast — a portfolio frame to stop hiding work. Two weeks later it felt generic, so I ran a 28-version exploration: three briefs, fifteen visual identities, three convergence rounds. C2-Refined ("Zoned Warmth + Raw Edge") won.

Vanilla CSS, no frameworks. The constraint was the brief: a personal portfolio shouldn't feel like a SaaS template. Identity comes from material choices — warm concrete background, red notebook margin, IBM Plex as the typographic spine — not from JavaScript.

github.com/rbrdelta/rowbyroh-website v2-exploration tag · 28 versions + UI kit design/ folder · current spec + screenshots