--- version: alpha name: Better TOEFL Scores description: Editorial-academic design system for Michael Buckhoff's TOEFL Speaking & Writing coaching funnel. Built to land as a trusted professor's office, not a Silicon Valley funnel. Audience is exam-stressed graduate students and foreign-trained professionals whose first language is usually not English. colors: primary: "#15110D" secondary: "#7A1F1F" tertiary: "#B9802A" neutral: "#F6F1E7" 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" typography: display: fontFamily: GFS Didot fontSize: 3rem fontWeight: 400 lineHeight: 1.04 letterSpacing: -0.005em h1: fontFamily: GFS Didot fontSize: 2.4rem fontWeight: 400 lineHeight: 1.04 letterSpacing: -0.005em h2: fontFamily: GFS Didot fontSize: 1.9rem fontWeight: 400 lineHeight: 1.04 h3: fontFamily: EB Garamond fontSize: 1.35rem fontWeight: 600 letterSpacing: -0.005em h4: fontFamily: EB Garamond fontSize: 1.05rem fontWeight: 600 lede: fontFamily: EB Garamond fontSize: 1.35rem fontWeight: 400 lineHeight: 1.45 body-md: fontFamily: EB Garamond fontSize: 1.06rem fontWeight: 400 lineHeight: 1.5 fontFeature: kern, liga, onum, pnum body-sm: fontFamily: EB Garamond fontSize: 1rem fontWeight: 400 lineHeight: 1.5 kicker: fontFamily: IBM Plex Mono fontSize: 0.72rem fontWeight: 500 letterSpacing: 0.22em lineHeight: 1 label-mono: fontFamily: IBM Plex Mono fontSize: 0.68rem fontWeight: 400 letterSpacing: 0.14em caption-mono: fontFamily: IBM Plex Mono fontSize: 0.62rem fontWeight: 400 letterSpacing: 0.22em rounded: none: 0px sm: 4px md: 8px lg: 14px full: 999px spacing: xs: 8px sm: 16px md: 24px lg: 36px xl: 56px "2xl": 80px "3xl": 112px "4xl": 144px components: button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.paper}" rounded: "{rounded.none}" typography: "{typography.kicker}" button-paper: backgroundColor: "{colors.paper}" textColor: "{colors.ink}" rounded: "{rounded.none}" typography: "{typography.kicker}" button-accent: backgroundColor: "{colors.oxblood}" textColor: "{colors.paper}" rounded: "{rounded.none}" typography: "{typography.kicker}" button-accent-hover: backgroundColor: "{colors.oxblood-deep}" textColor: "{colors.paper}" rounded: "{rounded.none}" typography: "{typography.kicker}" button-gold: backgroundColor: "{colors.gold}" textColor: "{colors.ink}" rounded: "{rounded.none}" typography: "{typography.kicker}" button-gold-hover: backgroundColor: "{colors.gold-deep}" textColor: "{colors.paper}" rounded: "{rounded.none}" typography: "{typography.kicker}" input-libcard: backgroundColor: "{colors.paper}" textColor: "{colors.ink}" rounded: "{rounded.none}" typography: "{typography.body-md}" card-default: backgroundColor: "{colors.paper-soft}" textColor: "{colors.ink-soft}" rounded: "{rounded.none}" typography: "{typography.body-md}" card-feature: backgroundColor: "{colors.ink}" textColor: "{colors.paper}" rounded: "{rounded.none}" typography: "{typography.body-md}" card-libcard: backgroundColor: "{colors.paper}" textColor: "{colors.ink}" rounded: "{rounded.none}" typography: "{typography.body-md}" card-confirm: backgroundColor: "{colors.paper}" textColor: "{colors.sage}" rounded: "{rounded.none}" typography: "{typography.kicker}" meta-mute: backgroundColor: "{colors.paper}" textColor: "{colors.ink-mute}" rounded: "{rounded.none}" typography: "{typography.label-mono}" card-deep: backgroundColor: "{colors.paper-deep}" textColor: "{colors.ink}" rounded: "{rounded.none}" typography: "{typography.body-md}" surface-neutral: backgroundColor: "{colors.neutral}" textColor: "{colors.primary}" rounded: "{rounded.none}" typography: "{typography.body-md}" surface-secondary: backgroundColor: "{colors.secondary}" textColor: "{colors.paper}" rounded: "{rounded.none}" typography: "{typography.body-md}" surface-tertiary: backgroundColor: "{colors.tertiary}" textColor: "{colors.ink}" rounded: "{rounded.none}" typography: "{typography.body-md}" pill: backgroundColor: "{colors.paper-soft}" textColor: "{colors.ink-soft}" rounded: "{rounded.full}" typography: "{typography.caption-mono}" pill-mute: backgroundColor: "{colors.rule-soft}" textColor: "{colors.ink}" rounded: "{rounded.full}" typography: "{typography.caption-mono}" nav: backgroundColor: "{colors.paper}" textColor: "{colors.ink-soft}" rounded: "{rounded.none}" typography: "{typography.label-mono}" rule: backgroundColor: "{colors.rule}" textColor: "{colors.ink}" rounded: "{rounded.none}" typography: "{typography.body-md}" --- # Better TOEFL Scores Design System ## Overview An editorial-academic design system built for **Better TOEFL Scores**, the personalized TOEFL Speaking and Writing feedback service led by Michael Buckhoff, 30-year English lecturer at California State University, San Bernardino. The visual language is calibrated to land as a **trusted professor's office**, not a Silicon Valley funnel. The audience is exam-stressed graduate students and foreign-trained professionals (physicians, pharmacists, engineers, PhD applicants) whose first language is usually not English. They have seen every test-prep template on the internet. They smell hype instantly. The aesthetic answers them with the opposite: warm paper, deep ink, magazine typography, library-card forms, and copy that reads like a professor explaining a fix during office hours. Typography uses three families. **GFS Didot** for display (Didone, free Google Font). **EB Garamond** for body. **IBM Plex Mono** for metadata. No Inter, no Roboto, no system-ui. Color is warm cream paper foundation, deep ink ground, single oxblood accent, brass gold for highlights, sage for affirmation. No neons, no purples, no gradients except subtle warm vignettes. Surfaces are square. No rounded corners on buttons, cards, or inputs. Editorial offset block-shadows in oxblood or ink define the magazine-cover stack. Paper-grain SVG texture overlays every page. ## Colors The palette is rooted in warm paper and deep ink, with a single oxblood accent, brass gold for highlights, and sage for affirmation. - **Primary (#15110D, "Ink"):** Deep warm black used for headlines, the brand mark, and inverted card backgrounds. Reserved for emphasis. Body copy uses `ink-soft` instead. - **Secondary (#7A1F1F, "Oxblood"):** The editorial accent. Marks italic H1 spans, links, drop caps, the `§` glyph in section markers, and offset block-shadows. The single most recognizable color in the system. - **Tertiary (#B9802A, "Gold"):** Brass highlight. Used for featured CTAs, the day-5 conversion email, badges, and ink-band accents. - **Neutral (#F6F1E7, "Paper"):** A warm cream that serves as the foundation for every page, providing a softer, more organic feel than pure white. Extended tokens fill out the rest of the system: - **Paper Soft (#EDE5D2)** and **Paper Deep (#E3D8BE)** step up the warmth for alternate sections and footer gradients. - **Ink Soft (#3A322A)** is the default body-copy color. **Ink Mute (#6E6357)** is the metadata color used with IBM Plex Mono labels. - **Oxblood Deep (#5C1414)** and **Gold Deep (#8B5C14)** are hover states. - **Sage (#6B7D5C)** marks confirmation states and "Do" rules. - **Rule (#C9BFA6)** is the hairline border color used across cards, dashed separators, and section dividers. Forbidden: purple, electric blue, neon green, pink. No gradients except subtle warm radial vignettes on the body background. ## Typography The typography strategy uses three families, each with one job. - **Display and headlines** use **GFS Didot**, a Didone serif with high contrast, narrow stems, and sharp serifs. It is free on Google Fonts. Italic spans within headlines use the `oxblood` color to mark editorial emphasis. - **Body, lede, and H3** use **EB Garamond**, a classical book-text Garamond with old-style figures, low-key italics, and full ligature support (`kern, liga, onum, pnum`). Drop caps use GFS Didot at 5.4em float-left. - **Metadata** (kickers, captions, button labels, navigation links, section eyebrows, form labels) uses **IBM Plex Mono**. Always uppercase, with letter-spacing 0.14em to 0.22em. Body copy is set in `ink-soft` (#3A322A), not pure ink. Pure ink (#15110D) is reserved for headlines and emphasized inline elements. Target rhythm: - Aim 12 to 18 words per sentence. - Two long sentences maximum per paragraph. - Reading level Grade 8 to 9 on the Flesch-Kincaid scale. - Use numerals for numbers 10 and above. ## Layout Containers max-width is 1200 pixels with 40-pixel horizontal padding. The container drops to 24-pixel padding below the 760-pixel viewport. Narrow content (centered hero blocks, confirmation pages) uses a 760-pixel max-width with the same padding. The spacing scale is eight tokens on a 4-pixel base: 8, 16, 24, 36, 56, 80, 112, 144. Every section padding, grid gap, and margin pulls from this scale. No magic numbers. Default section padding is 112 pixels (`spacing.3xl`) top and bottom. Section-to-section padding is collapsed with `.section + .section { padding-top: 0 }` so consecutive sections do not double-pad. Breakpoints: - **540 pixels:** Single-column grid collapse. - **760 pixels:** Mobile typography, 24-pixel container padding. - **980 pixels:** Three-column grids collapse to one. - **1080 pixels:** Hero grid splits, four-column grids collapse to two. Default grid behavior starts at four columns, collapses to two at 1080 pixels, and collapses to one at 540 pixels. Card hover states translate up 2 to 3 pixels and increase shadow weight. ## Elevation & Depth Five elevation tokens. No drop-shadow other than these. - **Card** is the default card shadow. Subtle 18-pixel diffuse with a hairline bottom edge. - **Pop** is a card with an ink bottom-edge plus diffuse ambient. Use for grids and exhibits. - **Deep** is for the hero or featured card. 30 to 60 pixels diffuse, no edge highlight. - **Offset Oxblood** is the editorial offset block-shadow in oxblood plus diffuse ambient. The magazine-cover stack. Reserved for the library-card opt-in form, the featured pricing tier, the funnel-stage card on the index page, and the brand-book colophon. - **Offset Ink** is the same offset shape but ink-colored. Used for inverted (ink-on-paper) cards. Offset block-shadows are the signature of the system. They appear sparingly. No more than one offset-shadow card visible above the fold. Page surface depth is built up in layers: 1. Warm radial body gradient 2. Paper-grain SVG noise overlay (90% opacity, multiply blend) 3. Secondary vignette and diagonal weave hatch 4. Section-level alt backgrounds with inset shadows ## Shapes The system is **square**. No rounded corners on buttons. No rounded corners on cards. No rounded corners on inputs. The only rounded element is the inline `.pill` for metadata chips, which uses a 999-pixel pill radius. The brand mark (the letter `B`) sits in a square 38 by 38 pixel box with a 1.5-pixel ink border. The rounded scale is exposed for completeness, but only `none` and `full` are used in practice. If you find yourself reaching for `md` or `lg`, you are about to soften a hard edge that defines the brand. Stop and use `none`. ## Components Every component on the funnel inherits from this set. New components must be assembled from these primitives, not invented. ### Buttons Three variants: `button-primary` (ink), `button-paper` (paper), `button-accent` (oxblood). All three share square corners, IBM Plex Mono caps text, 14 by 22 pixel padding, and a 4 by 4 pixel offset block-shadow. Hover state translates up 1 pixel and grows the shadow to 5 by 5 pixels. Never use a fourth color variant. Never make the buttons rounded. Never add a hover gradient or pulse animation. ### Inputs A single class. Transparent background, 1 pixel ink bottom border only, italic EB Garamond placeholder. Focus state turns the bottom border oxblood and adds a 4% gold-tinted background wash. This is the library-card aesthetic. Box-shadow inputs are forbidden. ### Cards Two default variants: `card-default` (paper-soft surface, hairline rule) and `card-feature` (inverted ink-on-ink with oxblood offset stack, used for the pricing middle tier). Both use square corners. ### Library-Card Form The opt-in form on the lead-magnet landing page. Paper background, 1-pixel ink border, 6-pixel oxblood offset shadow, internal 14-pixel dashed inset border. Header has a rotated mono stamp ("Free Dispatch · No. 01"), then a Didot italic heading, then bottom-rule inputs, then a full-width primary button, then a centered dashed-rule note. ### Navigation Sticky frosted nav. 94% opacity paper background with 8-pixel backdrop-blur. Hairline rule bottom. Brand mark and brand name on the left (Didot name plus IBM Plex Mono "Est. 2002" line). Mono uppercase links on the right with letter-spacing 0.14em. ### Section Mark The `§ No. 03 · The Method` eyebrow that opens every section. Mono uppercase, ink-mute color, ends with a flexed hairline rule that fills the remaining width. ### Marginalia Mono left-rule callout used for asides, credential summaries, FAQ headers, and footnote-style annotations. 2-pixel oxblood left rule, 16-pixel left padding, ink-mute body, ink emphasis spans. ### Decorative `dropcap` for opening paragraphs. `underline-hand` for hand-drawn underline emphasis. `rule`, `rule-double`, `rule-ornament` for section separators. `sup.fn` for footnote references. `kicker` for short uppercase eyebrows. ## Do's and Don'ts ### Voice and Copy **Do.** Write in first person. Michael speaks for Michael, never "we" or "the team." Use plain English calibrated to a Grade 8 or 9 reading level on the Flesch-Kincaid scale. Aim for 12 to 18 word sentences. Use active voice and concrete nouns. Use numerals for numbers 10 and above. Anchor every claim with exact data ("9,231 attempts graded since 2002," not "thousands of students"). Spell `TOEFL iBT` exactly. Use contractions (it's, you'll, we'll). Address the reader as "you" twice as often as Michael talks about himself. **Don't.** No em dashes. Use a comma, a period, or parentheses. No AI words: leverage, unlock, transform, elevate, empower, journey, ecosystem, holistic, robust. No marketer-speak: game-changer, seamless, next-level, world-class, cutting-edge. No idioms or sports metaphors ("crack the code," "knock it out of the park," "in the same ballpark") — these stop a non-native reader cold. No hedging (may, might, perhaps, potentially). No filler (just, really, basically, actually). No fake scarcity (countdown timers, "only 3 spots left," "sale ends tonight"). No Title-Case headlines. ### Visual **Do.** Use the editorial offset block-shadow on the page-defining hero card. Use the paper-grain texture on every page (it is set globally in `_shared.css`). Use real photographs for portraits of Michael. Use AI-generated editorial still life for product visuals. Use exact spacing tokens, never hardcoded margins. **Don't.** No side-tab accent borders (a thick colored left border on a card is the most recognizable tell of AI-generated UI). No purple gradients. No Inter, no Roboto, no system-ui. No stock photography of smiling students at laptops. No AI-generated faces. No hero CTAs in vibrant orange or green. No animated gradient backgrounds. No rounded corners on default surfaces. No magic-number margins; use the spacing scale. ### Accessibility **Do.** Maintain a 4.5:1 contrast minimum on body text (ink-soft on paper clears this). Maintain 3:1 on large headlines (ink on paper clears this comfortably). Respect `prefers-reduced-motion` (the scroll-reveal JS skips all animation if set). Use semantic HTML (`details` for FAQ accordions, `button` for actions, `label` for every input, descriptive `alt` text on every image). **Don't.** Do not use color alone to convey state. Always pair color with a glyph (a check for sage, a cross for oxblood). Do not use mono fonts for body copy (legibility falls off below 14 pixels). Do not autoplay any video. Do not hide focus rings.