Creativity · Peng, Andy

Design language

One stylesheet for every page. It replaced, per page, Bootstrap, MDBootstrap, FontAwesome, academicons, two syntax-highlighting themes and a webfont from a CDN — all of it, with hand-written CSS.

Two colour layers, no third

Ink and one blue. Everything else is those two thinned down: the secondary and tertiary inks, the paper tint, and the hairline rules, which are ink at 10% and 18%. No per-page accent colours.

--ink

#16181d
--ink-2

#3c4148
--ink-3

#6b7280
--accent

#0076df
--paper-2

#f7f6f4

Principles

Scale, not ornament

Weight comes from size and empty space. A heading earns its authority by being large and alone, not by acquiring a border, a shadow and a badge.
Serif for display, sans for reading

Source Serif 4 carries every title; the body is the system sans. Monospace is reserved for what is actually code.
Hairlines, not boxes

A single rule separates what a card used to enclose. Corners stay square — the only round things on the page are dots and pills.
One measure

Prose is capped at 62 characters and every page shares the same shell, so a reader's eye lands in the same place on arrival, whatever the page.
Zero frameworks

Hand-written HTML/CSS/JS, and a check that fails the build if a framework or a CDN font sneaks back in. Every byte on the page was put there on purpose.
Motion earns its place

Reveals on scroll and cross-document view transitions — always subtle, always skippable via reduced-motion.

The language this replaced

The earlier site ran five accent colours — one per surface — set everything in monospace, and put every block in a card with 12px corners and a soft shadow. It was cramped: a 720px measure, hairlines everywhere, 11px uppercase labels that read as variable names rather than headings. Scale replaced all of it. The one part that survived is the panel system — native scroll-snap with no carousel library, two axes, vertical between chapters and horizontal within them — which still drives the maps page.

--theme

#0076df
--moss

#556b2f
--amber

#ffc24d
--warm

#b3542e

The mark

An osmanthus tree in a ring, standing in a brook that runs to the left. Drawn by a script, not by hand — scripts/brand/generate_mark.py is the master, every file under /assets/brand/ is its output, and the whole drawing is seeded so re-running reproduces it byte for byte.

桂花 — drawn to the botany

Osmanthus fragrans, and the drawing follows how it actually grows: leathery lanceolate leaves in opposite pairs, tiny four-petalled florets clustered in the leaf axils and never at a branch tip, dew only on the lowest leaf tips where it would really collect. 112 leaves, 18 clusters, 6 beads. In Chinese the tree carries 折桂 — plucking the osmanthus, an old figure for an achievement earned.

潺潺流水 — and how a still drawing points left

Monochrome, static, no arrowhead and no second colour. Direction has to come out of the shapes themselves, so four cues are stacked and none of the reading depends on one trick:

Taper. Every ripple thins to nothing at its left end. The thick end is where the water came from — which is why the ripples are filled shapes rather than strokes: only a fill can end in a real point.
Wake. A stone parts the flow and its wake opens downstream, to the left. The most literal cue in the drawing.
Curl. An eddy hooks over at the downstream tip, in the direction of travel.
Grading. The rows shorten and thin as they go, the way a shallow brook frays out instead of stopping.

Three stages

The water needed space, not finer linework. The first version left 18 of the 200 canvas units between the trunk base and the ring, and the interior is only ±28 wide down there — anything drawn into that slot is a grey smudge by 96px. Fitting the same tree smaller and higher opened 36 units, and the 32px icon reads better for it, the crown being less crowded.

study
1 · Closed ring, no water

The tree filling the ring edge to edge. A whole mark on its own, and the shape the water had to find room in.
icon
2 · Lifted, with a real brook

Same tree, smaller and higher, four tapered ripples and a stone in the band it vacated. The ring stays shut on purpose — that closed outline is what still reads when the tab is 16 pixels wide.
display
3 · Water as the base

The ring stops where the water starts and the stream closes the circle, so the mark stands in the current rather than above a decoration. It earns that break only at size: by 32px the outline no longer reads as a circle, so this one is for 128px and up.

Icon, every size

The closed-ring version is the favicon, the apple-touch-icon and the web app manifest icon, with the 192 and 512px rasters downsampled from it.
Display, from 128px

The open-ring version is for places with room to spare — headers, social cards, slides, print. Not for a favicon: the break needs size to make sense.
Rasters come from the vector

Rendered once at 1024px and downsampled with LANCZOS, never drawn straight onto a small canvas: that keeps a sub-pixel stroke as partial alpha instead of dropping it, so the detail survives as grey density.
One artwork, two compositions

The two versions call the same drawing routine; what differs is the ring and the water. There is no separately redrawn small version — a detailed drawing downsampled beats a simplified redraw, and one source is easier to keep honest.

Cartography

Style study. Olive land, dashed borders, snow-capped peak glyphs, italic water labels. Open /maps

Hand-drawn SVG maps from /maps — every coastline, peak, and ferry route is a path I plotted.

Anatomy of a panel map

A rotatable D3 globe greets you first — countries fill in as they're visited, cities pin with tooltips.
Scroll down, and the world zooms in — a full-viewport Pacific Northwest chart snaps into place with a fade-and-rise reveal.
Swipe right for route charts — Salish Sea ferry crossings drawn like an old nautical map: anchors, whales, sea-siren medallions.
Everything is inline SVG — no tiles, no map API. Peaks get elevation labels; unvisited ones fade back politely.
Dots, chevrons, and edge handles guide the way — the same navigation grammar reused across the whole site.