Msbart2 Apm Fanhub Rebrand Site

Rebrand Site

Full end-to-end FanHub site rebrand for the currently focused language track only. The focus language is determined by reading the Active implementation line in the project's AGENTS.md (or .github/copilot-instructions.md). For example, if it says dotnet/, only the dotnet backend and frontend are rebranded — other tracks are not touched. Source of truth is always a universe file in fanhubdocs/ and a plan file in fanhubdocs/. The design system is always derived from the target show via deep visual research — never assumed.

Core Philosophy — This Is Not a Re-skin

A re-skin swaps colors and fonts. A rebrand rebuilds the UI from the show's world.

The test: if you saw a screenshot of just one page, with no show name visible, would it be obvious which show it belongs to? If yes, you did it right. If no, start over.

Every single design decision must answer this question:

"Why does this feel like [show name]?"

What a re-skin looks like (do not do this)

• Take the Breaking Bad card grid → paint it a different color
• Change #62d962 → #c8a45a throughout
• Swap "Breaking Bad" text for the new show name
• Add a different Google Font

The result is FanHub wearing a costume. The layout, the card shapes, the interaction patterns, the visual hierarchy — all unchanged. It still feels like the same app.

What a real rebrand looks like

• Character cards that feel like gang dossiers (Peaky Blinders), Alliance personnel files (The Expanse), or crime scene evidence boards (True Detective)
• Episode listings styled like a theater playbill (Peaky Blinders), mission briefing board (Band of Brothers), or transmission log (Battlestar Galactica)
• A homepage hero that uses the show's actual visual atmosphere — foggy Birmingham streets, the void of space, the desert of New Mexico — expressed through CSS gradients, textures, and typography scale
• Navigation that looks like it was designed inside the show's world — not a generic dark navbar with an accent color

The three layers of identity

Every rebrand must address all three layers:

The fourth layer — LAYOUT ARCHITECTURE (most important)

If the HTML structure is the same, it's a re-skin. Period.

The first three layers (color, typography, atmosphere) are CSS-only. An agent can apply all three perfectly and STILL produce a re-skin because the DOM structure is identical: same hero → same stats bar → same QOTD → same three card grid.

Layout Architecture means the page's HTML skeleton itself is different:

The structural anti-sameness rules:

1. The homepage MUST NOT have the same section order as the default (hero → stats → QOTD → cards)
2. Navigation cards MUST NOT be a 3-4 column card grid with emoji icons
3. Stats MUST NOT be a horizontal strip of identical stat-number/stat-label pairs
4. Episode listings MUST NOT be a vertical stack of identical cards — use timeline, table, or alternating layout
5. Character pages MUST NOT be a simple CSS grid of cards — use file drawer, dossier stack, masonry, or chronicle scroll
6. The nav bar MUST have a structurally different DOM — not just different colors on the same <nav><brand><links> pattern

See references/layout-blueprints.md for complete page-level HTML blueprints for each archetype.

Before You Start

Read the universe file first, then do deep visual research on the show:

Locate the universe file (fanhubdocs/{show}-universe.md) — it contains the canonical show data, era, tone, characters, quotes, and structure needed for both seed data and design research.

Determine Focus Language

Before starting, read the project's AGENTS.md (or .github/copilot-instructions.md) and find the Active implementation line. This determines which single language track to rebrand. Only that track's backend seed data, CSS, and frontend components are modified.

For example:

• Active implementation: dotnet/ → only modify files under dotnet/
• Active implementation: node/ → only modify files under node/

Do NOT touch other language tracks. If the user explicitly requests additional tracks, handle them as a separate follow-up — but the default is always the single focus track.

Clarify Before Starting

Ask if unclear; otherwise assume and proceed:

