styling-overhaul — Implementation Plan

styling-overhaul — Implementation Plan

Alias: so — invoke as /pipeline so <section>. Section IDs in YAML + commits use the canonical slug styling-overhaul.

Context

fabled10x.com currently ships with a placeholder "boutique consultancy" palette (ink / parchment / ember / steel / mist / signal) and the default Geist type stack — leftovers from website-foundation-1.3 when no real brand spec existed. The user has since produced a complete editorial brand identity: Marble / Parchment / Ink / Oxblood / Verdigris / Bone / Shadow palette, Cinzel + Inter + JetBrains Mono type stack, the brushstroke-seam composition, and a strict no-gradient / no-saturated-primary / no-UI-shadow discipline. The thesis: a boutique editorial brand that happens to teach AI development, deliberately occupying the corner opposite every other AI/coding channel in 2026 (neon, gamer, hype-arrow). This job resets the site against that identity.

The end-state: npm run build produces a one-mode (light) marble-and-ink site with Cinzel display + Inter body, an editorial card system, a homepage hero composed under a full-bleed illuminated-manuscript photograph, a dynamic opengraph-image pipeline that ships the brand to social-share previews, a dev-only /thumb-preview route for capturing 1280×720 YouTube thumbnails, contrast + forbidden-pattern sentinels locking the system against future drift, and the existing brand-identity doc rewritten + a new design-system doc shipped alongside.

The job follows the partymasters so precedent (32 phases / 278 sections) but is scaled down: fabled10x is one brand, one mode, one storefront — not a 14-theme multi-tenant SaaS. The structure here is 9 phases, 32 sections.

What Already Exists

• Tokens (placeholder) — src/app/globals.css declares an @theme inline block with ink/parchment/ember/steel/mist/signal hexes plus a prefers-color-scheme: dark override. To be wholesale replaced.
• Type stack (placeholder) — src/app/layout.tsx loads Geist and Geist_Mono via next/font/google, exposed as --font-geist-sans / --font-geist-mono. To be swapped.
• Site shell — src/components/site/Header.tsx, Footer.tsx, Container.tsx, NavLink.tsx. Functional, styled minimally. To be reskinned.
• Component inventory — src/components/capture/EmailCapture.tsx, build-log/JobCard.tsx, build-log/StatusBadge.tsx, build-log/JobsRollupTable.tsx, build-log/PhaseNav.tsx, build-log/MarkdownDocument.tsx, products/ProductCard.tsx, products/BuyButton.tsx, cohorts/CohortCard.tsx, cohorts/CohortDetailHero.tsx, cohorts/CohortStatusBadge.tsx, auth/SignInForm.tsx, account/PurchaseList.tsx, account/SignOutButton.tsx, crosslinks/LllCrosslinks.tsx. All functional, all in the placeholder palette.
• Routes — /, /about, /episodes, /episodes/[slug], /cases, /cases/[slug], /build-log, /build-log/jobs/[slug], /build-log/jobs/[slug]/[phase], /build-log/status, /products, /products/[slug], /products/account, /products/account/purchases/[id], /cohorts, /cohorts/[slug], /login, /login/verify. All render in the current palette and need reskin.
• Build-log prose — .build-log-prose component layer in globals.css styles MDX rendered for the build log. Heading/code/table/blockquote treatment exists; will be retrofitted to the brand stack.
• Brand identity doc (placeholder) — docs/fabled10x-brand-identity.md describes the old "boutique consultancy, muted confident colors" direction. Will be rewritten to the editorial direction in so-1.3 and a new docs/fabled10x-design-system.md added alongside.
• Tailwind 4 setup — @import "tailwindcss" + inline @theme in globals.css, @tailwindcss/postcss in postcss.config.mjs. Stable; we swap token values inside the existing structure, not the structure itself.
• No animation / UI libraries — no Radix, no Headless UI, no Framer Motion. The brand discipline (no gradients, no UI shadows, minimal motion) means we don't add any in this job either.

Feature Overview (32 Features, 9 Phases)

