Golden Example — Field Guide
The Benchmark
The golden example is the Built to Sell Field Guide, light theme version.
File: field-guide-built-to-sell-light.html
Open this file in a browser before building any field guide. Study it. Then extract the specific values documented below.
What This Example Demonstrates
Why It's the Benchmark
The Built to Sell field guide was built through the full production path — book analysis, idea selection, interactive design, prompt engineering, multiple QC rounds, UX testing, and a full brand audit (zero rgba, correct font weights, visual rhythm, gold accent bars). It represents what a field guide looks like when the process is complete.
What to Study
Layout architecture: Every slide uses full-width stacked layout. Body text in a 700px container at top, interactives and prompts in a 900px container below. No side-by-side columns. Same pattern as shipped interactive narratives (Proof Gap, Subtract/Add).
Visual rhythm: Concept/exercise slides on cream (#f5f4f0). Session/prompt slides on off-white (#faf9f7). Bridge on dark (#1a1a1a). This exists because the original build had all 13 slides on identical cream backgrounds — the reader couldn't tell where they were in the guide. The alternation creates unconscious wayfinding without requiring the reader to check the slide counter.
Gold accent bar: Every slide title has a 40px × 3px gold bar (#b79d64) below it via ::after. This was missing from multiple builds and was flagged in audit as a missing signature AOS element. It's small but it's the visual thread that connects this product to the Advisory OS brand.
Mental model (Slide 3): Two-column comparison — Generalist Practice (The Trap, red label) vs. Specialized Practice (The Asset, gold label). Five traits per column. Outcome statements. Dark insight callout box with gold top bar. This exists because the original build jumped straight from the diagnostic to the first exercise. Readers didn't have a framework for understanding what the exercises were measuring. The mental model sets the argument before the reader does any work — so the exercises land harder.
Attribution positioning: "Based on the book by John Warrillow" (attribution line). "Warrillow's argument..." (body text reference). "Using Warrillow's Built to Sell framework..." (#TASK reference). Never in header, title, or campaign label. This matters because the field guide is Kathryn's product, not the author's. Early versions had "John Warrillow · Firm Strategy" in the header — that positioned it as the author's work.
Interactive concept slides (4, 8, 12): Gold frame header with merged instruction: "YOUR EXERCISE — [what to do and what it means]." The instruction was originally a separate callout above the frame. Users didn't connect the instruction to the exercise — they didn't know what to do. Merging the instruction into the frame header solved this in one line.
Static concept slides (6, 10): No gold header. Reader absorbs a framework. The distinction matters because a gold header signals "do something here." If a static reference visual has the same header, the reader looks for a button to click and gets confused.
Workflow prompts (TASK/INTRODUCTION/STEP): Each prompt assigns a role, lists 5 steps, facilitates with confirmation questions. Handoffs are graceful — work with or without previous session output. The original prompts were single-dump bracket-field format. They produced generic output. The workflow format produces a guided session where the AI pushes back at every step — which is what creates the discomfort that drives diagnostic bookings.
Prompt 2 expertise/habit split: Step 3 asks "Are you doing this because it requires your judgment, or because the process isn't documented?" This forces the reader to separate real expertise from undocumented habit. It exists because the original prompt let the reader lump everything together, and the dependency map in Session 3 was useless without the distinction.
Prompt 4 pricing range, not number: The AI presents a range and the reader sets the price. Then Step 5 stress-tests confidence: "Read the price out loud. What's your reaction?" The reader owns the pricing decision. The earlier version had the AI generate a specific price — which the reader either accepted passively or rejected entirely. Neither produces a usable deliverable.
Dependency ladder (Slide 8): Stoplight colors — red/orange/yellow/green. This went through three color iterations. Gold for "Trapped" read as "good." A muted palette made the levels indistinguishable. The stoplight system is universal — no one needs a legend to know red is bad and green is good.
Independence scorecard (Slide 12): Each slider has anchor labels: "I offer whatever clients ask for" ↔ "One defined service, repeated." The original sliders had no anchor labels — readers didn't know what 1 or 10 meant. First fix was too terse ("Generalist" / "One service"). Shipped version describes what each end looks like in daily practice so the reader places themselves accurately.
Bridge (Slide 14): Dark background (#1a1a1a). Single centered CTA. No offer cards. The original had Deploy Sprint and Advisory OS side by side. The consultant's feedback: "Why are we giving them choices? Just sell the diagnostic." One CTA, one action. On dark background for contrast and visual weight.
CSS Values to Extract Before Building
Open the shipped file and extract these exact values. Do not work from memory.
Complete Hex Palette
Every color in the shipped file is a hardcoded hex value. Zero rgba(). Zero CSS variables.
Core Palette:
Page background: #f5f4f0 (cream)
Off-white background: #faf9f7 (session slides)
Dark background: #1a1a1a (bridge, insight boxes)
Card/panel: #ffffff (white)
Subtle card bg: #faf9f7 (service items, dependency items)
Primary text: #1a1a1a (charcoal)
Body text: #4a5a6a (slate)
Muted text: #8a8680 (stone)
Gold text on light: #6b5d3e (NEVER #b79d64 for text on light backgrounds)
Gold backgrounds: #b79d64 (prompt headers, buttons, slider thumbs, accent bars)
Gold hover: #c4aa74 (button hover state)
Light text on dark: #f5f4f0 (bridge slide text)Hex Tints (replacing all rgba):
#f5f0e8 Very light gold tint (callout backgrounds, summaries, verdicts)
#f7f4ee Lighter gold tint (hover states)
#eee9de Light gold (borders, concept header backgrounds)
#e5ded0 Medium gold (visible borders, option borders)
#d4c9a8 Strong gold (scrollbar, nav button borders, header divider)
#c4b490 Gold accent (nav dot hover/visited)
#f0ebe0 Gold warm tint (nav button hover, fail tag background)
#eeeeee Very light charcoal (bar tracks, comparison grid gap, light borders)
#e8e8e7 Light charcoal (borders, dividers, card borders)
#d9d9d9 Medium charcoal (copy button borders/hover)
#e0e0e0 Shadow replacement (slider thumb box-shadow)Stoplight Colors (Rating Exercises):
Level 1 (Trapped): #c45a4a (red)
Level 2 (Directed): #d48a3c (orange)
Level 3 (Guided): #e0c34a (yellow)
Level 4 (Independent): #5a9a6a (green)Tag Colors (Checklist Exercises):
Pass tag background: #e3eeeb
Pass tag text: #4a7c6f
Pass tag border: #cfe0da
Fail tag background: #f0ebe0
Fail tag text: #a08347
Fail tag border: #e5dccbTypography
Display font: Cormorant Garamond (serif)
Load ONLY weights 300, 400, 500 + italic 400, 500
NEVER load 600 or 700 — brand max is 500
Body font: Inter (sans-serif)
Load weights 300, 400, 500, 600, 700
Slide title: Cormorant Garamond, clamp(2rem, 4vw, 2.75rem), weight 300
+ ::after gold accent bar (40px × 3px, #b79d64)
Intro title: Cormorant Garamond, clamp(2.5rem, 5vw, 3.5rem), weight 300
Body text: Inter, 1.05rem, weight 400, line-height 1.85
Eyebrow: Inter, 0.65rem, weight 600, 0.2em tracking, uppercase
Label: Inter, 0.7rem, weight 600, 0.12–0.2em tracking, uppercase
Muted/small: Inter, 0.75–0.85rem, weight 400–500
Prompt body: Inter, 1rem, weight 400, line-height 1.8
Anchor labels: Inter, 0.75rem, weight 400, color #8a8680
Strong text: weight 500 (NEVER 600 or 700 for strong tags)Layout Values
Container: max-width 700px, margin 0 auto, padding 0 5%
Container-wide: max-width 900px, margin 0 auto, padding 0 5%
Section padding: 80px 0 (desktop), 60px 0 (tablet @968px), 48px 0 (mobile @768px)
Interactive spacing: margin-top 2.5rem on concept-frame and prompt-card
Touch targets: 44px minimum (dep buttons, slider thumbs 28px + border)
48px on small mobile (@480px breakpoint)
Nav dots: 10px circles, 6px gap, ALL circles (no squares)
Responsive breaks: 968px (tablet), 768px (mobile), 480px (small mobile)Component Patterns
Concept frame header: Background #eee9de, merged instruction label, 0.7rem uppercase
Prompt header: Solid gold (#b79d64), "AI WORKING SESSION" label
Copy button normal: Background #e8e8e7, border #d9d9d9, color #1a1a1a
Copy button hover: Background #d9d9d9
Copy button copied: Background #1a1a1a, color #b79d64 (dark bg + gold text)
Callout: Arrow icon + text, background #f5f0e8, 3px #b79d64 left border
Slider anchor labels: 0.75rem, color #8a8680, flex space-between below each slider
Dep legend: Vertical stack, stoplight badge + bold name + description
Dep verdict: Background #f5f0e8, 3px #b79d64 left border
Scrollbar: Thumb #d4c9a8, track #f5f4f0What the Golden Example Does NOT Provide
Ideas for your field guide. The 5 Built to Sell ideas are specific to that book. Your field guide has its own 5 ideas.
Interactive designs for your field guide. The service checklist, dependency ladder, and independence scorecard were designed for Built to Sell. Your interactives must be designed for your book's ideas. The patterns (checklist, rating, slider) are reusable — the content is not.
Prompt content. Every step, confirmation question, and framework reference is specific to Built to Sell.
Campaign copy. The LinkedIn posts, DMs, and emails reference Warrillow and specialization.
Deliverable names. Specialization Filter, Service Blueprint, etc. are Built to Sell deliverables.
Mental model content. The Generalist vs. Specialist comparison is specific to Built to Sell. Your mental model frames your book's core argument.
Use the golden example for how it looks, not what it says.