Brand Book  ·  Marketing 760  ·  For Michael Buckhoff  ·  13 May 2026
Vol. II   The Brand Book  
Prepared by Marketing 760 · 13 May 2026 · v1.0

The Better TOEFL Scores brand book.

Every color, font, spacing token, component, shadow, asset, voice rule, and schema declaration used across the funnel. One source of truth. Click any color swatch to copy the hex value.

01Voice & Tone 02Color Palette 03Typography 04Spacing Scale 05Shadows 06Components 07Asset Library 08Layout & Grid 09SEO + Schema 10Decorative 11Don'ts 12Design Tokens 13DESIGN.md 14Tailwind Theme
No. 01   Michael's Voice  

Michael's voice.

Picture Michael in his office at CSU San Bernardino. A student sits across from him. He has read their essay. He is not lecturing. He is helping. Direct, warm, specific. He uses simple words because the student needs to understand, not because he can't write big ones. Every sentence on the website should sound like that office.

01
Plain English

Most readers are studying for the TOEFL. English is their second language. Words have to be the simple ones. Short sentences. If a 15-year-old non-native speaker would stumble on a word, swap it.

Don't "We leverage rubric-aligned methodology to unlock score velocity."
Do "I grade your speaking attempt against the rubric. Then I tell you the three things to fix."
02
First person

Michael speaks for Michael. Not "the team." Not "we." Not "Better TOEFL Scores believes." It is I. That is the differentiator: one named professor grades every attempt.

Don't "Our experts provide world-class feedback."
Do "I grade every Speaking attempt myself. No assistants. No AI."
03
Specific, not technical

The expert mark is specifics, not jargon. "Eight-second prompt restatement" beats "ineffective rhetorical preamble." Page numbers, score numbers, week counts, dollar amounts. Real data. No buzzwords.

Don't "Optimize your rhetorical pacing for maximum scoring impact."
Do "On page 12 there is a fix for the 8-second prompt restatement habit. The 2026 rubric punishes it."
04
Warm, not corporate

