18 added, 40 removed. Audit A to A.
---
name: "brand-and-content-system"
description: "Extract real brands (Wayback for rebuilds). Copy system, headline/CTA rules, trust surfaces, legal pages, SEO+structured data, anti-AI-slop, microcopy, DESIGN.md, W3C DTCG tokens, pSEO 5 types, GEO/AI search."
metadata:
version: "2.1.0"
updated: "2026-05-03"
effort: "medium"
model: "haiku"
license: "Rutgers"
compatibility:
claude-code: ">=2.0.0"
agentskills: ">=1.0.0"
submodules:
- ai-search-geo.md
- build-breaking-rules.md
- documentation-and-codebase-hygiene.md
- email-templates.md
- grammar-audit.md
- per-route-metadata.md
- seo-and-keywords.md
- social-automation.md
priority: 3
pack: "content"
triggers:
- "brand"
- "content"
- "copy"
paths:
- "org:website_build"
- "org:website_build"
---
# 09 — Brand and Content System
Extract real brand assets and apply the full copy system (anti-slop, SEO, trust surfaces, GEO) to every website build surface.
> **Model migration note (pass-77, 2026-06-09)**: `DALL-E` → **GPT Image 1.5** + `GPT-4o` → **GPT Image 2 vision**. Per `platform.openai.com/docs/deprecations`. Brand extraction protocol unchanged.
## Brian's Brand Voice
- Slogans: "Open-Source Wizardry. 100% Wizardry. 0% Robes." / "Often imitated, never duplicated."
- Newsletter: "Lab Insights Journal" | Handle: @HeyMegabyte | Email: hey@megabyte.space / brian@megabyte.space
- Tone: professional but irreverent, "Hey" not "Hi", first-person Megabyte Labs
- Always "cross-platform" + "open-source" | Install Doctor: "single command" / "one-liner"
- Hero: "[Topic] **Innovation**" | Footer CTA: "Let's Talk" | Rates: $140/hr ($70 nonprofit), $100/mo WordPress
- Social: all platforms, "Megabyte Minis" YouTube, Dev.to, Patreon
- Psychology: reciprocity (teach), social proof near CTAs, authority (depth/numbers), unity ("we/us"), Peak-End Rule
## Brand Extraction (Rebuilds)
- 1. Screenshot existing (Wayback if down). Extract logo / colors / fonts / tone. Never discard equity.
+ 1. Screenshot existing (Wayback if down). Extract logo/colors/fonts/tone. Never discard equity.
2. **Color extraction (NON-NEGOTIABLE)** — Screenshot with Playwright, GPT Image 2 vision extracts hex (logo priority), cross-ref logo, build palette, validate WCAG AA. NEVER invent, NEVER use Emdash defaults for clients, NEVER infer from category.
3. **Second-pass verification (BUILD-BREAKING — pre-deploy)** — After GPT Image 2 vision returns `{primary, secondary, accent}`:
- Load logo PNG via sharp, sample dominant chroma via k-means k=5 ignoring transparent + near-white/near-black (top-3 cluster centroids in HSL)
- - For EACH returned color, compute min HSL hue-distance to top-3 logo chromas — if `min_hue_distance > 30°` AND saturation>0.2, FAIL w/ diagnostic
+ - For EACH color, compute min HSL hue-distance to top-3 logo chromas — if `min_hue_distance > 30°` AND saturation>0.2, FAIL w/ diagnostic
- Re-run GPT Image 2 vision w/ corrective prompt naming top-3 logo chromas + demanding `primary` derived from one
- Validator: `validate-color-from-logo.mjs` in `build_validators.ts` between brand-research and template-pick
- NEVER ship primary color failing hue-distance check
4. **Logo-luminance + source-theme drives theme (NON-NEGOTIABLE)** — Two-signal:
- Signal A: logo dominant-color luminance (WCAG formula)
- - Signal B: source-site dominant background luminance (Playwright screenshot of `body` background — avg pixel luminance)
+ - Signal B: source-site dominant background luminance (Playwright screenshot of `body` background)
- BOTH agree → match; disagree → source-site wins UNLESS source design score <7/10 (then logo wins)
- High-quality source (≥7/10 via GPT Image 2 vision `detail:low`) → match source theme verbatim
- Set theme BEFORE template selection. Reject palette where logo-on-bg contrast <4.5:1 (WCAG AA).
- "Dark-first" applies to accent-rich Emdash/SaaS brands, NOT to logo-driven non-profit/serif clients or high-quality light-themed source brands
5. **Logo-vs-container contrast (BUILD-BREAKING — every render)** — Every logo render (header, footer, hero, modal, splash, mobile menu, sidebar) MUST contrast container bg by ≥4.5:1 on logo's dominant chroma (not transparent pixels)
- Forbidden: white-text-logo on white/cream | dark-text-logo on dark/navy | low-saturation-logo on same-hue bg
- Resolution: header AND footer themes chosen AFTER logo luminance scan. Dual-theme site needing SAME logo → ship TWO files (`brand-mark-light.svg` for dark bg, `brand-mark-dark.svg` for light bg) + CSS `<picture><source media>` swaps
- Automate via skill 12 logo-variant-generator (Real-ESRGAN inversion or `magick -channel RGB -negate`; color logos w/ text → GPT Image 1.5 w/ "same logo on transparent bg w/ text inverted to <opposite-luminance>")
- Validator: `validate-logo-contrast.mjs` — Claude Sonnet 4.6 vision samples logo bbox + container computed bg at 6bp + pixel sampling, fails if <4.5:1
6. **Brand-element extraction (logo is gold mine — extract DNA)** — GPT Image 2 vision returns `{font_family_guess, suggested_heading_font, suggested_body_font, font_weight, letterspacing, has_icon_mark, icon_mark_description, icon_mark_dominant_color, decorative_motif_description, motif_extractable (bool)}`
- Matched Google Font → `--font-heading` site-wide
- `motif_extractable=true` → crop icon-only region (`magick logo.png -alpha extract -trim +repage`), upscale 2-4× via Real-ESRGAN / GPT Image 1.5 variation, save as `assets/brand-splash.png` + `assets/brand-mark.png`
7. **Logo singularity (BUILD-BREAKING — exactly ONE logo file per container)** — Every logo container renders EXACTLY ONE logo asset
- Never composite two logo sources side-by-side; never stack icon-mark + wordmark as separate `<img>` tags; never render `apple-touch-icon.png` next to `logo.svg` in same container
- Composition at asset-prep time via `magick logo-mark.png logo-wordmark.png +append`, NOT at render time
- Validator: `validate-logo-singularity.mjs` parses `dist/` HTML; count>1 descendant `<img>` or inline `<svg>` in same logo container = FAIL
8. **Logo (NON-NEGOTIABLE)** — Every project needs premium logo. See Skill 12 for full process.
9. **Audit** — logo found + rated ≥7/10 + works 16-512px, colors EXTRACTED, palette WCAG AA, typography + tone + messages identified.
## Brand Extraction from Physical Assets (LOCAL BUSINESS — NO WEBSITE)
- ### Signage / Storefront (Google Street View + Places Photos)
-
- Street View Static API: `https://maps.googleapis.com/maps/api/streetview?size=1200x800&location={lat},{lng}&source=outdoor`
- Places photos: filter `types: ["exterior", "storefront"]`
- - GPT Image 2 vision on storefront — prompt: `"Extract brand identity from this business storefront photo. Return JSON: {sign_text, sign_font_style (serif/sans/script/decorative/hand-lettered), primary_color (hex), secondary_color (hex), accent_color (hex), logo_description, overall_aesthetic, confidence (0-1)}"`
-
- ### Business Cards / Collateral
-
- GPT Image 2 vision extracts: logo (crop region), colors (exact hex), font, tagline, NAP for verification.
-
- ### Color extraction priority for local
-
- 1. Signage → 2. Logo → 3. Storefront awning/trim → 4. Interior decor → 5. Vehicle wrap → 6. Business card → 7. Category default (LAST RESORT)
-
- Each color tagged with `color_source` for provenance.
-
- ### Font matching from signage
-
- GPT Image 2 vision identifies style → map to closest Google Font: Script → Dancing Script | Serif → Playfair Display | Modern sans → Inter | Hand-lettered → Caveat. Never use exact proprietary fonts — find spirit, not letter.
+ - GPT Image 2 vision on storefront — prompt: `"Extract brand identity from this business storefront photo. Return JSON: {sign_text, sign_font_style, primary_color (hex), secondary_color (hex), accent_color (hex), logo_description, overall_aesthetic, confidence (0-1)}"`
+ - Business cards: GPT Image 2 vision extracts logo (crop region), colors (exact hex), font, tagline, NAP for verification.
+ - Color extraction priority: 1. Signage → 2. Logo → 3. Storefront awning/trim → 4. Interior decor → 5. Vehicle wrap → 6. Business card → 7. Category default (LAST RESORT). Each tagged with `color_source`.
+ - Font matching from signage: Script → Dancing Script | Serif → Playfair Display | Modern sans → Inter | Hand-lettered → Caveat. Never use exact proprietary fonts.
## Brand Inference (New Products)
- - Dev tool → technical / dark / monospace | SaaS → professional / clean / cards | Agency → confident / bold
- - E-commerce → friendly / product-focused | Nonprofit → warm / impact imagery | API → technical / docs-forward
+ - Dev tool → technical/dark/monospace | SaaS → professional/clean/cards | Agency → confident/bold
+ - E-commerce → friendly/product-focused | Nonprofit → warm/impact imagery | API → technical/docs-forward
- Emdash defaults (NOT for clients): `#00E5FF`, `#50AAE3`, `#060610`. Sora / Space Grotesk / JetBrains Mono.
## Anti-AI-Slop Detection (MANDATORY SCAN)
**Banned copy words:** `delve | leverage | unleash | revolutionize | best-in-class | cutting-edge | discover | innovative | seamless | robust | synergy | elevate | empower | transformative`
**Banned patterns:** "Welcome to" | "Discover [product]" | vague aspirational headlines | hedging ("may help you," "can potentially") | generic superlatives
- **Banned design tells:** Inter as sole font | purple-blue gradients | uniform 16px border-radius everywhere | centered everything | Hero / Lucide as sole icon set | abstract 3D blobs | uniform fade-in on all elements | plastic AI stock photos
+ **Banned design tells:** Inter as sole font | purple-blue gradients | uniform 16px border-radius everywhere | centered everything | Hero/Lucide as sole icon set | abstract 3D blobs | uniform fade-in on all elements | plastic AI stock photos
- Fix: ask "Would the founder actually say this?" No → rewrite. Color signals function, not decoration.
+ Fix: ask "Would the founder actually say this?" No → rewrite.
## Copy System
- Headlines — benefit-first, specific, numbers, max 8 words
- Subheadings — expand promise, 15-25 words
- Body — one idea/paragraph, 2-4 sentences, active, concrete, benefit-oriented
- CTAs — specific action verb first, gradient primary + ghost secondary, above fold + page end
- Never: "Click here" | "Submit" | "Learn more"
-
- ## Brand Voice Enforcement
-
- Personality mapping — Expert → precise industry terms | Direct → short declarative | Pragmatic → outcomes/implementation
- - Vocabulary lists — always-use / never-use / prefer-over | max sentence: 25 words
+ - Vocabulary: always-use / never-use / prefer-over lists | max sentence: 25 words
- Banned structures: passive voice, hedging, em dashes mid-sentence | monthly drift audit
## Microcopy System
- Error messages — [What happened] + [What to do]. Empathetic, solution-oriented. "Payment failed. Try a different card or contact support." Never "Error 500" or jargon. Flesch 70+.
- CTAs — action verb first, max 3 words preferred: "Start building" | "Ship today" | "Get access"
- Empty states — acknowledge absence + suggest action: "No projects yet. Create your first one." Never just "No results"
- Toasts — past tense success ("Project created"), present in-progress ("Saving…"), plain-language errors
- Form labels — noun phrases, sentence case. Helper text: one line, 10 words max
## Machine-Readable Brand Documentation
- ### DESIGN.md (6 sections)
-
- 1. Visual Theme | 2. Color Palette (hex + role) | 3. Typography (family + scale + weight) | 4. Spacing + Layout | 5. Components (states + variants + props) | 6. Elevation + Shadows
-
- ### Tokens
-
- - W3C DTCG JSON format, single source of truth for design system
- - Generated from `tokens.json` → CSS vars + Tailwind config
+ - **DESIGN.md** (6 sections): 1. Visual Theme | 2. Color Palette (hex + role) | 3. Typography (family + scale + weight) | 4. Spacing + Layout | 5. Components (states + variants + props) | 6. Elevation + Shadows
+ - **Tokens**: W3C DTCG JSON format, single source of truth. Generated from `tokens.json` → CSS vars + Tailwind config.
## SEO + Structured Data
### Per-page MUST have
- Title 50-60 chars keyphrase-first | meta desc 120-156 chars | canonical
- OG image 1200×630 branded card | one H1 in prerendered HTML
- JSON-LD: WebPage floor; Org/BreadcrumbList/FAQPage/Person/Product/Service only when real entities
### pSEO 5 page types
- Integration (`/integrations/{tool}`) | Comparison (`/compare/{a}-vs-{b}`) | Use-case (`/for/{audience}`) | Template (`/templates/{type}`) | Location (`/{city}-{service}`)
- - Each: unique H1 + meta desc + 800+ unique words + 1 unique image + 3+ internal links + 1+ outbound citation. Vary sentence structure, swap synonyms, reorder. Never templatize verbatim.
+ - Each: unique H1 + meta desc + 800+ unique words + 1 unique image + 3+ internal links + 1+ outbound citation. Never templatize verbatim.
### GEO / AI search
- Quotable answer blocks 40-60 words (LLMs cite)
- FAQPage schema highest AI-citation rate
- - JSON-LD facts must also appear as visible HTML text | lead paragraphs answer query in <40 words
+ - JSON-LD facts MUST also appear as visible HTML text | lead paragraphs answer query in <40 words
- EEAT: author bio + Person schema + `sameAs` + dated revision + ownership
- ## Trust surfaces
+ ## Trust Surfaces
- Real testimonials w/ verifiable attribution | license/accreditation badges
- Security.txt + privacy + terms | Person JSON-LD w/ sameAs | About + Team pages with real bios
- ## Legal pages (required)
+ ## Legal Pages (required)
- /privacy | /terms | /accessibility
## See submodules: email-templates, social-automation, seo-and-keywords, documentation-and-codebase-hygiene, per-route-metadata, grammar-audit, build-breaking-rules.