The Home Renovation Blog Vol. 01 · The Workshop Journal
Field manual · Issue 14 supplement

The Workshop Journal, a field manual.

The locked design system for The Home Renovation Blog. Every color, every type size, every reveal. When in doubt, refer here. When making something new, follow this.

No. 01 / Brand

Calm confidence. Warm authority.

We are
  • · A trusted teacher
  • · A steady guide
  • · An editorial publication
  • · The publication-of-record for new homeowners
  • · Authority that reads as warmth, not credentials
We are not
  • · Corporate / Home-Depot-y
  • · Bro-y / power-tool-macho
  • · Precious / overly designed
  • · Chaotic blog-template
  • · Marketing-tone optimized for SEO above readers
No. 02 / Color

Twelve tokens. Pick from these.

Every color on the site comes from theme.css. Use Tailwind brand utilities (bg-brand-primary, text-brand-muted). Opacity modifiers work (/10, /60).

Terracotta #C5553D
--color-brand-primary

CTAs, italic emphasis, drop caps

Terracotta deep #9A4131
--color-brand-primary-deep

Hover / pressed states

Deep navy #1F2D3D
--color-brand-secondary

Inverted sections, brand mark

Navy soft #2D3F55
--color-brand-secondary-soft

Atmospheric blends in dark sections

Navy deep #14202E
--color-brand-secondary-deep

Layered depth in dark sections

Warm mustard #D9A441
--color-brand-accent

Editorial highlight only — sparingly

Warm cream #FAF6F0
--color-brand-bg

Page background — paper, not flat color

Soft linen #F1EAE0
--color-brand-surface

Card surfaces, subtle washes

Charcoal #2A2A2A
--color-brand-text

Primary body text

Warm near-black #1A1612
--color-brand-ink

Display headings where book depth matters

Stone #8C8378
--color-brand-muted

Captions, dates, eyebrow labels

Hairline rule #E6DFD4
--color-brand-rule

Borders, dividers — never thicker than 1px

Cream is paper, not an empty page. Always layer warm radial gradients and a subtle SVG fractal-noise grain over the cream so it reads as printed paper, not a flat color.

No. 03 / Typography

Fraunces does the singing. Inter does the speaking.

display
clamp(80px, 9vw, 144px)
Hero H1, manifesto moments, prose-stat
You can do this.
heading
clamp(48px, 5vw, 68px)
Section H2
Where to begin.
sub
clamp(28px, 2.5vw, 36px)
Sub-headlines, pull quotes
A patient teacher.
lede
20px
Intro paragraphs, supporting copy
Honest guides, real numbers, no gatekeeping.
body
16–17px
Running body, list items
This is what most of the site is set in. Comfortable to read for ten minutes without your eyes drifting.
caption
12px
Photo captions, dates, P.S. lines
Editor's desk · Saturday, 8:14am
micro
10.5px tracked, uppercase
Eyebrows, ALL-CAPS section labels
FIELD MANUAL · ISSUE 14 SUPPLEMENT

Push the variable axes.

Fraunces is a variable font with three axes worth using deliberately:

  • opsz 9–144 — chunkier at small sizes, refined at display sizes
  • wght 100–900 — light italics for display, heavier roman for headings
  • SOFT 0–100 — higher = warmer, more humanist letterforms
opsz 14, wght 380
A patient renovation guide.
opsz 144, wght 380, SOFT 60
A patient renovation guide.
opsz 144, wght 320, SOFT 80, italic
A patient renovation guide.
opsz 144, wght 600, SOFT 0
A patient renovation guide.
Signature flourish
The kind of guides we actually wanted.

One word in italic + terracotta. Use sparingly — at most three sections per page. Reserved for: the Hero opening, one mid-page editorial moment, one closing sentiment. Other sections use small caps, hand-drawn underlines, or no flourish.

No. 04 / Layout

Asymmetric grids. Generous whitespace.

prose
72ch
Article body — comfortable reading column
content
1180px
Normal page max width — most sections
wide
1320px
Hero, full-width statements
7/5 split

Asymmetric two-column. Hero, featured-article spreads.

Sticky 32% / scroll 68%

Editorial ToC pattern. TopicCategories on the homepage.

Boundary break

One element per section bleeds past the column. Image bleeds, pull quotes outdent, decorative rulers escape.

No. 05 / Shape & elevation

Soft corners. Warm shadows.

Radius
xs
4px
Letters, almost-square cards
sm
8px
Inputs, small chips
md
12px
Cards, buttons, photo containers
lg
18px
Hero surfaces, feature cards
xl
24px
Atmospheric panels (rare)
Shadow
soft
0 6px 22px -14px rgba(31, 45, 61, 0.18)

Default card lift

lift
0 14px 32px -18px rgba(31, 45, 61, 0.24)

Hover lift, featured elements

deep
0 24px 48px -22px rgba(31, 45, 61, 0.3)

