# Southbound & Crown — Full Platform Redesign & Rebuild ### Master Brief — paste this entire document as your prompt --- ## 0. Read this before doing anything This is the complete brief for a ground-up redesign and rebuild of the Southbound & Crown website: public marketing site, member portal, and admin console. Read the whole document before you propose a direction or write code. **Context you need:** Southbound & Crown already commissioned 8 design explorations for this site. All 8 were reviewed and rejected by the client. Section 2 documents exactly what was shown and exactly why each one failed, in the client's own words. This is not boilerplate — it is the single most useful input in this brief. A 9th attempt that repeats any of these patterns has failed before it's opened. **The bar:** treat this as a $50,000 engagement for a real, currently-operating community organization with real members, real money moving through it, and a real volunteer board who will use the admin tools every week. "Competent and safe" is a failure condition — that's what the last 8 attempts were, and all 8 were rejected. The target is work good enough to submit to Awwwards, FWA, or CSS Design Awards, distinctive enough that people who follow web design talk about it, and specific enough that it could not be reskinned for a different supporters group by swapping a logo. **Tools:** if you have access to the `frontend-design`, `ui-ux-pro-max`, and `web-design-guidelines` skills (or equivalent design-intelligence tools), use all three — `frontend-design` for aesthetic direction and process, `ui-ux-pro-max` for palette/type/UX-pattern grounding, `web-design-guidelines` for interaction and accessibility standards. Don't skip straight to building. **Process:** follow Section 12 exactly. In short — research real current award-caliber sites first, commit to *one* deep direction instead of producing another batch of shallow options, prove that direction on a dense utility screen (not just the homepage hero) before building the rest, and self-critique against Section 2's forbidden-pattern list before presenting anything. --- ## Table of contents 1. Who Southbound & Crown is (ground truth) 2. What's already been tried, and exactly why it failed 3. The real design problem nobody has actually solved yet 4. Brand truth: verified colors and typography raw material 5. Content truth: sitemap, copy, membership tiers, product catalog 6. Functional spec — public site 7. Functional spec — member portal 8. Functional spec — admin console 9. Recommended technical foundation 10. Quality bar / acceptance criteria 11. Non-goals (explicitly out of scope for v1) 12. Required process 13. Definition of done --- ## 1. Who Southbound & Crown is (ground truth) Don't invent facts about this organization. Everything below is sourced from their current live site at **southboundcrown.com** (note: no "and" — southboundandcrown.com failed to resolve when checked; confirm the canonical domain before launch). - **What it is:** an independent, member-run supporters group for Charlotte FC (MLS), which recently expanded to also support Greenville Triumph SC (USL League One). Started as South Carolina's first Charlotte FC supporters group; membership now spans the Carolinas and beyond. - **Origin:** founded by a group of Tottenham Hotspur fans based in Rock Hill, South Carolina. When MLS announced Charlotte as its 30th expansion team, the group pivoted to build a Charlotte FC supporters community based in South Carolina, explicitly to bring representation to the fan base from outside city limits. - **Co-founders:** Michael Gallemore and Matt Burris. - **Home tailgate:** the Royal Family Tailgate Lot, before every home game. SEC Quarterly called it the "best tailgate in the South" — this quote is used prominently on the current site and matters to the community; keep it or something equally sourced, don't fabricate a replacement. - **Identity markers — this is the raw material a generic sports-fan template does not have access to, use it:** - South Carolina tents and "Kenny Powers" flags (Eastbound & Down reference — signals a self-aware, irreverent Southern sense of humor, not corporate-clean) - Video games, card games, ping pong tournaments, and Biñho matches at the tailgate - A stated love of Legos and "mesmerizing karaoke skills" — oddly specific, charming, unrepeatable details - Good food, good beer, good company — explicitly **family-friendly**, not a bar-culture or 21+ vibe - Away-game travel, watch parties, and community/charity giving - An annual capacity-capped bus to the Atlanta away game — the club needs a real roster of who's riding, not just a headcount - A recreational soccer team that plays in tournaments (Queen City Cup) and adult league play - Member-elected governance: members vote in official elections/referendums and can nominate themselves for a board seat. This is a democratically-run community, not a brand with customers — tone and transparency should reflect that. - **Tagline sentiment from the current site:** "Come on in, pull up a chair, and be a part of our continuing story." Southern hospitality is a real value here, not a marketing veneer — but it coexists with irreverence (Kenny Powers) and competitive passion (soccer), so avoid tipping into twee or precious. - **Social:** Instagram (@southbound_crown), X/Twitter (@SouthboundCrown), a private Facebook group, and a Discord community (member-gated). Discord remains the real-time chat/community layer — see Non-goals. --- ## 2. What's already been tried, and exactly why it failed Eight concepts exist in this repo (`southbound-redesign/demo.html`, `sbc2.html`–`sbc7.html`, plus five written concept docs `01`–`05` covering Bold Hero Video, Story-Scroll Narrative, Editorial Minimal, Community Dashboard, and Brutalist directions). Here is the client's actual verdict on each built concept: | # | File | Direction | Verdict | |---|------|-----------|---------| | 1 | `demo.html` | Gradient-blue hero, rounded Poppins type, orange CTA | 2nd favorite — but rejected. Too much orange, too generic, "looks like an AI build site" | | 2 | `sbc2.html` | Blocky, thick black borders, Arial, orange CTA | **Favorite of the 8 — still rejected.** Still too much orange. "Blocky is fine" but still reads as AI-built | | 3 | `sbc3.html` | Editorial minimal, Playfair Display + Poppins | Hard pass. "Feels AI-built and designed by a Haiku-level model." Doesn't read as designed at all | | 4 | `sbc4.html` | Minimal, Inter | Same hard pass as #3 | | 5 | `sbc5.html` | Playful, Poppins | 3rd favorite. Vibe/fun was better, but the design execution missed | | 6 | `sbc6.html` | Space Grotesk + Space Mono, dark | Too generic. Specifically dislikes the wordmark treatment in the hero. Feels AI-generated | | 7 | `sbc7.html` | system-ui, soft gradient | 4th favorite. Still feels AI-generated | The five written concept docs (01–05) never got individually scored the way the HTML builds did, but they share the exact same underlying problem: each is a competently-executed generic template (video hero, scrollytelling chapters, magazine grid, live dashboard, brutalist raw-HTML) rather than something that reads as inevitable for *this specific club*. None of them so much as mention Greenville Triumph — more on that in Section 3. ### The concrete anti-patterns to eliminate Two complaints dominate the client's actual feedback. "Feels AI-generated" (or a direct equivalent — "AI build site," "designed by a Haiku-level model") was the verdict on **6 of the 7** built concepts — by far the most repeated word in the review. "Too much orange" was named specifically on the two highest-ranked concepts (the favorite and the runner-up), which makes it the most repeated *color-specific* complaint even though it wasn't universal. Both are treated as first-class constraints below, alongside everything else that showed up repeatedly across the 8 concepts. Treat every item below as forbidden by default: - **Saturated burnt-orange (`#E35708`-ish) as a dominant or background color.** Named explicitly on both the #1 and #2 ranked concepts. It is not in either club's real brand palette (see Section 4) — it appears to have been an unearned default, not a grounded choice. - Rounded "pill" badge + emoji combo as a hero eyebrow (🏆 trophy, ⚽ soccer ball) — generic SaaS-landing-page shorthand for "credibility," reads as a template default, not a design choice. - Smooth gradient-wash hero backgrounds as the default hero treatment. - Mid-sentence color-highlighted keywords in headlines (e.g., "...MEETS SOCCER **PASSION**" with the last word in orange) — an extremely common AI-page-builder tic at this point. - Full-bleed solid-color CTA "bands" with centered white text and a stat row underneath. - Giant, faded, oversized ghost-text lettering behind hero copy (e.g., a huge low-opacity "SBC" watermark) purely as texture. - Diagonal ribbon/banner shapes for taglines ("★ BEST TAILGATE IN THE SOUTH ★") — a badge cliché. - ALL-CAPS-EVERYTHING plus uniform thick black borders on every box as a stand-in for "bold." Confidence is not the same as loudness. - **Font fatigue:** Inter, Poppins, Space Grotesk, and Playfair Display specifically — not because any of these are bad typefaces, but because they are the reflexive first pick for an AI-generated site in 2026 and the client can feel it. If you land on one of these anyway after real exploration, be able to explain why it beats the alternatives you tried — don't reach for it by default. - Three-icon feature-card grids using generic outline icons and one-sentence descriptions, repeated as the default way to explain "what we do." - **Fabricated statistics and fake citations used to justify design choices.** The prior concept docs are full of invented studies ("Nielsen Norman Group, 2024," "Baymard Institute" percentages, "Awwwards, 2025" claims) that do not exist. Zero tolerance for this: if you can't cite something real, state your reasoning plainly instead of dressing it up as research. On top of the client's specific rejections, these three patterns are the current default clusters AI-generated design gravitates toward regardless of brief — avoid all three unless something in this document specifically calls for one: 1. Warm cream background (near `#F4F1EA`) + high-contrast serif display + terracotta accent 2. Near-black background + a single bright acid-green or vermilion accent 3. Broadsheet/newspaper layout — hairline rules, zero border-radius, dense columnar text (this is close to what `sbc3`/`sbc4` did, and it was a hard pass) --- ## 3. The real design problem nobody has actually solved yet Two problems that all 8 prior attempts either ignored or never had to face: ### 3.1 This is now a two-club supporters group Southbound & Crown started as a single-team (Charlotte FC) supporters group. It has since added formal support for Greenville Triumph SC — this is already live and real: the current commerce catalog sells a "2026 SBC Triumph Membership," "SBC Triumph Membership WITH Parking," and a standalone "Triumph Parking Pass" (see Section 5.3). Charlotte FC (MLS) and Greenville Triumph SC (USL League One) are different clubs in different leagues with different, non-overlapping brand colors (Section 4). None of the 8 rejected concepts mention Triumph at all — they were all designed before or without accounting for this. You don't get to skip it. The site needs an identity system that: - Reads unmistakably as **Southbound & Crown** first — a single organization with its own mark and voice — not as two team pages stitched together - Lets Charlotte FC and Triumph content/colors surface distinctly where it matters (match info, club-specific membership tiers, club-specific merch) without the homepage looking indecisive - Doesn't bury Triumph as a footnote, and doesn't awkwardly split the whole site into two parallel experiences There's a real information-architecture and visual-identity decision to make here — a club selector, a layered brand system (SBC identity as the primary layer, team colors as a contextual accent), a unified crest that references both — figure out what's right, but treat it as a first-class design problem, not an edge case. ### 3.2 A homepage hero is not a design system All 8 prior concepts are homepage-only static mockups. Not one of them was ever tested against a dense, functional screen — a settings form with a dozen fields, a filterable admin table, a checkout flow. A look that only survives as a hero image is a poster, not a design system. **Requirement:** whatever direction you commit to must be demonstrated on the marketing homepage *and* at least one dense utility screen — the admin member table (Section 8.1) or the member account/payment-methods screen (Section 7.2) — before it's considered validated. If the aesthetic falls apart under real data density, real form fields, and real tabular content, it's the wrong aesthetic, no matter how good the hero looked. --- ## 4. Brand truth: verified colors and typography raw material Do not invent brand colors. These are sourced from each club's official team-color references. ### 4.1 Charlotte FC (MLS) — verified | Color | Hex | Note | |---|---|---| | Black | `#000000` | Official primary | | Charlotte Blue / Process Blue | `#1A85C8` | Official primary (also referenced as `#107CBB` in some sources — verify current usage, don't assume) | | Silver | `#A2AAAD` | Supporting neutral | | White | `#FFFFFF` | Supporting neutral | ### 4.2 Greenville Triumph SC (USL League One) — verified | Color | Hex | Note | |---|---|---| | Gold / Yellow | `#F4C25E` | Primary accent | | Slate Blue | `#48536D` | Secondary | | Dark Navy | `#272F3D` | Primary dark | ### 4.3 Southbound & Crown's current site palette (for brand-equity continuity — not a mandate) Existing members already associate these with SBC. There's real brand equity in the blue and the gold-tan — don't discard that reflexively. The orange is the one color with a specific, repeated client objection. | Role | Hex | Keep or retire | |---|---|---| | Header/nav blue | `#3F6897` | Reasonable starting point | | Link/accent blue | `#2991D2` | Reasonable starting point | | Announcement/CTA gold-tan | `#FEB247` | Reasonable starting point — this is a muted sandy gold, not the saturated orange below. Don't conflate the two. | | Burnt orange | `#E35708` | **Retire as a dominant color.** This is almost certainly what "too much orange" refers to across every rejected concept. Not present in either club's real palette. | ### 4.4 Synthesis direction (a starting hypothesis, not an answer — earn it) One credible path: a dark navy/near-black foundation (shared visual language between both clubs' dark tones) as the base, Charlotte's process blue as the primary SBC accent (Charlotte FC is the founding, majority identity), and Triumph's muted gold used deliberately as a secondary accent — prominent in Triumph-specific contexts, restrained elsewhere. That is one legitimate hypothesis, not a spec — run it through real exploration (consider building the palette in OKLCH for perceptually even steps rather than eyeballing hex values) before locking it in. Two hard constraints regardless of where you land: saturated burnt-orange must not return as a dominant color, and don't reach for purple — it shows up constantly as the reflexive "community/membership platform" default and has no basis in this brand. ### 4.5 Typography No mandate here — this needs real exploration, not a database lookup. Do treat the following as informed starting points worth testing, not defaults to reach for unexamined: pairings built around a confident condensed sans for athletic energy (e.g. in the Barlow family) are a legitimate, under-used direction for a sports-club brief and stand in deliberate contrast to the Inter/Poppins fatigue called out in Section 2. Whatever you choose, it needs to hold up in both a 96px hero headline and a dense 13px admin table cell — test both. ### 4.6 One more data point: prior art from this same client This repo already shipped `/tailgate/` — Tailgate HQ, a small match-day inventory tracker built for this exact group, live and in use today. It independently converges on Charlotte FC's real blue (`#1A85C8`) and pairs it with Clash Display + Satoshi on an OLED-black glass surface. That's not a mandate for the full site — it's one narrow utility app, not a brand system — but it's a second, independent confirmation of the verified Charlotte blue above, and a real example of a premium, non-generic font pairing this client has already seen and shipped. Worth a look for continuity before you start from zero. --- ## 5. Content truth: sitemap, copy, membership, product catalog Full content parity with the current site is required — this is a replacement, not a subset. Everything in this section is scraped from the live site; use it as real seed content, refine copy for voice/quality but don't fabricate facts. ### 5.1 Current sitemap (public) `Home` · `2026 Membership` · `About` · `Tailgate` · `Chants` · `Merchandise` (store) · `Gallery` · `Media Page` · `Login` · Cart · social icons (Instagram, X, Facebook) ### 5.2 Membership benefits (2026 packages, current copy) - Member kit: scarf, sticker, clear drawstring bag - 15% discount code for SBC merchandise - Access to the Discord community - Access to exclusive single-match Supporter Section tickets - Access to away tickets - Discounted tailgates; member pricing on food; kids eat free - Coordinated away travel — sign up and get tracked for trips like the annual capacity-capped bus to Atlanta - Community events: member-led weekly/monthly board-game and video-game nights (Phasmophobia, Warzone, Catan, D&D, etc.) - Recreational soccer teams - Charity fundraising and community volunteer campaigns - SBC voting rights: vote in official elections/referendums, nominate and run for a board position ### 5.3 Current product/membership catalog (real seed data — prices as of research) | Item | Price | |---|---| | 2026 SBC Triumph Membership WITH Parking | $65.00 | | 2026 SBC Triumph Parking Pass | $50.00 | | 2026 SBC Triumph Membership | $15.00 | | 2026 Family Membership | $60.00 | | 2026 Individual Membership | $30.00 | | Adidas Fleece Hoodie | from $75.00 | | Southbound Logo Sweatshirt | from $40.00 | | SBC Season 3 Crewneck | from $40.00 | | Unisex Hoodie | from $45.00 | | SBC Swoosh Classic Tee / Unisex T | from $24.00 | | SBC Season 3 Classic Tee | from $22.00 | | Golf Rope Cap | $30.00 | | 2024 SBC Summer Scarf | $20.00 | | 2023 SBC Summer Scarf | $15.00 (was $20.00 — sale) | | 2022 SBC Summer Scarf | $10.00 (was $15.00 — sale) | | 3x5 SBC Logo Display Flag | $20.00 | | 3x5 SBC Kenny Powers Display Flag | $20.00 | | 3x5 SBC Kenny Powers Double-Sided Flag | $30.00 | Product categories currently in use: Patches, Membership, Tailgate Meal Tickets, Apparel, Accessories, Flags, Scarves, SBC Jerseys. Note the sale-price pattern (original price struck through, sale price shown) and "from $X" variant pricing (size/color options) — both need to survive in the new commerce module. --- ## 6. Functional spec — public site - **Home** — the identity/hero problem from Section 3.1 lives here first and foremost - **About** — origin story, co-founders, values, both-club explanation - **Tailgate** — game-day info: Royal Family Tailgate Lot location/logistics, what to expect, family-friendly framing. Model this as data the admin can update per game (see the Events model in Section 8.2), not hardcoded copy — tailgate details change week to week - **Chants** — carry the page over; content parity, not a redesign priority - **Gallery** — photo galleries from tailgates/events/away trips; needs a real upload → display pipeline, not placeholder stock imagery, and a lightbox that respects `prefers-reduced-motion` - **Media page** — carry over from current site - **Merchandise (shop)** — full storefront: browse by category, product detail with variants (size/color), cart, checkout. Must support both one-time products and the club-specific membership products in Section 5.3 in the same catalog - **Membership / Join** — explain benefits (Section 5.2), show current tiers with real pricing, purchase flow - **Login** — entry point to the member portal (Section 7) ## 7. Functional spec — member portal Authenticated area for existing members. ### 7.1 Profile - Update username and email - Update mailing address - Optional date of birth field (used only for the admin birthday report in 8.1 — never shown in any public member-facing directory) ### 7.2 Payment & subscription - View and update saved payment methods - View and manage active membership subscription (which tier, renewal date, cancel/change tier) - Full order history — merch purchases and membership payments, with receipts/invoices ### 7.3 Member-only content - Whatever's gated today stays gated (Discord invite/link, supporter-section ticket access info, away-travel coordination info) ## 8. Functional spec — admin console Design principle for this entire section, stated explicitly by the client: **make the things that take time easy to do.** This is used weekly by volunteer board members who are not full-time technologists. Every workflow below should be judged on how few clicks/how little friction it takes, not just whether the feature technically exists. Concretely: support duplicating a prior sign-up sheet or newsletter instead of rebuilding from scratch every year, support CSV export everywhere a list appears, support saved/reusable report filters, support bulk actions (bulk email a filtered member list, bulk export). ### 8.1 Members - Full member list with status (active/lapsed/pending), search/lookup by name or email - Reports: active members list, mailing/address list (for physical mail), member lookup, **upcoming birthdays** (next N days) — this is the reason the optional DOB field exists in 7.1 ### 8.2 Events & sign-up sheets Build this as one flexible underlying system, not four unrelated features — tailgate info (6), the away-game bus, and rec-team rosters are all instances of the same "event with an optional roster" concept, and tailgate meal tickets (5.3) are the same concept with a commerce item attached. - Create/edit an event: title, description, date, club (Charlotte/Triumph/general), optional linked sign-up sheet, optional linked commerce item (e.g., a paid meal ticket or a bus-seat deposit) - Sign-up sheet: custom fields per sheet (e.g., t-shirt size for a rec roster, bus-stop for the Atlanta trip), optional capacity cap with waitlist, response list as a sortable/exportable table - Two concrete recurring use cases this must handle well, both are real and annual: - **The Atlanta away-game bus** — the club rents a bus every year for this away match; admin needs a definitive, capacity-capped roster of who's riding, with contact info - **Rec soccer rosters** — the group fields a recreational team for the Queen City Cup tournament and adult league play; admin needs rosters per season/competition - Communication: send an email to everyone on a sheet, send a reminder to people who haven't responded yet, view send history ### 8.3 Commerce (Squarespace replacement) - Create/edit/list products: name, description, images, price (with sale-price support matching the current pattern in 5.3), variants (size/color), inventory count, category, active/inactive toggle - Order management and sales reporting: revenue by item/category, order list, refunds, inventory/stock levels ### 8.4 Newsletters - Compose, save as draft, schedule a future send - Audience/segment targeting — all active members, club-specific (Charlotte/Triumph), a specific sign-up sheet's roster, custom tags — not just "email everyone" - Send history/log --- ## 9. Recommended technical foundation This is a strong default, not a hard mandate — deviate only with a clear reason, and say what it is. - **Framework:** Next.js (React) — one application, not separate public/member/admin codebases. Gate `/admin` and the member portal by role rather than standing up a second app. - **Auth + database:** Supabase (Postgres, Auth, Storage, Row-Level Security) — RLS is a good fit for member-vs-admin data access without hand-rolling authorization everywhere. Keep roles simple to start: `member`, `admin`. Don't build out granular permission tiers (merch-admin vs. board-admin, etc.) unless asked — it's easy to add later and not worth the complexity now. - **Payments/subscriptions:** Stripe (Billing for memberships/subscriptions, Payment Element/Elements for checkout) — build custom branded UI on top of Stripe's APIs rather than dropping users into Stripe's generic hosted Customer Portal for payment-method/subscription management; the generic portal would undercut the design bar this brief is asking for. Stripe also solves PCI scope and gives you real order/invoice history for free. - **Commerce:** custom product/order model in the database (Section 8.3), processed through Stripe — don't introduce a second commerce platform dependency (e.g., Shopify) on top of what's already being built. - **Email:** a provider that handles both transactional (order receipts, password reset) and audience/broadcast sends with segmentation (Section 8.4) — Resend is a reasonable default given the rest of this stack. - **Media/gallery storage:** Supabase Storage (or equivalent object storage) with responsive/lazy-loaded delivery for the photo gallery. - **Hosting:** Vercel. --- ## 10. Quality bar / acceptance criteria ### Design - Fluid type (`clamp()`), not fixed breakpoint font sizes - Respect `prefers-reduced-motion` everywhere motion is used — provide a real reduced variant, don't just disable one animation and call it done - Respect `prefers-color-scheme` if dark mode is part of the direction; if it is, both modes need full design attention, not an auto-inverted afterthought - Real photography from actual tailgates/events where possible over stock imagery or generic illustration — this community's whole identity is specific, real people and places - **This audience is not just tech-savvy 20-somethings.** Membership is explicitly family-friendly, spans age ranges, and includes kids. (One of the rejected brutalist concepts explicitly admitted its own aesthetic "may seem broken" to users over 45 — that is disqualifying for this club, not an acceptable trade-off.) Distinctive and bold is the goal; alienating is not. ### Engineering / interaction (non-exhaustive — apply the full Web Interface Guidelines where relevant) - Icon-only buttons need `aria-label`; decorative icons need `aria-hidden`; no emoji used as functional icons - Every interactive element has a visible focus state (`:focus-visible`) — never `outline: none` without a replacement - Forms: real `