Internal Reference
The workshop
palette.
Design system for riversidewoodworking.ca. A palette pulled from the shop: anvil iron, dark walnut, honeyed oak, pale maple, and a quiet forest green.
The written spec lives in design.md;
this page renders it. Tokens and shared classes come from
global.css.
01 — Colour
The palette.
Adjacent bands never share a background. Ember appears once per view on the action that matters. 60-30-10 balance: linen/maple, bark/iron/moss, ember/grain.
Grounds
Accents
Text
In context
Light section
The Standard
Built from the tree, out.
Body text on linen, at the standard reading size.
Commission a pieceDark section
Shop Rules
No stains that lie.
Body text on iron, dimmed to 70% for comfortable reading.
See the workVerified contrast
| Foreground | Background | Ratio | Grade |
|---|---|---|---|
ink | linen | 17.3:1 | AAA |
ink | maple | 15.7:1 | AAA |
linen | iron | 18.1:1 | AAA |
linen | moss | 7.5:1 | AAA |
linen | bark | 15.8:1 | AAA |
ember | linen | 5.2:1 | AA |
ember | maple | 4.7:1 | AA |
grain | iron | 7.9:1 | AA |
stone | linen | 4.6:1 | AA |
ink/70 | linen | 5.9:1 | AA |
linen/70 | iron | 9.3:1 | AAA |
02 — Typography
Two fonts. No more.
Fraunces carries the editorial voice — display headlines, section heads, annotations, decorative numerals. Inter does everything a user reads to act or navigate. Variable-font axes (SOFT, WONK) differentiate display from italic.
Fraunces (variable serif) — --font-serif
Built from the tree.
the shortcut.
Rough lumber goes in. Heirlooms come out.
— the same wood, before the lathe and after
Inter (sans-serif) — --font-sans
Selected Work · Miramichi, NB
Every commission moves through the same four stations. None of them can be rushed, and none of them can be skipped.
03 — Layout & Bands
Seams & rhythm.
Pages stack as full-width bands. Neighbours never share a background.
Section spacing: clamp(6rem, 11vw, 11rem).
12-column grid at max-w-7xl.
Homepage band sequence
Texture
.texture::before — faint paper/sawdust grain
at 5% opacity. Applied to all section bands.
Scroll reveal
.reveal — opacity 0 → 1, translateY 28px → 0
over 900ms. Stagger with .reveal-d1 (120ms)
and .reveal-d2 (240ms). All disabled under
prefers-reduced-motion: reduce.
05 — Voice & Tone
Say it like the maker.
Write like a craftsman, not a copywriter. Short declarative sentences. No exclamation marks. The shop is "I" or "the shop", never "we" or "our team." Anti-marketing IS the marketing.
Principles
- Direct, not clever Make a clear statement. Don't hedge. Don't pun.
- Woodworking language Use it naturally — joinery, species, grain, figure, finish — never to show off.
- Anti-marketing "No newsletter. No follow-up sequence. Just a reply." is the tone.
- Patient confidence The work takes as long as it takes. That isn't a pitch.
Lines that work
- ✓the glue is a guest; the joint is the host
- ✓No stains that lie about what the wood is.
- ✓Off-cut. Back to the bench.
- ✓No newsletter. No follow-up sequence. Just a reply.
Forbidden
- ✗"artisan" (overused)
- ✗"luxury" (this is craft, not luxury goods)
- ✗"passion" / "passionate"
- ✗"we" / "our team" (it's one person)
- ✗Exclamation marks
06 — Motion
Slow is
the rule.
Scroll reveal: 900ms cubic-bezier, 28px travel. Image hover: scale 1.035 over 1400ms. Everything is slow, settled, like dust landing — no bouncing, no parallax.
When a visitor requests reduced motion, all reveal animations and hover transforms are disabled. Smooth scrolling switches to instant. The site simply appears.