1. Universe file — which fanhubdocs/*-universe.md to use
2. Phase — run all phases, or start from a specific phase/step number?

Phase Execution Order

Phase 0 must run before any visual work. It produces the component-level design brief that all subsequent phases implement. Skipping or rushing Phase 0 produces a re-skin, not a rebrand. Phases 1 and 2 must complete before Phase 3. Within each phase, steps listed as parallel can be executed simultaneously.

Phase routing by focus language:

Phase 0 — Visual Personality Research

This phase produces a complete design brief — not just a color palette but a full description of the UI experience tailored to this specific show. It has two tracks:

• Track A — Research (web search, key art analysis)
• Track B — Design decisions (translate research into concrete UI patterns)

Both tracks must complete before any code is written.

Track A — Research

Run these web searches:

1. "{show name}" TV show official poster key art color palette
2. "{show name}" title card typography font
3. "{show name}" visual aesthetic mood atmosphere
4. "{show name}" official website or streaming page (for live UI reference)
5. "{show name}" iconic imagery symbols objects (for decorative motif candidates)
6. "{show name}" era setting time period (for genre-appropriate design references)

Extract:

Track B — Show Personality Analysis

Before touching CSS, answer these questions in plain language. Write 1–2 sentences each. This is the most important part of Phase 0.

1. What is the emotional register of this show?

• Dark/oppressive? Hopeful/epic? Tense/paranoid? Elegant/decadent? Chaotic/electric?
• This determines spacing, density, and pacing of the UI.

2. What is the show's visual metaphor for power?

• Gold coins? Cold steel? Neon light? Ancient stone? Corporate glass?
• This determines what the accent color represents and where to use it.

3. What does the show's world feel like physically?

• Smoky? Sterile? Humid? Arid? Airless? Candlelit?
• This determines background textures and gradient direction/style.

4. What objects or textures are synonymous with this show?

• Pick 3–5 objects. These become decorative motifs.
• Examples: razor blades, horse silhouettes, flatcaps (Peaky Blinders); breaking atom, hazmat suit, yellow (Breaking Bad); spacecraft, ring, alien ruins (The Expanse)

5. What typographic tone does the show's era suggest?

• 1920s industrial → Art Deco, heavy serifs, tracked uppercase labels
• Near-future sci-fi → Geometric sans, tight mono code-like type
• Medieval/fantasy → Old-style serif, manuscript texture
• Modern crime → Clean grotesque, newspaper column layout
• 1980s → Condensed slab, neon-colored type

Track B — Show Personality → UI Language Translation

Use the answers above to make these concrete design decisions:

Track B — Layout Archetype Selection (CRITICAL — do not skip)

This is the most important decision in the entire rebrand. It determines the HTML skeleton of every page. Without this, you get a re-skin.

Select ONE Layout Archetype from the table below based on the show's genre, era, and tone. Then use the matching blueprints from references/layout-blueprints.md for ALL pages.

Write down the selected archetype name. All Phase 3 and Phase 4 steps reference it.

What this means concretely:

• Home.razor gets a completely different DOM structure (not hero → stats → QOTD → cards)
• Characters.razor gets a different list/grid layout (not a simple CSS grid of cards)
• Episodes.razor gets a different presentation (not a vertical stack of identical cards)
• Quotes.razor gets a different framing (not just styled blockquotes in a list)
• NavBar.razor gets a structurally different nav pattern (not brand-left + links-right)
• The page-level grid (grid-template-columns, section ordering) is fundamentally different

Track B — Component Aesthetic Briefs

For each FanHub component, derive a show-specific aesthetic. These are design intentions, not code instructions — they tell the agent what to build, not just what colors to use.

Character Cards

Ask: What are character profiles in this show's world?

Episode Listings

Ask: How does this show's world announce its stories?

Quote Display

Ask: How do people in this show's world communicate in writing?

Hero Section (Homepage)

Ask: If the show had an official website hero, what would it look like?

• Peaky Blinders: Fog over Birmingham rooftops at dusk. Silhouette of a man in a flatcap. Text: "By Order of the Peaky Blinders" in stacked Playfair Display. Slow smoke drift animation.
• The Expanse: The void of space, a ring gate in the distance. "Humanity's Last Frontier." Orbitron or Space Grotesk, glitch animation on the "E" in Expanse.
• Breaking Bad: Desert highway vanishing point. "Change the Chemistry." Green chemical haze. Industrial sans, text-shadow glow effect on accent.

The hero is the identity statement of the site. It must be unmistakable.

Phase 0 Output

Fill in references/design-tokens.md with all extracted values, AND write a short "Component Aesthetic Brief" block for Characters, Episodes, Quotes, and Hero.

Also record the selected Layout Archetype (e.g. "Command Console", "Dossier Archive", "Evidence Wall", etc.). This is referenced by ALL subsequent phases.

All Phase 2+ steps read from those outputs. All Phase 3+ steps use the matching blueprints from references/layout-blueprints.md.

Phase 1 — Seed Data

Focus track backend: what to replace

Only seed the backend for the currently focused language track (determined above). Read the universe file's data tables and map to that track's schema.

Standard entity mapping from universe file:

Episode generation: Universe files have season-level arcs but not per-episode titles. Generate 6 episode titles+descriptions per season from the Key Arc and Notable Story Beats. Use the format: S{n}E{n}: "{Title}" — short, evocative, in the show's tone.

Only execute the step below that matches the focus track. Skip the others.

Step 1 — Dotnet SeedData.cs (focus track: dotnet)

• File: dotnet/Backend/Data/SeedData.cs
• Replace all entities. Keep admin user seed unchanged.
• Update CharacterImages dictionary: keys = kebab-case character names → /images/characters/{name}.jpg
• After editing: delete dotnet/Backend/fanhub.db so the app re-seeds on next startup. Run scripts/run-rebrand.ps1 -Step seed-dotnet or do it manually.

Step 2 — Node seed.sql (focus track: node)

• File: node/backend/src/database/seed.sql
• PostgreSQL INSERT syntax. Node schema has extra fields: poster_url, first_appearance, director, writer, rating, context — populate with reasonable values.
• Populate character_episodes junction table.
• Preserve the intentional duplicate character bug (duplicate a main character instead of the original show's character).

Step 3 — Go seed.go (focus track: go)

• File: go/backend/database/seed.go (verify actual path before editing)
• Go/GORM syntax. Extra fields: CreatedAt, UpdatedAt, FirstAppearance, Director.

Step 4 — Java data.sql (focus track: java)

• File: java/backend/src/main/resources/data.sql (verify actual path before editing)
• JPA SQL syntax. Note: Java schema has no Season model — episodes reference season_id directly as an integer.

Step 5 — Character images (focus track: dotnet)

• Dir: dotnet/Frontend/wwwroot/images/characters/
• (For non-dotnet focus tracks, locate the equivalent images directory.)
• Delete all existing *.jpg files.
• Create SVG placeholder for each character: dark --color-surface background, --color-accent large initial, character name in small text. Name files {kebab-case-name}.jpg (keep .jpg extension for compatibility with CharacterImages dictionary).
• See references/svg-placeholder-template.md for the SVG pattern.

Phase 2 — Design System

Phase 2 is not "apply the color tokens." It is build the visual language of the show in CSS — then apply it. Color tokens are the smallest part of this phase.

Step 6 — The full CSS design system

Create a design system in dotnet/Frontend/wwwroot/app.css that contains all four layers. CSS patterns and code for each layer are in references/css-patterns.md.

2a — Color tokens

Apply the full :root {} token set from references/design-tokens.md → "Token Set (CSS)". These are the only values in the codebase that should reference show-specific colors. All components consume tokens; no hex values anywhere outside :root.

2b — Atmosphere layer

This is what creates a non-generic feel. Choose ONE or more based on the show's physical world:

See references/css-patterns.md → "Atmosphere Layer" for the CSS for each technique. See references/css-patterns.md → "Hero Gradients" for show-specific .hero background CSS.

2c — Show-specific decorative system

Based on the iconic objects from Phase 0, pick 2–3 decorative CSS patterns. Do not use all of them.

See references/css-patterns.md → "Decorative System" for CSS for each pattern.

2d — Typography scale

Typography must be expressive, not just functional. Adjust letter-spacing and text-transform based on the show's era (Period → tracked uppercase; Sci-fi → tracked uppercase; Modern → tight, title-case).

See references/css-patterns.md → "Typography Scale" for the .text-hero, .text-section, .text-label, and .text-quote CSS classes.

2e — Card language

Cards must feel show-specific. Choose the card style that matches the Component Aesthetic Brief:

See references/css-patterns.md → "Card Language" for CSS for each card type. See references/css-patterns.md → "Status Badges" for .badge-alive / .badge-deceased.

Step 7 — CSS + font links (focus track)

If focus track is dotnet:

• dotnet/Frontend/wwwroot/app.css: Apply the full design system from Step 6. Delete ALL previous show's color values. Apply the atmosphere layer. Apply the decorative system. Apply typography scale.
• dotnet/Frontend/Components/App.razor: Add Google Fonts <link> tags before <ResourcePreloader /> using the font names from Phase 0:

  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family={DisplayFont}:wght@700;900&family={BodyFont}:wght@400;500;600&display=swap"
    rel="stylesheet"
  />
  

If focus track is node, go, or java:

• {track}/frontend/src/styles/global.css: Same full design system as above.
• {track}/frontend/public/index.html: Google Fonts link, <title> → {Show Name} - FanHub.

Phase 3 — Frontend Components (Focus Track)

Phase 3 applies to the focus track's frontend only.

• If focus track is dotnet → edit Blazor .razor files (steps 9–15c below).
• If focus track is node, go, or java → edit React .jsx / .js files. Use the same design intentions described in steps 9–15c but apply them to the React component equivalents (Header.jsx, Footer.js, Home.jsx, Characters.jsx, Episodes.js, etc.).

The golden rule for Phase 3: Every page must be written from scratch using the Layout Archetype's blueprint from references/layout-blueprints.md. You are NOT editing the old page — you are replacing the entire file with a new page built from the blueprint.

DO NOT:

• Keep the old DOM structure and just change CSS classes
• Keep hero → stats bar → QOTD → nav cards section ordering from the default layout
• Keep the 3-column card grid with emoji icons as navigation
• Keep the horizontal stats strip
• Keep <div class="hero">...<div class="hero-content"> wrapper pattern

DO:

• Open the matching blueprint in references/layout-blueprints.md
• Copy the entire page structure for the selected Layout Archetype
• Replace placeholder text with actual show data from the universe file
• Apply CSS from references/css-patterns.md on top of the blueprint's CSS
• The result must have a fundamentally different DOM tree than the previous show

Work steps 9–10 first (layout shell), then 11–15 in parallel.

Step 9 — NavBar.razor

Use the Navigation Blueprint from references/layout-blueprints.md matching the selected Layout Archetype. The nav bar MUST have a different DOM structure — not just different colors on the same <nav><brand><links> pattern.

Implement:

• Replace the ENTIRE NavBar.razor file content with the blueprint's nav structure
• Adapt text/links to match the show's terminology from universe file
• The nav must look structurally different from the previous show's nav — not just recolored

Step 10 — MainLayout.razor + MainLayout.razor.css

Design question first: What is the frame of this show's world?

MainLayout.razor:

• Footer: dark, show-appropriate tagline (derive from universe file famous quotes or premise).
• Accent-colored separator line between content and footer.
• The tagline must be an actual line from the show or a direct reference — not generic.

MainLayout.razor.css:

• .sidebar: background: var(--color-bg) — no gradients from other shows.
• .top-row: background-color: var(--color-bg).
• #blazor-error-ui: background: var(--color-error-bg), border color = var(--color-danger).
• color-scheme: dark.

Step 11 — Home.razor

This is the single most important page. Replace the ENTIRE file with the Home Page Blueprint from references/layout-blueprints.md matching the selected Layout Archetype.

STRUCTURAL REQUIREMENTS — the new Home.razor MUST:

1. Have a completely different grid layout than the default hero → stats → QOTD → cards. Each archetype specifies a different grid:

   • Command Console: grid-template-columns: 280px 1fr 240px (3-panel dashboard)
   • Dossier Archive: folder cover → case brief (2-col stats+desc) → intercepted comm → file tabs
   • Chronicle Codex: single narrow column, max-width 800px, vertical scroll narrative
   • Evidence Wall: case header → 3-column pinboard with tilted cards
   • Editorial Magazine: masthead → 2-col feature story → 4-col department grid

2. Stats must NOT be a horizontal strip. They must be integrated into the layout:

   • Command Console: readout grid in the left sidebar panel
   • Dossier Archive: vertical stats in the case brief sidebar
   • Chronicle Codex: horizontal colophon footer with ornamental dividers
   • Evidence Wall: inline case metadata footer
   • Editorial Magazine: masthead subhead and colophon footer

3. QOTD must NOT be a centered blockquote section. It must be integrated:

   • Command Console: transmission log in the left sidebar
   • Dossier Archive: intercepted communication with timestamp
   • Chronicle Codex: oracle speech section with decorative rune dividers
   • Evidence Wall: pinned wiretap card on the pinboard
   • Editorial Magazine: pull quote in the feature story sidebar

4. Navigation must NOT be emoji-icon cards. Use the archetype's pattern:

   • Command Console: sidebar nav items with ▸ indicators and counts
   • Dossier Archive: file tabs with pull-to-open aesthetics
   • Chronicle Codex: chapter entries with roman numerals
   • Evidence Wall: pinned evidence cards with red pins
   • Editorial Magazine: numbered department grid with vertical dividers

Implementation:

• Delete the ENTIRE existing Home.razor content
• Copy the matching Home Page Blueprint from references/layout-blueprints.md
• Replace all placeholder text: {Show Name}, {Tagline}, {Show description}, counts
• Add the @code block with the same data-loading logic (characterCount, quoteCount, etc.)
• Add the <style> block with the blueprint's CSS
• The result must be unrecognizable as the same app when compared to the previous show

Step 12 — Characters.razor

Use the Characters Page Blueprint from references/layout-blueprints.md.

STRUCTURAL REQUIREMENTS — the characters page MUST NOT be a simple CSS grid of cards.

Implementation:

• Replace the ENTIRE Characters.razor file with the blueprint's structure
• Keep the same @code block logic (data loading, character selection, detail modal)
• Apply the Component Aesthetic Brief's card style within the new layout structure
• Status badges: Alive → accent, Deceased → danger (.badge-alive, .badge-deceased)

Step 13 — Episodes.razor

Use the Episodes Page Blueprint from references/layout-blueprints.md.

STRUCTURAL REQUIREMENTS — episodes MUST NOT be a vertical stack of identical cards.

Season filter:

• Max seasons must match universe file's total seasons exactly
• Filter control style must match the archetype (toggle buttons for Console, tabs for Dossier, dropdown for Magazine)
• Label: "Filter by Series:" for British shows, "Filter by Season:" for American

Step 14 — Quotes.razor

Use the Quotes Page Blueprint from references/layout-blueprints.md.

STRUCTURAL REQUIREMENTS — quotes MUST NOT be a plain list of styled blockquotes.

Quote text should use the display font at a large scale (1.4rem+), with show-appropriate framing (not just a dark card with italic text).

Step 15 — Locations.razor (if implemented)

Apply the same Component Aesthetic Brief logic:

• Location cards follow the same card language as Characters/Episodes.
• Location "type" tags styled consistently with the show's label style.
• Show-appropriate subtitle referencing the show's world, not "FanHub · {ShowName}".

Step 15a — NavMenu.razor / NavMenu.razor.css

• Remove vestigial Blazor template links (Counter, Weather).
• .nav-item ::deep a.active: replace rgba(255,255,255,0.37) → var(--color-accent-muted), add border-left: 3px solid var(--color-accent).
• Hover: replace rgba(255,255,255,0.1) → rgba({accent-rgb}, 0.08).

Step 15b — NotFound.razor

• Large display-font 404 in accent color.
• Show-appropriate tagline (an in-universe phrase from the Famous Quotes or show premise).
• "Return Home" CTA in show-appropriate phrasing (e.g. "Return to Small Heath →" for PB).
• Dark background, no Bootstrap defaults.

Step 15c — Error.razor

• Dark error page, show-appropriate tone.
• Preserve the `@code

…(truncated)