My Website Style Guide
updated on 16 October 2026
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
Homepage chapters
Type
Four faces, each with one job.
Terrance's Playground
Mount Kinabalu, 30–31 March 2026
Jungle trekking makes me question the relationship between human and nature.
“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.
Header
Footer — the same markup footer.js injects; quiet text links, hairline separators, 36px targets, no current-page highlight
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.
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
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.
Your marathon plan
Readiness at a glance.
Paper sheet — dark ink #2b2620 / #5f5546 on #f1e7d2Your marathon plan
Readiness at a glance.
Paper sheet — still light #f2e9d7 / #e8dfca on #3a2f26Lake Biwa ride
Day 1 · Ōtsu → Hikone Omi-Hachiman · sample stop Explore the ride Momo Trust Display + Quattrocento Sans · #eee2df #eed7c5 #c97c5d #b36a5e #2f5d6fTravel-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 guaranteeSource of truth: js/footer.js, styles/site-footer.css, styles/style.css, styles/homepage.css, articles/articles.css and each project's own stylesheet. Older pages add pre-generated utility CSS — there is no live Tailwind build step.