What Shipped
/brochure — print-ready one-pager, letter-sized, white bg, orange accents, ForgeKit logo
Watermark background image at 7% opacity + dark overlay
Three customer story cards: Gino 🔨, Sally 🐾, Courtney 🏠
Pilot offer box: $750 / two weeks / working software
Three app cards: Forge, Leashline, ForgeHome with emoji icons
PrintButton extracted as client component (window.print())
Print CSS: nav/footer/header hidden, @page margin: 0, height: 11in enforced
Hidden link on about page: 'Practical Always' links to /brochure
Homepage product cards: full-bleed translucent images + dark overlay, emoji icons removed
Forge card: worker-jobsite.jpg background
Leashline card + hero: woman-dog-hug.jpg (Unsplash, Wade Austin Ellis, free)
ForgeHome card + hero: momCoffeeCouch.jpg (user-provided)
Gino copy softened: 'two hands and 24 hours' replaces 'not so great at the follow-up'
Sally copy softened: 'fear is missing something' replaces 'client is gone'
Where We Spun
onClick on server component crashed build
Extracted PrintButton as a separate 'use client' component. Any interactivity needs to be isolated before deploying.
Site nav/footer printed on page 2
Added @media print { nav, footer, header { display: none } } to brochure print styles. The root layout wraps every page — always account for it on print pages.
Brochure link on about page wasn't working — user was looking at site footer, not page content
No code change needed. The link was correct. Debugging a user perception issue, not a code bug.
ForgeHome image took 6+ iterations to find the right one
Stock photos struggled to capture 'calm, capable, earned rest.' The right image came from Zeb, not Unsplash. For emotionally specific apps, let the operator choose the image.
Several Unsplash search results were premium (plus.unsplash.com)
Check the CDN domain before committing. images.unsplash.com = free. plus.unsplash.com = paid. Premium images appear prominently in results.
Key Insights
Real people with real names (Gino, Sally, Courtney) land harder than abstract pain points — replace generic use cases with customer stories everywhere possible
Name the right fear, not the worst consequence — for Sally the fear is letting someone down, not losing them as a client
Full-bleed translucent backgrounds (opacity ~7% + dark overlay) make product cards feel like a real product, not a website
height: 11in + overflow: hidden enforces single-page at the layout level — don't use minHeight for print layouts
Hidden links (Easter eggs) are low-cost and reward curious visitors — good for pages you want discoverable but not in nav
When the app has a specific emotional register, the operator's own photo beats anything from a stock library
ForgeKit Patterns Earned
Translucent full-bleed card background
Image fill at opacity-[0.07] + absolute inset-0 dark overlay + relative z-10 content. Works on any dark card where you want texture without obscuring text.
Print-safe page with client button
Server component page + extracted PrintButton client component + print CSS hiding nav/footer/header + height: 11in overflow: hidden. Reusable for any printable one-pager.
Hidden navigation Easter egg
Wrap a word in existing copy with a Link — same color, hover:underline. Discoverable but invisible. Good for internal tools, partner pages, or leave-behind URLs.
Rules Added to Playbook
1
Extract onClick to a client component before deploying
Any interactivity (onClick, useState, window.*) requires 'use client'. Extract it as a tiny client component rather than marking the whole page client.
2
Always add print CSS to hide nav/footer on print pages
@media print { nav, footer, header { display: none !important } } — the root layout wraps every page and will print without this.
3
Use height: 11in + overflow: hidden for single-page print layouts
minHeight lets content spill onto page 2. height + overflow: hidden enforces the constraint and makes overflow obvious during design.
4
Check Unsplash CDN domain before downloading
images.unsplash.com = free license. plus.unsplash.com = Unsplash+ paid. Fetch the photo detail page and check the domain first.
5
Replace generic pain points with real customer stories
Gino, Sally, and Courtney outperform 'inconsistent intake' and 'follow-up that slips' every time. If you have a seed customer, use their story.
Session in Numbers
9
Stock photos downloaded
Real people with real names land harder than abstract problems.
Brochure session · ForgeKit · Medina OH · 2026-06-18
Next Session — Start Here
Sales
Add phone number to brochure before printing — The brochure has email and website but no phone. Add before the first print run.
Sales
Print brochure and bring it to Gino — forgekits.build/brochure — print it, set margins to None, bring it to the first in-person meeting.
Forge
Forge Phase 0 — Gino's pipeline — Contacts, pipeline stages, basic deal view. Enough for Gino to log in and see his jobs before the demo.