| name | fanhub-rebrand-site |
| description | Complete end-to-end FanHub site rebrand. Replaces all show content, seed data, and visual design for the currently focused language track only (determined by the "Active implementation" line in the project's AGENTS.md / copilot-instructions). Always driven by a universe file in /fanhubdocs/. Use when asked to "rebrand the site", "switch shows", "replace Breaking Bad with X", "do the rebrand", "implement the rebrand plan", or "run the rebrand". Follows the phased plan in /fanhubdocs/*-plan.md.
|
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:
| Layer | What it means | Bad version | Good version |
|---|
| Color | The palette derived from key art | Swap one accent color | Full palette with surface, border, danger, muted — all derived from the show's visual world |
| Typography | Type as mood | Change one font | Expressive display type at hero scale, tracked caps for labels, period/genre-appropriate choices |
| Atmosphere | Texture, space, depth | Dark background | Grain overlays, vignettes, show-specific gradients, decorative motifs from the show's iconography |
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:
| Default FanHub layout | Re-skin (BAD) | New architecture (GOOD) |
|---|
| Full-width hero → stats bar → QOTD → 3-col card grid | Same structure, different colors | Split-panel command console with sidebar readouts |
| Centered title → subtitle → two CTA buttons | Same structure, gold instead of green | Dossier cover with folder tab, case stamp, no CTA buttons |
| Horizontal stats strip (6 items in a row) | Same strip, new labels | Vertical readout panel in a sidebar, or colophon footer, or chapter markers |
| Three white nav cards with emoji icons | Same cards, different emoji | File drawer tabs, chapter entries, pinboard evidence cards, magazine departments |
| Vertical list of episode cards | Same cards, different border | Timeline with alternating entries, operations ledger table, magazine article snippets |
The structural anti-sameness rules:
- The homepage MUST NOT have the same section order as the default (hero → stats → QOTD → cards)
- Navigation cards MUST NOT be a 3-4 column card grid with emoji icons
- Stats MUST NOT be a horizontal strip of identical stat-number/stat-label pairs
- Episode listings MUST NOT be a vertical stack of identical cards — use timeline, table, or alternating layout
- Character pages MUST NOT be a simple CSS grid of cards — use file drawer, dossier stack, masonry, or chronicle scroll
- 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:
- Universe file — which
fanhubdocs/*-universe.md to use
- Phase — run all phases, or start from a specific phase/step number?
Phase Execution Order
| Phase | What | Key dependency |
|---|
| Phase 0 | Visual personality research + UI design | Universe file (show name, era, tone) |
| Phase 1 | Seed data — focus track backend only | Universe file |
| Phase 2 | Design system + shared assets (focus track) | Phase 0 design brief |
| Phase 3 | Frontend components (focus track) | Phase 0 component designs + tokens |
| Phase 4 | (skipped unless focus track uses React) | — |
| Phase 5 | Verification | All phases complete |
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:
| Focus track | Phase 1 seed file | Phase 2 CSS file | Phase 3 frontend | Phase 4 |
|---|
dotnet | dotnet/Backend/Data/SeedData.cs | dotnet/Frontend/wwwroot/app.css | Blazor (.razor) | Skip |
node | node/backend/src/database/seed.sql | node/frontend/src/styles/global.css | React (.jsx) | Skip |
go | go/backend/database/seed.go | go/frontend/src/styles/global.css | React (.jsx) | Skip |
java | java/backend/src/main/resources/data.sql | java/frontend/src/styles/global.css | React (.jsx) | Skip |
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:
"{show name}" TV show official poster key art color palette"{show name}" title card typography font"{show name}" visual aesthetic mood atmosphere"{show name}" official website or streaming page (for live UI reference)"{show name}" iconic imagery symbols objects (for decorative motif candidates)"{show name}" era setting time period (for genre-appropriate design references)
Extract:
| Token | What to look for |
|---|
| Background | Dominant dark tone from poster/title card |
| Accent | Most iconic single color in branding |
| Accent hover | Lightened ~10% variant |
| Danger | Color associated with threat/death in key art |
| Text | Primary readable text color |
| Text muted | Dimmer secondary/caption color |
| Display font | Headline font from title card — find Google Fonts equivalent |
| Body font | Clean readable UI font — Inter unless show has strong typographic identity |
| Grain/texture | Is there a notable texture in official materials? (paper, film grain, stone, metal) |
| Era/aesthetic | Time period and genre (e.g. "1920s industrial Birmingham", "near-future dystopian", "Gothic Victorian") |
| Iconic objects | 3–5 objects or symbols strongly associated with the show's visual identity |
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:
| Show attribute | UI decision | Example |
|---|
| Era/physical texture | Background CSS: grain overlay, paper texture, or stone texture | Peaky Blinders: subtle noise grain + vignette |
| Power metaphor | Where accent color appears: borders, CTAs, or fill? | Gold power → accent fills important buttons, amber borders on all cards |
| Emotional register | Spacing density | Dark/oppressive → tighter spacing; epic/hopeful → more breathing room |
| Show's typography era | Display font choice + usage rules | 1920s → Playfair Display, all-caps letter-spaced section headers |
| Iconic objects | Decorative CSS motifs | Razor blades → diagonal clip-path dividers; smoke → radial-gradient hazes |
| Physical world texture | Hero gradient style | Smoky → layered radial gradients; desert → warm sand-to-black linear |
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.
| Show type | Layout Archetype | What it looks like |
|---|
| Sci-fi, military, intelligence | Command Console | Split-panel dashboard with sidebar readouts, HUD corner brackets, monospaced data, asymmetric grid |
| Period crime, 1920s–1950s | Dossier Archive | Case file folder cover, tabbed file navigation, accordion file drawers, operations ledger table |
| Fantasy, epic, mythological | Chronicle Codex | Narrow single-column narrative, illuminated drop caps, chapter numbering, ornamental dividers |
| Modern crime, noir, thriller | Evidence Wall | Pinboard with tilted cards, red push-pins, crime scene tape headers, wiretap transcript quotes |
| Prestige drama, literary | Editorial Magazine | Masthead header, two-column feature story, pull quote sidebar, numbered department grid |
| Dystopian, post-apocalyptic | Terminal Interface | Monospaced everything, > command prompts, blinking cursor effects, phosphor green/amber text |
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?
| Show type | Card aesthetic | Visual style |
|---|
| 1920s crime gang | Gang dossier / police file | Aged border, typewriter-style mono text, case number in corner, photo area has a vignette or mugshot crop |
| Space opera | Alliance personnel file | Clean datapad aesthetic, status indicator dot, biometric-style data layout |
| Fantasy | Wanted poster / court record | Torn/worn edge, parchment background, heraldic accent |
| Modern crime thriller | Case file / evidence board | Red thread connectors, polaroid-style photo, evidence tag |
| Period drama | Society page / telegraph biography | Column layout, italic serif, ruled lines |
Episode Listings
Ask: How does this show's world announce its stories?
| Show type | Episode aesthetic |
|---|
| 1920s period drama | Theater playbill or newspaper front page — column layout, large headline typography |
| Sci-fi | Mission briefing — monospaced header, status/classification indicators |
| Fantasy | Chronicle entry — drop cap, scroll-like dividers |
| Modern | Digital slate/film card — film strip border, director credit |
Quote Display
Ask: How do people in this show's world communicate in writing?
| Show type | Quote aesthetic |
|---|
| 1920s crime | Telegram or newspaper pull quote — STOP. period. all-caps, or serif column quote |
| Sci-fi | Transmission log — mono font, signal-noise visual noise |
| Fantasy | Illuminated manuscript or herald declaration — drop cap, gold border |
| Crime thriller | Deposition / wiretap transcript — case number header, redaction bars |
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:
| Universe section | Entity | Fields |
|---|
| "The Show" table | Show | Name, Network, Genre, StartYear, EndYear, TotalSeasons, TotalEpisodes |
| "Seasons at a Glance" table | Season | SeasonNumber, Year, EpisodeCount, AirDateStart, Description (Key Arc column) |
| "Characters" sections | Character | Name, Bio, Status, CharacterType, Tagline (if listed) |
| "Famous Quotes" table | Quote | Text, CharacterName, Context |
| "Character Relationships" table | CharacterRelationship | Character1, Character2, RelationshipType |
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:
| Show physical world | Atmosphere technique |
|---|
| Smoke, coal dust, fog | Film grain overlay + radial vignette |
| Deep space, void | Subtle dark gradient only — no grain |
| Rain-slicked streets, neon | Scanline overlay + neon radial blooms |
| Arid/desert | Warm linear gradient, no overlay |
| Period/candlelit interior | Grain overlay only |
| Medieval stone | Vignette only |
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.
| Iconic object / show type | Decorative pattern |
|---|
| Razor blades, weapons | Diagonal blade divider |
| Police files, telegrams | Accent side rule (doc-rule) |
| Evidence files, intelligence dossiers | Corner bracket decoration |
| Fantasy/heraldic | Horizontal rule with glyph |
| Sci-fi, classified documents | Mono scan line rule |
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:
| Component brief type | Card class | Use for |
|---|
| Gang dossier / police file | .card-dossier | Period crime, gritty shows |
| Alliance personnel file | .card-file | Sci-fi, military, modern intelligence |
| Theater playbill | .card-playbill | Period entertainment, theatrical |
| Broadsheet / chronicle | .card-broadsheet | Journalism, crime, newspaper-adjacent |
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:
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.
| Archetype | Nav pattern | Key structural difference |
|---|
| Command Console | Status indicator bar with monospaced items | Has a system status dot and "ONLINE" label |
| Dossier Archive | Manila folder tabs | Tabs look like physical file cabinet tabs |
| Chronicle Codex | Ornamental nav with glyph dividers between items | Decorative ✦ separators, no hover underlines |
| Evidence Wall | Minimal with crime scene tape accent | Tape-strip brand treatment |
| Editorial Magazine | Split masthead nav — brand centered, links on sides | Links split left/right of centered brand name |
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:
-
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
-
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
-
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
-
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.
| Archetype | Characters layout | Key structural difference |
|---|
| Command Console | Two-column: filter sidebar + personnel grid | Sidebar has toggle filter buttons, not a dropdown |
| Dossier Archive | Vertical file drawer — stacked entries that expand on click | Accordion-style, not a grid |
| Chronicle Codex | Single-column narrative scroll with portraits | Each character is an "article" with sidebar portrait |
| Evidence Wall | 3-column pinboard with tilted suspect cards | Cards have red pins and slight rotation |
| Editorial Magazine | Feature article layout with large lead character | First character is a "feature", rest are compact entries |
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.
| Archetype | Episodes layout | Key structural difference |
|---|
| Command Console | Vertical timeline with alternating left/right entries | Timeline axis with dot nodes |
| Dossier Archive | Operations ledger table — dense, no cards | Actual <table> with ref/title/briefing/date columns |
| Chronicle Codex | Chapter entries with drop caps and ornamental dividers | Each episode is a narrative passage |
| Evidence Wall | Pinboard with scattered event cards | Tilted cards with red pins |
| Editorial Magazine | Article snippets with large headlines and horizontal rules | Each episode is a magazine article entry |
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.
| Archetype | Quotes layout | Key structural difference |
|---|
| Command Console | Transmission feed with signal indicators | Vertical feed with ▮▮▮▯▯ signal strength bars |
| Dossier Archive | Intercepted communications with wiretap headers | Each quote is a transcript document |
| Chronicle Codex | Oracle speeches with illuminated drop-cap quotes | Centered, decorative, with rune dividers |
| Evidence Wall | Transcript wall — pinned wiretap cards | Tilted cards on a pinboard |
| Editorial Magazine | Pull quotes with large editorial typography | Two-column with quotes as featured excerpts |
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 block (ShowRequestId, RequestId, OnInitialized).
- Show the request ID in the show's label style.
- No Bootstrap
text-danger classes.
Phase 4 — SKIP
Phase 4 is not used. All frontend work is handled in Phase 3 for whichever single
track is the focus language. There is no cross-track copying step.
If the focus track is React-based (node/go/java), Phase 3 already covers those React
components directly. The steps below are retained as reference only for the React
component equivalents but should NOT be executed as a separate phase.
React component reference (informational only)
Step 16 — Header.jsx
Same design logic as NavBar.razor — show-appropriate nav aesthetic, display font for brand,
accent-colored active indicator. Do not replicate the BB default dark navbar.
Step 17 — Footer.js
Same footer design as MainLayout.razor — dark, show tagline, accent separator line.
Step 18 — Home.jsx
Same cinematic hero as Home.razor — layered gradient, large display-font title, show tagline,
stats, show-appropriate nav cards using the card aesthetic from Phase 0.
Step 19 — Characters.jsx + CharacterCard.jsx
Apply the component aesthetic brief for character cards. CharacterCard.jsx is the component
to redesign — it should use the same dossier/file/playbill aesthetic as Blazor.
Step 20 — Episodes.js + EpisodeList.js
Apply the episode aesthetic brief. Season count to match universe file.
Step 21 — About.jsx
Update show name references, show-appropriate description from universe file.
Step 22 — QuoteDisplay.jsx + QuoteDisplay.module.css
Apply the quote aesthetic brief. Large display-font quote text, show-appropriate framing.
Step 23–24 — global.css + index.html
node/frontend/src/styles/global.css: Full design system from Phase 2 Step 6.node/frontend/public/index.html: Google Fonts link, updated <title>.
Step 25 — Copy to go/ and java/
Copy all modified files. Preserve package.json differences in each track.
Phase 5 — Verification
Step 26 — Build verification loop (REQUIRED before any visual check)
Do NOT use start.ps1 as a build check. It masks errors behind a combined output and
restarts on failure in ways that make errors hard to isolate. Build the focus track's
backend and frontend separately, read all error output, fix every error, and repeat until
both pass cleanly.
Build commands depend on the focus track:
| Focus track | Backend build | Frontend build |
|---|
dotnet | cd dotnet/Backend; dotnet build 2>&1 | cd dotnet/Frontend; dotnet build 2>&1 |
node | cd node/backend; npm run build 2>&1 | cd node/frontend; npm run build 2>&1 |
go | cd go/backend; go build ./... 2>&1 | cd go/frontend; npm run build 2>&1 |
java | cd java/backend; ./mvnw compile 2>&1 | cd java/frontend; npm run build 2>&1 |
Build loop (dotnet example) — run until zero errors
# From repo root
cd dotnet/Backend
dotnet build 2>&1
cd ../Frontend
dotnet build 2>&1
Repeat this loop until both commands exit with Build succeeded and zero errors/warnings.
How to interpret build output
| Output pattern | Meaning | Action |
|---|
error CS0102: already contains a definition | New @code block prepended to old — file has duplicate content | Truncate old half; see "Duplicate Content" below |
error CS8954: only one file-scoped namespace | New class prepended to old in a .cs file | Truncate old half |
error RZ9980: Unclosed tag | New Razor markup prepended to old — file has duplicate HTML | Truncate old half |
error CS0111: already defines a member | Duplicate method in @code block | Truncate old half |
error CS0246: type not found | Missing using or wrong model class name | Add the missing using or fix the type reference |
error CS1002: ; expected | Syntax error in C# — usually inside @code | Read the line; fix the syntax |
warning RZ10012 | Unrecognized HTML attribute — usually fine in Blazor | Ignore unless it escalates to error |
Diagnosing and fixing duplicate content
Duplicate content errors (CS0102, CS8954, RZ9980, CS0111) always mean new content was
prepended to the old file instead of replacing it. The fix is always the same:
-
Find where the old content begins:
# For .cs files — find duplicate namespace declarations
(Get-Content path/to/File.cs | Select-String "^namespace " -AllMatches).LineNumber
# For .razor files — find duplicate @page directives or @code blocks
(Get-Content path/to/Page.razor | Select-String "^@page |^@code" -AllMatches).LineNumber
-
Identify the split line — the second occurrence of the namespace/@page/@code directive.
Everything from that line to the end of the file is old content to remove.
-
Truncate — keep only lines before the split point (subtract ~3 blank lines):
$lines = Get-Content path/to/File.cs
# e.g. second namespace starts at line 236 → keep lines 0..232 (0-indexed)
$lines[0..232] | Set-Content path/to/File.cs -Encoding UTF8
-
Verify the file ends correctly — last lines should be } then } (closing the class and namespace):
(Get-Content path/to/File.cs)[-5..-1]
-
Re-run dotnet build in that project. If errors persist, read the new output carefully
and address each remaining error before running again.
Common post-truncation issues
using Backend.Data; self-reference in SeedData.cs — Remove it; the class is inside
that namespace, so it cannot import itself.@page directive missing — The truncation point was too early; move it forward by
checking the actual line content rather than guessing by line count.- Model class not found — The new file references a model type from the old show's
namespace. Replace with the correct type from
dotnet/Backend/Models/.
Reset DB after build succeeds (dotnet only)
If focus track is dotnet, reset the database so it re-seeds with new data on next run:
Remove-Item "dotnet/Backend/fanhub.db" -ErrorAction SilentlyContinue
Remove-Item "dotnet/Backend/fanhub.db-wal" -ErrorAction SilentlyContinue
Remove-Item "dotnet/Backend/fanhub.db-shm" -ErrorAction SilentlyContinue
Step 27 — Visual check (focus track)
Start the focus track's app and verify:
/ — cinematic hero, show-specific atmosphere, large display-font title, show tagline/characters — correct characters with show-specific card aesthetic (dossier/file/playbill)/episodes — correct season count, show-specific episode card aesthetic/quotes — show quotes with show-specific framing (telegram/transmission/etc.)- Responsive at mobile widths
- The identity test: could you tell which show this is from a screenshot alone, with no show name visible?
Step 28 — API spot check (focus track)
Verify the focus track's API returns correct data:
GET /api/shows → new show name
GET /api/characters → correct character list
GET /api/episodes?season=1 → correct episode count per season
GET /api/quotes → new show quotes
Step 29 — React spot check (SKIP)
Step 29 is skipped. Only the focus track is verified. No cross-track comparison needed.
Completion Checklist
Phase 0
Phase 1
Phase 2
Phase 5 — Build Verification
Phase 3
Phase 4
The identity test (required)
References
references/layout-blueprints.md — CRITICAL — full-page HTML blueprints for each Layout Archetype (Command Console, Dossier Archive, Chronicle Codex, Evidence Wall, Editorial Magazine). Includes Home, Characters, Episodes, Quotes, and Navigation blueprints with complete CSS.references/design-tokens.md — color token set, personality analysis template, UI language translation, Component Aesthetic Briefsreferences/css-patterns.md — all CSS patterns (atmosphere, decorative, typography, card language, status badges)references/component-patterns.md — Blazor and React markup templates for Characters, Episodes, and Quotes card-level patternsreferences/svg-placeholder-template.md — SVG character placeholder patternscripts/run-rebrand.ps1 — helper script (stop server, delete DB, restart)
