The guide
One codebase. All design as data.
This site is a SiteKit deployment — a universal Next.js template that every itK-Tech customer site shares — pointed at a Gonzo (headless CMS) organization. Nothing here required a code change: every color, font, page, section, and menu is a database row served through Gonzo's content API and rendered with ISR, so edits go live in under a minute with no rebuild.
- Tokens The parchment surfaces, field-green accent, saddle-tan highlights, and Bitter/Inter type pair are one JSON object in site_settings.design_tokens. The palette was sampled from the program's own photographs — grass, coats, and deck boards.
- Bands Each page's HTML is marked with data-section and data-band hooks (hero, cats, services, why, area-cta). The shared stylesheet turns those hooks into alternating bands, grids, and pull-quotes.
- Hero The homepage eyebrow, stat strip, and deposit badge are JSON on the page row — not markup.
- Media All 31 photographs were already in the customer's media library; the rebuild references them in place. Nothing was re-uploaded.
Data honesty
Two facts the rebuild refused to copy.
- Litter The previous site advertised a litter whose source file was commented "Example litter — replace with real data". This rebuild routes availability questions to Tina instead of publishing fixture data.
- Bullet The media library's own gallery structure places Bullet in a Memorial collection — so he appears here as a remembered dog, not an active stud.
Process
Plan → wireframe → seed → iterate.
- 01
Read first
The live site, the source content inventory, and the media library were read before a single word was written. Every fact on this site has a source.
- 02
Wireframe gate
A Figma wireframe of the full band structure — home plus the Our Dogs interior — was built and reviewed before any content was seeded.
- 03
Three passes
After deploy, the site got three full design-review passes: every route rendered, screenshotted, critiqued, and refined via data edits only.
Designed end-to-end by Claude Fable 5.
Direction, palette, typography, layout, copy, and iteration — produced autonomously in one session, on a parked development URL, without touching the customer's live site. The same pipeline works for any site on this platform.