04 — QUALITY: CYP Paid Traffic Page
Pass threshold: 90 / 100 When to run: After every Create (Mode 1) before handing to Kathryn. Run on the completed HTML page, not during production.
Design System Compliance (25 points)
| # | Check | Points |
|---|---|---|
| 1 | Colors match CYP palette exactly: teal (#0f2d3e), gold (#b79d64), cream (#f1ede6), off-white (#f7f5f0), teal accent (#3e666e), slate (#334155) | 4 |
| 2 | Gold text on light backgrounds uses accessible gold (#6b5d3e), never #b79d64 | 3 |
| 3 | Fonts loaded from Google Fonts: Fraunces (400, 600, 700, 800) + Montserrat (300, 400, 500, 600, 700, 800) | 3 |
| 4 | Fraunces used for all headings, quotes, card titles, price displays. Montserrat used for all body, buttons, labels, forms | 3 |
| 5 | All CSS is inline — zero external stylesheets, zero CSS custom properties (var()), zero class-based styling except .cta-btn for hover | 4 |
| 6 | Section background rhythm: no two consecutive sections use the same background color/gradient | 4 |
| 7 | Scrollbar styling present: width 12px, track #0f2d3e, thumb #b79d64, thumb-hover #9d8556, plus Firefox fallback | 2 |
| 8 | CTA buttons have hover effect: .cta-btn { transition: background 0.3s ease, transform 0.2s ease } + .cta-btn:hover { background: #c4aa74 !important; transform: translateY(-1px) } | 2 |
Responsive & Layout (20 points)
| # | Check | Points |
|---|---|---|
| 9 | Three breakpoints present: 968px (grid collapse, sticky→static), 840px (typography scale), 640px (compact mobile) | 5 |
| 10 | At 968px: all multi-column grids collapse to single column (grid-template-columns: 1fr) | 3 |
| 11 | At 840px: h1 reduces to 2.2rem, h2 to 1.8rem, section padding to 4rem 5% | 2 |
| 12 | At 640px: h1 reduces to 1.8rem, h2 to 1.5rem, section padding to 3rem 4%, header wraps | 2 |
| 13 | No horizontal scroll at any viewport width (html, body: overflow-x: hidden; width: 100%) | 3 |
| 14 | Images have max-width: 100%; height: auto | 2 |
| 15 | box-sizing: border-box applied globally | 1 |
| 16 | Opt-in page: form gets order: -1 at 968px (appears above copy on mobile). Copy-details hidden | 2 |
Page Architecture (15 points)
| # | Check | Points |
|---|---|---|
| 17 | No navigation links in header (logo only, or logo + single CTA anchor for opt-in) | 3 |
| 18 | No navigation links in footer (legal links only: Privacy, Terms, Disclaimer + contact email) | 2 |
| 19 | Correct section count for page type, price point, and audience temperature — warm vs. cold (see 03b section selection guide) | 3 |
| 20 | Header is sticky: position: sticky; top: 0; z-index: 100; border-bottom: 3px solid #b79d64 | 2 |
| 21 | CTA appears minimum 2 times on page (once above fold, once at bottom minimum) | 3 |
| 22 | CTA links to correct destination (ThriveCart URL for purchase, form anchor for opt-in) | 2 |
Copy & Compliance (20 points)
| # | Check | Points |
|---|---|---|
| 23 | Zero forbidden terms (leverage, synergy, coaching, mindset, game-changer, journey, crush it, unlock, sign up, you'll love) | 4 |
| 24 | AI product copy uses correct vernacular: "upload to Claude" (not paste), "a paid Claude account" (no pricing), no "Projects feature" reference | 4 |
| 25 | Copy QC passed: run business-aos/reference/brand/copy-qc.md — zero P1 violations, zero P2 violations | 4 |
| 26 | Voice matches: direct, pattern-revealing, grounded. Short sentences for impact. Zero sales pressure. Calm authority | 3 |
| 27 | Meta disclaimer present in footer (required on all purchase pages) | 2 |
| 28 | Anthropic/Claude disclaimer present in footer (if page sells AI products) | 2 |
| 29 | Results/earnings disclaimer present if page makes outcome claims | 1 |
Component Fidelity (20 points)
| # | Check | Points | |
|---|---|---|---|
| 30 | Glass cards match spec: rgba(241,237,230,0.06) bg, rgba(183,157,100,0.25) border, border-radius: 6px | 3 | |
| 31 | Gold top-accent bars: position: absolute; top: 0; height: 3px; background: #b79d64; left: 2rem; right: 2rem on cards that require them | 3 | |
| 32 | Meta pills (if used): border-radius: 20px, rgba(183,157,100,0.15) bg, rgba(183,157,100,0.4) border, 0.8rem font | 2 | |
| 33 | Gold left-border cards: border-left: 4px solid #b79d64; border-radius: 0 6px 6px 0 | 2 | |
| 34 | Section header labels: gold (#b79d64 on dark, #6b5d3e on light), uppercase, 2px letter-spacing, 0.9rem, 700 weight | 2 | |
| 35 | Angle bracket bullets (›): gold, weight 700, position absolute | 2 | |
| 36 | FAQ cards styled correctly for their background (glass + gold left-border on teal, white + gold left-border on cream) | 2 | |
| 37 | CTA button styling: gold bg, #0f2d3e text, 4px border-radius, 700 weight, Montserrat font | 2 | |
| 38 | Footer structure: disclaimers (0.7rem, 35% opacity, left-aligned) → copyright (0.75rem, 45% opacity) → contact (0.8rem, gold link) → legal links (0.75rem, 40% opacity, ` | ` separators) | 2 |
Common Failure Modes
| Failure | What Happens | How to Fix |
|---|---|---|
| Gold text on cream | WCAG accessibility failure — text is unreadable | Replace #b79d64 with #6b5d3e on any light background |
| CSS variables used | Page breaks in Convertri or other embed contexts | Find-replace all var() with hardcoded hex values |
| Same background twice | Visual monotony — page looks flat | Map section backgrounds before building. Alternate per section background states table |
| Missing breakpoint | Page overflows or text is illegible on mobile | Include all three breakpoints (968, 840, 640) in |