Size guide: S = few hours, single file. M = half day, 2-3 files. L = full day, 4+ files. XL = multi-day, new content type + loader + UI.

Dependency Graph

Phase 1: Foundation Tokens (1.1, 1.2, 1.3)
│   1.1, 1.2, 1.3 parallel — tokens are pure additive CSS, doc is independent
│
v
Phase 2: Typography (2.1 → 2.2 → 2.4 ; 2.3 parallel after 2.1)
│   2.1 must land before 2.2/2.3/2.4 (utilities depend on the new font vars)
│
v
Phase 3: Material Language (3.1, 3.2, 3.3 parallel)
│   surface + brushstroke + sentinel are independent
│
v
Phase 4: Logo + Chrome (4.1 → 4.2, 4.3, 4.4 parallel after 4.1)
│   Logo blocks Header+Footer consumption; layout primitives independent
│
v
Phase 5: Component Primitives (5.1 → 5.2, 5.3, 5.4 parallel after 5.1)
│   Button primitive feeds the others
│
v
Phase 6: Card Primitives (6.1 → 6.2, 6.3, 6.4 parallel after 6.1)
│   EditorialCard feeds the three card refactors
│
v
Phase 7: Page Surfaces (7.1 ... 7.6 all parallel)
│   each page is independent; depends on Phases 3–6 only
│
v
Phase 8: Asset Pipeline (8.1 → 8.2, 8.3 parallel after 8.1 ; 8.4 last)
│   logo SVG feeds og:image + thumb-preview ; design-system doc finalizes
│
v
Phase 9: A11y + Polish (9.1, 9.2, 9.3 parallel → 9.4)
    9.4 is the final sweep gate; the other three are independent tests

Phases 1–6 are the foundation chain. Phase 7 reskins every public page in parallel after the primitive set is locked. Phase 8 ships the offsite brand surfaces (logo, og:image, thumb-preview). Phase 9 is the regression-guard

• polish pass.

New Content Types Required

None. This job is chrome and assets. Content schemas (Episode, SourceMaterial, Case, ContentTier, ContentPillar) are unchanged.

Critical Files Reference

Verification Plan

Phase Documentation

• Phase 1: Foundation Tokens
• Phase 2: Typography
• Phase 3: Material Language
• Phase 4: Logo + Chrome
• Phase 5: Component Primitives
• Phase 6: Card Primitives
• Phase 7: Page Surfaces
• Phase 8: Asset Pipeline
• Phase 9: A11y + Polish

Dependencies to Add

None. The brand stack uses next/font/google (Cinzel, Inter, JetBrains Mono all available) and Tailwind 4 already in place. Local TTFs in public/fonts/ are required for next/og's ImageResponse (Phase 8.2) — bytes only, not an npm dependency.

next/og ships with Next.js 16 (no separate install).

Open Items (Resolve During Implementation)

• Photo / texture for hero — RESOLVED. public/hero/floatbg.png (illuminated capital flanked by source-code fragments on aged paper) landed alongside the initial 7.1 hero spike and is the canonical hero background. See Phase 7.1 for the full-bleed composition that replaced the earlier brushstroke-seam draft.
• Logo SVG master — Phase 4.1 ships the lockup as inline JSX rendered to public/logo.svg. If the user has a hand-illustrated wordmark, swap it in; otherwise the type-set Cinzel + JetBrains version is canonical.
• Verdigris allocation — the brand spec reserves Verdigris for "completion / success states." Phase 5.2 uses it for the complete status badge; Phase 4.3 uses it for the LLL sister-project link. No other Verdigris usage in this job.
• Section dividers cadence — Phase 4.4 ships <SectionDivider> but only the homepage uses it (per locked decision). If a page surface in Phase 7 reads "too long without breath," add a single divider during that section's implementation, not in the primitive's API.

Section IDs for TDD Workflow

Each feature maps to one section ID used by /discovery, /red, /green, /refactor.

These IDs are consumed by pipeline/active/session.yaml and used as directory names under pipeline/active/.