The Intelligent Golfer™

Brand & UI Style Guide

Design language for checkout pages, sales funnels, and conversion assets based on the Book sales page.

Brand Voice & Tone

Personality

Authoritative — Expert knowledge delivered with quiet confidence — not arrogance.

Personal — First-person storytelling from Todd. Intimate, direct, letter-like.

Discovery-led — Not selling a method. Helping the reader unlock what's already inside.

Legacy-rooted — Moe Norman's name and legacy carry the authority. Reference often.

Risk-reversing — Anticipate doubt. Always neutralize it before it becomes an objection.

Writing Rules

Sentence lengthShort, punchy declarations. Then longer explanatory sentences. Never long walls of text.

Bold usageBold key phrases mid-sentence to break scanning rhythm and emphasize payoff.

Italics usageItalics for Moe's spoken words and book titles. Conveys authenticity.

QuestionsUse rhetorical questions to create tension before delivering the answer.

Sign-offAlways end long sections with: 'To your best golf, Todd Graves'

P.S. patternUse P.S. and P.P.S. at the bottom of long pages for cross-sells and final risk reversal.

✅ Do write like this

"Your body already knows how to swing like Moe Norman."

"Not another method. A discovery process."

"If it doesn't unlock your natural swing, just let me know and I'll refund you."

"We didn't invent anything new. We just found a better way to unlock what you already have."

❌ Avoid this

"Buy now and transform your game with our proven system!"

"Our revolutionary proprietary method is clinically validated."

"Limited time only! Sale ends at midnight!"

"Click here to get started today and change your life forever!"

Color Palette

Black

Primary CTAs, feature cards, guarantee boxes

Gray 900

Body headings, prices, author sign-off

Gray 700

Body copy, long-form paragraphs

Gray 600

Secondary text, subheadlines

Gray 500

Labels, overlines, captions

Gray 200

Card borders, dividers

Gray 50

Section backgrounds, card fills

Red 600

Testimonial attribution, bullet accents ONLY