Michael is your neighbor, not a SaaS app. Use contractions (it's, you'll, we'll). Use direct address ("you"). Light humor lands if it is honest. Never sell with fear.

Don't "Limited time offer. Act now or miss out."
Do "If you want me to grade one of your attempts, $19 buys you that. No card on file. No rush."
05
No idioms, no slang

"Crack the code." "Knock it out of the park." "A no-brainer." A native English speaker reads past these. A reader from Tehran, Lagos, or Shanghai stops and translates. Skip the figures of speech. If you can't say it plainly, you don't yet understand it.

Don't "Knock your Speaking section out of the park."
Do "Move your Speaking score from 22 to 26."
06
Numbers do the selling

"Many students" persuades nobody. "9,231 attempts graded since 2002" persuades. Use exact numbers, real dates, named credentials, verified before/after scores. Generic words shrink trust. Specific words build it.

Don't "Trusted by thousands of students worldwide."
Do "9,231 Speaking and Writing attempts graded since 2002. 17,700 YouTube subscribers. CSU San Bernardino lecturer since 1997."
Do (sentence-level rules)
  • Short sentences. Aim 12 to 18 words. One idea each.
  • Active voice. "I grade attempts," not "attempts are graded."
  • Concrete nouns. "Essay," "score," "playbook," "fee." Not "solution," "experience."
  • Use numerals for numbers ≥ 10. ("9,231" not "nine thousand").
  • Common words first. "Help" before "facilitate." "Show" before "demonstrate."
  • Spell TOEFL iBT exactly. Always capitalize.
Don't (anti-patterns)
  • Em dashes (—). Use a comma, a period, or parentheses.
  • AI words. "Leverage, unlock, transform, elevate, empower, journey, ecosystem, holistic, robust."
  • Marketer-speak. "Game-changer, seamless, next-level, world-class, cutting-edge."
  • Idioms & sports metaphors. "Slam dunk, home run, in the same ballpark, on the same page."
  • Hedging. "May, might, perhaps, potentially, somewhat, consider."
  • Filler. "Just, really, basically, actually, very, quite."
  • Fake scarcity. Countdown timers, "only 3 spots left," "sale ends tonight."
  • Capitalized headlines. "Discover The Best TOEFL Coaching Today" reads like spam.
Reading level
Grade 8–9
Flesch–Kincaid. Run any page through hemingwayapp.com before publishing. Two long sentences max per paragraph.
Avg sentence length
14 words
Mix short (5–8 words) and medium (15–20). No sentence over 30 words.
Pronoun balance
"You" > "I"
Address the reader twice as often as Michael talks about himself. The page is for them.
Numbers on page
≥ 5 per page
Years, scores, page counts, prices, sample sizes. Specifics anchor trust.
No. 02   Color Palette  

Color.

Eleven colors. Warm paper foundation, deep ink ground, oxblood accent for editorial pulls, brass gold for highlights, sage for affirmation. No neons. No purples. No gradients except subtle warm vignettes.

Copied
Paper · Foundation
Paper
#f6f1e7
Primary background. Warm cream, applied to body, nav, cards.
Copied
Paper · Variant
Paper Soft
#ede5d2
Secondary surface. Section.alt, exhibits, marginalia bands.
Copied
Paper · Deep
Paper Deep
#e3d8be
Footer gradient tail, deep section bg.
Copied
Ink · Primary
Ink
#15110d
Headlines, brand mark, body emphasis, ink-band footers.
Copied
Ink · Variant
Ink Soft
#3a322a
Body copy. Slightly warmer than pure ink.
Copied
Ink · Mute
Ink Mute
#6e6357
Metadata, IBM Plex Mono labels, secondary text.
Copied
Accent · Primary
Oxblood
#7a1f1f
Editorial accent. Italic h1 spans, links, drop caps, offset shadows.
Copied
Accent · Deep
Oxblood Deep
#5c1414
Hover state on links + oxblood buttons.
Copied
Accent · Gold
Gold
#b9802a
Featured CTAs, day-5 conversion email, badges, ink-band highlights.
Copied
Accent · Gold Deep
Gold Deep
#8b5c14
Hover on gold elements. Conversion-math accent.
Copied
Accent · Sage
Sage
#6b7d5c
Confirmation states, "Do" rules, opt-in checkmarks.
Copied
Structure · Rule
Rule
#c9bfa6
Hairline borders, dashed separators, section dividers.
No. 03   Typography  

Typography.

Three families. GFS Didot for display (Didone, free Google Font). EB Garamond for body. IBM Plex Mono for metadata. No Inter, no Roboto, no Fraunces.

H1 · DisplayGFS Didot · 400
The Speaking playbook.
font-family: 'GFS Didot'
font-size: clamp(2.4rem, 5.2vw, 4.4rem)
line-height: 1.04
letter-spacing: -0.005em
H2 · SectionGFS Didot · 400
How a 22 becomes a 26.
font-family: 'GFS Didot'
font-size: clamp(1.7rem, 3.2vw, 2.6rem)
line-height: 1.04
H3 · SubheadEB Garamond · 600
What's in the playbook
font-family: 'EB Garamond'
font-size: 1.35rem
weight: 600
LedeEB Garamond Italic · 400
Free 38-page PDF, twelve-video walkthrough, and two real graded-feedback reports.
font-family: 'EB Garamond'
font-size: 1.35rem
font-style: italic
line-height: 1.45
BodyEB Garamond · 400
Most students plateau at Speaking 22 because they treat the TOEFL as a fluency test. It is a rubric test. Six to nine weeks of focused practice with real feedback closes the gap.
font-family: 'EB Garamond'
font-size: 1.06rem
line-height: 1.5
color: --ink-soft
Mono · KickerIBM Plex Mono · 500
§ 01 · Acquisition Stage
font-family: 'IBM Plex Mono'
font-size: .72rem
letter-spacing: .22em
text-transform: uppercase
No. 04   Spacing Scale  

Spacing.

Eight-step rhythm, 4-pixel base. Every section padding, grid gap, and margin pulls from this scale. No magic numbers.

--space-18 px
--space-216 px
--space-324 px
--space-436 px
--space-556 px
--space-680 px
--space-7112 px
--space-8144 px
No. 05   Shadows  

Elevation.

Five shadow tokens. Card & Pop for default elevation. Deep for hero/featured. Offset (oxblood or ink) for editorial card framing · the magazine-cover stack.

Card--shadow-card
Pop--shadow-pop
Deep--shadow-deep
Offset Oxblood--shadow-offset-ox
Offset Ink--shadow-offset-ink
No. 06   Components  

Components.

The shared parts. Each is built on the spacing scale and color palette above. Use these instead of inventing new variants.

Buttons .btn / .btn-paper / .btn-oxblood
Primary Action → Secondary → Accent →
Inputs input[type=text|email]
Section mark .section-mark
No. 02   The Contents  
Kicker / Eyebrow .kicker
Prepared by Marketing 760
Marginalia .marginalia
A note in the margin Marginalia are used for asides, credentials lists, footnotes, and quiet annotations. Mono font, oxblood left rule, ink-mute body. Appears in About blocks and FAQ asides.
Big number .big-number
9,231
Hand-drawn underline .underline-hand

The audience can smell hype at fifty paces.

Drop cap .dropcap

Michael has been teaching academic writing and ESL composition at California State University, San Bernardino since 1997. The drop cap signals an editorial register and slows the reader on the opening paragraph.

Decorative rules .rule / .rule-double / .rule-ornament
No. 07   Asset Library  

Assets.

Source files for all imagery used in the funnel. Editorial photography only. AI-generated still life only (no AI-generated faces). Real student headshot uses Michael's own portrait.

Hero desk still life
Hero · Page 01

Professor's Desk

Higgsfield · nano_banana_2 · 1376×768 · 198 KB JPEG · Editorial overhead still life

Michael Buckhoff headshot
Portrait · Page 01 § 03

Michael Buckhoff

Real photograph · embedded base64 (32 KB) · grayscale .15 + sepia .05 filter

B
Brand · Nav

Brand Mark

CSS-only · 38×38 px square · 1.5 px ink border · oxblood Didot "B"

Texture · Global

Paper Grain

SVG fractalNoise · base 0.78 · 3 octaves · 90% opacity multiply-blend overlay on every page

Decorative · Inline

Hand-drawn Underline

Inline SVG path · oxblood stroke 2.5 · used on .underline-hand spans

▶
Component · Page 02

Featured Video Block

Dark gradient placeholder · play glyph · 16:9 aspect · used in thank-you delivery card

No. 08   Layout & Grid  

Grid & breakpoints.

Containers max 1200 px, padding 40 px (24 px below 760 px). Narrow lede containers cap at 760 px. Five breakpoints handle most cases.

Small
540
single-col grids collapse
Medium
760
mobile typography, 24px container pad
Wide
980
3-col → 1-col collapse
Desktop
1080
hero-grid, 4-col → 2-col
Container .container

max-width: 1200 px · padding 0 40 px · centered. Below 760 px: padding drops to 0 24 px.

Narrow .narrow

max-width: 760 px · padding 0 40 px · centered. Used for centered hero text (Page 02 confirmation).

No. 09   SEO & Schema  

SEO & structured data.

Every page ships with full meta (title, description, canonical, OG, Twitter Card) plus JSON-LD. Identity schemas attach to Michael, brand schemas attach to Better TOEFL Scores, offer schemas attach to the product.

Person
Michael Buckhoff. Includes jobTitle, worksFor (CSUSB), alumniOf, image, sameAs YouTube, description with credential summary. Lives on Page 01.
Organization
Better TOEFL Scores. Founder = Michael, foundingDate 2002, sameAs YouTube. Referenced by all other schemas via @id.
Course
The 7-Step Playbook. Free offer ($0), aggregateRating from collected testimonials, courseInstance with online mode + workload PT1H30M.
Product + AggregateOffer
Coaching service. Three sub-offers ($19, $99/mo, $899/yr) with UnitPriceSpecification + billingDuration. Lives on Page 04 pricing.
FAQPage
On Pages 01 + 04. Six Q&A entries per page. Even though Google deprecated FAQ rich results, the schema still feeds AI engines (Perplexity, ChatGPT) and supports topic-cluster understanding.
Review
K.H. pharmacist case. Rating 5 stars, reviewBody pulled verbatim from real testimonial.
H2 Stacking
Target queries. "Best TOEFL prep course," "TOEFL Speaking section tips 2026," "How to improve TOEFL score 22 to 26," "TOEFL Speaking & Writing feedback." Distributed across body, never dump-blocked.
Meta
Per-page. Title (≤62 chars), meta description (≤160 chars), canonical, og:type, og:title, og:description, og:url, og:image, twitter:card=summary_large_image.
No. 10   Decorative Elements  

Editorial decoration.

Small ornaments that hold the magazine aesthetic. Use sparingly · one or two per section, never more.

Section ornament .rule-ornament
Footnote ref sup.fn

As reported in the 2026 ETS handbook[1], the new rubric penalizes the 8-second restatement habit.

Mockup banner .mockup-banner

See the dark ink band at the very top of this page. Mono, gold "Marketing 760" emphasis, 9-px vertical padding.

Section mark variants
No. 01   An Invitation  
Vol. III   Internal Reference  
No. IV   The Rate Card  
No. 11   Don'ts  

Anti-patterns.

Tells of AI-generated UI & copy. Forbidden across all funnel pages. Re-run Impeccable (impeccable detect) before shipping any new page.

Visual Don'ts
  • Side-tab borders. Thick coloured left border on a card. Use top rules or full borders instead.
  • Purple-on-white gradients. The cliché SaaS palette. Stay in the warm-paper palette.
  • Inter, Roboto, system-ui. Generic body fonts. EB Garamond only.
  • Stock photography. AI-generated faces, generic "happy student" hero shots. Editorial still life or real photographs only.
  • Hero CTAs in vibrant orange/green. Use ink, paper, oxblood, or gold variants.
  • Animated gradient backgrounds. Static paper texture only.
Copy Don'ts
  • Em dashes (—). Use commas, parens, or full stops.
  • "Leverage / unlock / transform / journey." AI tells.
  • "Hassle-free / seamless / next-level." Marketer-speak.
  • Countdown timers, "limited time," fake scarcity. The audience smells it.
  • Invented testimonials or rounded-number student counts. Use exact numbers (9,231 not "9,000+").
  • Hedging. "May, might, potentially, consider, perhaps."
No. 12   Design Tokens  

CSS variables.

Copy-paste from _shared.css. Every component on every page uses these. Never hardcode hex values or magic-number margins.

All tokens
:root {
  /* Color */
  --paper:        #f6f1e7;
  --paper-soft:   #ede5d2;
  --paper-deep:   #e3d8be;
  --ink:          #15110d;
  --ink-soft:     #3a322a;
  --ink-mute:     #6e6357;
  --oxblood:      #7a1f1f;
  --oxblood-deep: #5c1414;
  --gold:         #b9802a;
  --gold-deep:    #8b5c14;
  --sage:         #6b7d5c;
  --rule:         #c9bfa6;
  --rule-soft:    #d9cfb8;

  /* Spacing (4 px base) */
  --space-1:  8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 36px;
  --space-5: 56px;
  --space-6: 80px;
  --space-7: 112px;
  --space-8: 144px;

  /* Shadows */
  --shadow-card:       0 1px 0 #d9cfb8, 0 18px 36px -18px rgba(21,17,13,.26), 0 4px 10px -6px rgba(21,17,13,.15);
  --shadow-pop:        0 2px 0 var(--ink), 0 22px 44px -20px rgba(21,17,13,.32), 0 6px 14px -8px rgba(21,17,13,.18);
  --shadow-deep:       0 30px 60px -28px rgba(21,17,13,.42), 0 12px 24px -14px rgba(21,17,13,.22);
  --shadow-offset-ox:  6px 6px 0 0 var(--oxblood), 0 18px 36px -18px rgba(21,17,13,.28);
  --shadow-offset-ink: 6px 6px 0 0 var(--ink),     0 18px 36px -18px rgba(21,17,13,.28);
}
Font imports
<link href="https://fonts.googleapis.com/css2?family=GFS+Didot&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
File map
mockups/
├── pages/
│   ├── index.html            ← funnel TOC + 5-stage diagram
│   ├── 1-lead-magnet-landing.html
│   ├── 2-thank-you.html
│   ├── 3-email-sequence.html
│   ├── 4-pricing.html
│   ├── style-guide.html      ← this file
│   ├── _shared.css           ← design tokens + global styles
│   └── _shared.js            ← scroll reveals + count-ups
└── assets/
    ├── hero/
    │   └── hero-desk.jpg     ← Page 01 hero (Higgsfield)
    ├── headshot.b64.txt      ← Michael portrait (embedded inline)
    └── April-20-2019-picture-of-Michael-Buckhoff.jpg