A specimen sheet for terrancehah.com — the pieces below are drawn from the stylesheets that actually ship the site. It documents this site's habits; each project keeps its own materials.

Colours

A small palette where each colour has a job — navy carries headings, steel blue carries links, the pale tones sit on surfaces and hovers.

Site palette

Navy — headings and strong text#1d3557
Steel blue — links and accents#457b9d
Pale sky — hover highlights#c0e9fc

Homepage chapters

Nature ink — homepage text#1e4620
Nature accent — homepage buttons#447f46
Nature surface — personal sections#d4edda
Tech surface — work sections#cfe2f3

Type

Four faces, each with one job.

Lato — site name and headings

Terrance's Playground

Raleway — navigation and card titles

Mount Kinabalu, 30–31 March 2026

Baskervville — article prose and summaries

Jungle trekking makes me question the relationship between human and nature.

Caveat — pull quotes and margin notes

“Probably just another ordinary hike.”

Page hierarchy

How an article page composes the faces — Lato title and subheading, Raleway date, Baskervville prose.

RPE in Running: What Pace and Heart Rate Don’t Tell You

written on 16 October 2026

Why pace alone lies to you

Heart rate drifts with heat, sleep and caffeine; pace drifts with wind and hills. RPE is the honest signal underneath both — what the effort actually felt like.

Navigation and controls

The main pages and the older articles and projects that share the site footer all carry the same four destinations — header at the top, footer at the bottom, and a small back-to-top button that appears after one viewport of scrolling. Nav links use the shared 16px Raleway size at every viewport.

Header — the same .site-nav markup every main page carries; Articles marks "location" here because this page is an article

Footer — the same markup footer.js injects; quiet text links, hairline separators, 36px targets, no current-page highlight

Back to top — this one is a real link; try it after scrolling.

Cards on small screens

Below 640px the listing grids become a single column where each card takes the height its content needs — the full title and date always stay readable, while the summary may clamp to a few lines.

Sunrise over Low's Peak, Mount Kinabalu

Mount Kinabalu, 30-31 March 2026

"Mount Kinabalu is probably just another ordinary hike." — me, before the hike. Well, I was wrong.

written on 12 April 2026

Motion and loading

Article pages show a thin reading-progress fill that tracks the article itself, and same-origin page navigations get a gentle 120/180ms crossfade — disabled under reduced motion. The four main pages keep their leading hero image eager; article photos load lazily.

Reading progress — the real bar is a 3px steel-blue fill fixed atop article pages; this native widget only sketches its position, not the shipped style
60%
Photos — the leading hero on the four main pages uses loading="eager", article and below-fold photos use loading="lazy"; responsive srcset serves webp variants from resources/optimized/

loading="eager" fetchpriority="high" → leading hero
loading="lazy" decoding="async" → below the fold

Project materials

Each project keeps its own skin — these are only ink and paper samples, not the apps themselves. Pacey's board is cork under handwriting type; in its dark mode the cork-side copy warms to cream while the paper stays light.

Pacey — day cork

Your marathon plan

Readiness at a glance.

Paper sheet — dark ink #2b2620 / #5f5546 on #f1e7d2
Pacey — night cork

Your marathon plan

Readiness at a glance.

Paper sheet — still light #f2e9d7 / #e8dfca on #3a2f26
Biwa — ride journal

Lake Biwa ride

Day 1 · Ōtsu → Hikone Omi-Hachiman · sample stop Explore the ride Momo Trust Display + Quattrocento Sans · #eee2df #eed7c5 #c97c5d #b36a5e #2f5d6f
Travel-Rizz / local planner styles

Travel-Rizz

Sketch the trip, share the plan.

Kyoto · 3 days — sample itinerary Explore Travel-Rizz Caveat + Raleway · #123456 #456789 #4a88c6 #ecf8ff · sampled from styles/travel-rizz.module.css, not a live guarantee

Source of truth: js/footer.js, js/article-reading.js, styles/site-footer.css, styles/site-typography.css, styles/site-motion.css, styles/site-header.css, styles/style.css, styles/homepage.css, articles/articles.css, scripts/optimize-site-images.py and each project's own stylesheet. Older pages add pre-generated utility CSS — there is no live Tailwind build step. The implementation map lives in docs/site-design.md.