Color rule: The palette is intentionally near-monochromatic. Red (#DC2626) is used exclusively for testimonial bylines and bullet point accents — never for CTAs, backgrounds, or decorative elements. This restraint makes the brand feel authoritative, not promotional.

Typography

Type Scale

Page headlinetext-5xl / text-6xl · font-semibold · tracking-tight · leading-tight

Section h2text-3xl / text-5xl · font-semibold · text-gray-900

Feature h3text-2xl / text-3xl · font-semibold

Body largetext-lg / text-xl · text-gray-700 · leading-relaxed

Body basetext-base · text-gray-600 · leading-relaxed

Overline / labeltext-xs / text-sm · uppercase · tracking-wider · text-gray-500

Price displaytext-5xl / text-6xl · font-semibold · text-gray-900

Testimonial quotefont-serif · italic · text-xl / text-2xl · text-gray-800

Font Families

UI / Interface

System sans-serif

Tailwind default: ui-sans-serif, system-ui. No custom font import needed for body copy.

Testimonial quotes

"Brilliant storytelling..."

Tailwind class: font-serif. Georgia / Times fallback. Used exclusively for pull quotes.

Live Examples

A Personal Letter From Todd Graves:

Your perfect golf swing lives inside you...

Let AI help you unlock it.

The Intelligent Golf Swing uses AI to explore the biomechanics behind Moe Norman's legendary swing — uncovering your body's natural movement patterns that form the Single Plane Swing.

"Brilliant storytelling meets timeless wisdom from a golf maverick."

— TODD HERMAN, Wall Street Journal Bestselling Author

Layout & Spacing

Container & Grid

Max width — narrowmax-w-3xl (prose, story sections)

Max width — standardmax-w-4xl (most content sections)

Max width — widemax-w-6xl (feature grids, pricing)

Horizontal paddingpx-4 sm:px-6 (mobile-first)

Section paddingpy-12 md:py-16 (consistent vertical rhythm)

2-col grid gapgap-12 md:gap-16

3-col grid gapgap-8 md:gap-16

Card paddingp-5 md:p-8

Section Backgrounds

White

Primary — hero, story sections, pricing

Gray 50

Alternating — features, testimonials, cadence blocks

Subtle gradient

Page-level background (overall wrapper)

Black

Guarantee boxes, featured feature cards, closing quotes

UI Components

Buttons

Primary CTA
bg-black · rounded-full · py-6 · text-lg

className="bg-black hover:bg-gray-800 text-white px-8 py-6 text-lg rounded-full"

Large CTA (bottom of page)
px-12 · py-6 · text-lg · shadow-xl

className="bg-black hover:bg-gray-800 text-white px-12 py-6 text-lg rounded-full shadow-xl"

Hero closing CTA
py-8 · text-xl · font-bold

className="bg-black hover:bg-gray-800 text-white px-12 py-8 text-xl rounded-full font-bold shadow-xl"

Button rule: All CTAs use black background with rounded-full (pill shape). Never use colored buttons. Never use square/rectangle buttons on sales pages. Arrow icon (→) always follows CTA text.

Testimonial Cards

"The ocean has taught me that mastery comes from working with nature, not against it."

— KELLY SLATER, 11X World Surf League Champion

Style 1: Subtle gradient bg (hero area)

"Brilliant storytelling meets timeless wisdom from a golf maverick."

— TODD HERMAN, WSJ Bestselling Author

Style 2: Plain white border (content sections)

Quote textfont-serif italic · text-gray-800 · leading-relaxed

Attributiontext-sm / text-base · font-bold · text-red-600 · ALL CAPS name

Attribution format— FIRST LAST, Title/Credential

Feature Cards (3-up grid)

AI-powered dialogue

The book responds to questions like a real instructor would.

Visual learning

QR codes throughout the book link to video demonstrations.

Moe's wisdom, decoded

What Moe Norman knew intuitively — now systematized.

Middle card always inverted (bg-black). Creates visual anchor in the grid.

Guarantee / Risk-Reversal Block

60-day money-back guarantee

Read it, apply it. If it doesn't unlock your natural swing, just let me know and I'll refund you. No questions asked. You don't even need to send the book back!

Backgroundbg-black text-white

Border radiusrounded-2xl

PlacementAlways near or below primary CTA. Never at the top.

ToneConversational, not legal. Todd's voice. No asterisks.

Overlines & Section Labels

A Personal Letter From Todd Graves:

Order Now - Shipping Immediately

The Intelligent Golfer™

className="text-xs uppercase tracking-wider text-gray-500"

Bullet / Feature Lists

Red bullet (discovery/content lists)

•

Uncover how AI helps you unlock the perfect golf swing.

•

Moe Norman's Single Plane Swing was more than a technique.

•

The fundamental problem with most golf instruction.

<span className="text-red-600 flex-shrink-0">•</span>

Checkmark (pricing/inclusion lists)

Unlimited personal swing reviews — 48hr turnaround

Monthly 30-min 1-on-1 video call with Todd

Private CoachNow coaching space

<Check className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />

Checkout Page Structure (Recommended Order)

Overline + Headline

Short label (e.g., 'Order Now · Shipping Immediately') → large, emotion-led headline. Max 10 words.

Social proof anchor

One high-authority testimonial immediately below the hero. Celebrity or recognizable name preferred.

Product visual

Book cover or product image. Drop-shadow, no border. Max width ~sm/md on desktop.

Price + Primary CTA

Large price display (text-5xl font-semibold), then black pill button. Subtext: '+ Shipping' or 'Cancel anytime'.

Guarantee block

Black bg box. 60-day guarantee. Todd's voice — no legalese. Immediately below CTA.

Order bump / cross-sell

White card with product image + description. Labeled 'Optional add-on after order.' No pressure language.

Risk reversal P.S.

Restate the guarantee. One sentence. Todd's signature. Closes any remaining hesitation.

Design Do's & Don'ts

✅ Do

✓Use black pill-shaped buttons for every CTA
✓Alternate white and gray-50 section backgrounds
✓Use font-serif italic for all testimonial quotes
✓Keep red (#DC2626) for attribution lines and bullets only
✓Use 'rounded-xl' or 'rounded-2xl' for all cards and boxes
✓Drop-shadow on product images (drop-shadow-2xl)
✓Lead with story and transformation, not features
✓Always include an explicit guarantee near the CTA
✓Use bold mid-sentence for key phrases in body copy
✓Mobile-first responsive layout (order-2 md:order-1 pattern)

❌ Don't

✗Use red, green, or blue for buttons or backgrounds
✗Use square-cornered buttons
✗Fake countdown timers or manufactured urgency
✗Use stock corporate images or posed photography
✗Stack multiple CTAs side-by-side (one per section)
✗Use more than 2 font weights on the same element
✗Write in third person — always Todd's first-person voice
✗Use exclamation points in headlines
✗Add decorative gradients or patterns to backgrounds
✗Use sidebar layouts — single column prose always wins

Key Brand Assets

Logo (white bg)

https://base44.app/api/apps/69069189cd642af13612c25f/files/public/69069189cd642af13612c25f/9b484859b_unnamed.webp

Book cover (no bg)

https://qtrypzzcjebvfcihiynt.supabase.co/storage/v1/object/public/base44-prod/public/6918adebd99621fc49057a53/a56af2237_bookcovermain25noback.png

Book interior spread

https://qtrypzzcjebvfcihiynt.supabase.co/storage/v1/object/public/base44-prod/public/6918adebd99621fc49057a53/2cbfaa81e_Interior58-59.png

QR code example

https://qtrypzzcjebvfcihiynt.supabase.co/storage/v1/object/public/base44-prod/public/6918adebd99621fc49057a53/6148cffb8_Screenshot2025-11-22at33930PM.png

Training Journal cover

https://qtrypzzcjebvfcihiynt.supabase.co/storage/v1/object/public/base44-prod/public/6918adebd99621fc49057a53/38047b18f_Journal_V2a25.png

The Intelligent Golfer™ · Brand Style Guide · 2026