Floating moments — handwritten letters

No. 06 / The motif

The carpenter's rule.

One repeating motif gives a publication its visual signature. Ours is a small carpenter's-rule SVG. It earns the brand its workshop journal identity.

Frequency budget: ~12 instances per page. Use in section eyebrows, the featured Hero moment, and one floating decorative element. Don't decorate with it — let the eye rest.

width 28
width 48
width 96
Where to use
  • · Section eyebrows (one per section, always)
  • · The featured moment in the Hero
  • · One floating decorative bleed in EditorialPrinciples
Where NOT to use
  • · Inside repeating items (cards, list rows)
  • · As a hover affordance on link-size text
  • · More than ~12 instances per page
No. 07 / Photography

Real photographs. Always treated.

Real Unsplash photos, never illustrated SVG kitchens. Two overlays — a cream multiply and an SVG grain — warm every photo to match the page.

Untreated interior photograph
Raw
Raw Unsplash hotlink — cool tones, doesn't match our paper.
Treated interior photograph
Treated
Treated — cream multiply at 12% + SVG grain at 18%. Watch the cool blues warm into the page.
Source

Unsplash hotlinks with ?auto=format&fit=crop&w=XXX&q=80. Pick widths that match the layout.

Subject

Lived-in, not staged. A real-feeling kitchen with one mug on the counter beats a magazine showroom.

Tone

Warm — cream, wood, terracotta, soft sage. Avoid cool blues and greys that fight the cream.

No. 08 / Motion

Smooth ease-out. No bounce.

One easing curve everywhere: cubic-bezier(.2, .7, .2, 1). The brand is calm; bouncy springs fight the voice.

Click Replay on each demo to re-trigger the animation.

.wj-reveal
Default fade-up
Calm, considered, arrives.
translateY 22px → 0 with smooth ease-out. Body, cards, list items.
.wj-reveal-mask
Mask wipe
A wipe across the headline.
clip-path inset wipes left → right. Headlines, eyebrows.
.wj-reveal-stagger
Per-child stagger
Wordbyword,insequence.
translateY 14px → 0 with --i index delay. Word-by-word headlines, list items in sequence.
.wj-reveal-side
Slide from side
← arrives from the side.
translateX --from → 0. Floating decorative elements, annotations.
No. 09 / Editorial voice

Sentence case. Talk to the reader.

Headlines
Yes
You bought a house. The hard part is over.
No
REVOLUTIONARY HOME RENO TIPS THAT WILL CHANGE YOUR LIFE
Lede
Yes
This is the publication of record for new homeowners. Honest guides, real numbers, no gatekeeping. Start with the topic that's making you nervous.
No
Welcome to The Home Renovation Blog! We're passionate about helping homeowners achieve their renovation dreams.
CTA
Yes
Send me Saturdays
No
Click here to subscribe to our amazing newsletter!
Sign-off
Yes
You bought a whole house. You can definitely change a light fixture.
No
Thanks for visiting our website! Please subscribe and share with friends.
No. 10 / Anti-patterns

Things we've tried and rejected.

Each of these once seemed like a good idea. Each was overruled by the brand voice. Don't reinvent them.

  • 01 Icon-tile card grids (4×2 of identical title+blurb tiles)
  • 02 Avatar-circle testimonials with big quote-mark glyphs
  • 03 Animated stat counters (fights the calm voice)
  • 04 SVG-illustrated abstract scenes as primary imagery
  • 05 Purple gradients on white (this is a cream + warm-earth brand)
  • 06 Bouncy spring animations (smooth ease-out only)
  • 07 Flat cards on flat backgrounds
  • 08 More than 3 italic-terracotta-accent flourishes per page
  • 09 More than ~12 RulerMark instances per page
  • 10 Lucide-style stroke icons as primary visual elements
  • 11 Title Case in headings (use sentence case)
  • 12 "Design by gut" type sizes — use the ladder
No. 11 / Page checklist

Twelve steps before you ship.

Run through this every time you build a new page (topic hub, individual article, 404, anything). It's faster to read this list than to undo a drift.

  1. 01
    Read this guide before starting
  2. 02
    Wrap in <Layout> from src/layouts/
  3. 03
    Reuse Nav, Footer, Newsletter, RulerMark from src/components/site/
  4. 04
    Brand utility classes only — no <style is:global> on :root
  5. 05
    Pick from the type scale ladder
  6. 06
    Asymmetric grids — no 50/50, no centered cards
  7. 07
    Real Unsplash photography with cream-multiply + grain treatment
  8. 08
    One italic-terracotta-accent flourish max per new section
  9. 09
    Section eyebrow uses .wj-reveal-mask
  10. 10
    Smooth ease-out only — no bounce springs
  11. 11
    Test mobile at 375px
  12. 12
    Run dev server and look at the page before declaring done

— The Editors