# Direction 11: Carolina Noise

## The idea

Southbound & Crown already makes the material this direction needs: crests, stickers, scarves, flags, Carolina shapes, tailgate signs, matchday lists, and one-off supporter art. Carolina Noise treats the site as a living matchday poster assembled from that archive.

The result is deliberately different from both finalists:

- Wayfinding owns night, distance, and interstate signs.
- Scarves Up owns daylight, knitwear, and the terrace gesture.
- Carolina Noise owns the block party: screenprinted color, supporter ephemera, loud typography, and the useful information pinned over it.

The page does not imitate a generic pro-club news site. It feels like SBC because the Carolina-shaped 2025 sticker, the Rock Hill origin, the Royal Family Tailgate Lot, the Atlanta bus, game nights, rec soccer, and both supported clubs create the composition.

## Design plan

### Palette

| Token | Value | Job |
|---|---:|---|
| SBC navy | `#061D33` | Text, dark fields, board-console rail |
| Charlotte blue | `#1A85C8` | Primary supporter color and Charlotte context |
| Process-blue tint | `#64C7EF` | Large color fields and utility highlights |
| Triumph gold | `#F4C25E` | Greenville context, membership, calls to action |
| Sticker red | `#C8203A` | Campaign accent taken from SBC’s 2025 Carolina sticker |
| Cool paper | `#F4FAFF` | Main daylight field |
| Triumph slate | `#48536D` | Body copy and quiet metadata |

Red is not an invented brand claim. It comes from the supplied `SBC 2025 Sticker Final-01.png` and is used as a campaign accent. Burnt orange remains absent.

### Type

- `Anybody` variable display: poster headlines move between compressed and expanded widths. Large words are content, not background texture.
- `Familjen Grotesk`: plainspoken body copy with enough personality to sit beside the display face.
- `IBM Plex Mono`: coordinates, labels, filters, status metadata, table headings, and prices.

None of the brief’s fatigue faces appear: no Inter, Poppins, Space Grotesk, or Playfair Display.

### Layout

Homepage:

```text
┌──────────────────────── floating SBC navigation ────────────────────────┐
│  THE CAROLINAS / SHOW UP / LOUD.     [living Carolina sticker poster]  │
│  direct welcome + CTA                [two-club registration strip]     │
├──────────────────────── matchday ticker ───────────────────────────────┤
│  Origin manifesto                         circular Carolina stamp       │
├─────────────────────────────────────────────────────────────────────────┤
│  Saturday as a 4-stop procession: lot / food / games / march           │
├─────────────────────────────────────────────────────────────────────────┤
│  One-group explanation              [Charlotte | Greenville selector]  │
├──────────────────── irregular supporter ephemera wall ─────────────────┤
│  membership posters / system-proof preview / oversized closing invite  │
└─────────────────────────────────────────────────────────────────────────┘
```

Dense utility proof:

```text
┌──── Board rail ────┬──────────────── top utility bar ──────────────────┐
│ active section     │ MEMBERS                                  + ADD   │
│ full tool map      │ [4 roster measures across a shared ledger]       │
│ member identity    │ search / chapter / status filters                │
│                    │ semantic table / bulk state / editor dialog      │
└────────────────────┴───────────────────────────────────────────────────┘
```

### Signature element

The hero’s tilted Carolina poster is the one-off visual. It uses the supplied 2025 SBC sticker, registration marks, club-city codes, a hand-built burst, halftone texture, and restrained pointer depth. It reads as supporter-made material pinned into a real system, not an isolated logo floating over a gradient.

## Supplied artifacts used

Original files remain untouched in `/Users/chrishowe/Developer/Working`. Web copies live in `carolina-noise-assets/`.

- `SBC 2025 Sticker Final-01.png` becomes the geographic hero mark.
- `SBC Crest.png` becomes the primary navigation and closing crest.
- `SBC Retro Crest Colors 2024.png` becomes an alternate archive mark in the ephemera wall.
- `SBC OG swoosh 2024.png` becomes a wide supporter-art specimen.

The official BM/HU art is never cropped into a new logo and no club mark is redrawn.

## Interaction and motion

- The hero poster and burst respond to fine-pointer movement through `transform` only.
- Section reveals use `IntersectionObserver`; content stays visible without JavaScript.
- The two-club selector is a real ARIA tab interface with arrow-key, Home, and End navigation.
- The mobile menu manages focus, `inert`, Escape, and scroll containment.
- The board-console proof includes working search, chapter/status filters, row selection, bulk state, CSV export, add/edit dialog, validation, and sample-row updates.
- Every animation turns off under `prefers-reduced-motion`.

## Award-site calibration

The research was used for principles rather than copied layouts:

- [FANBASE by Freytag Anderson](https://www.freytaganderson.com/fanbase): one identity system moving between fan culture, app UI, signage, and physical material.
- [Watford FC UX Awards case study](https://userexperienceawards.com/2017-submissions/watford-football-club-website/): bold motion used selectively and the fan’s matchday needs kept central.
- [Aston Villa US identity by Explorers Club](https://explorers-club.studio/works/aston-villa/): heritage source material translated into a flexible motion toolkit.

## Forbidden-pattern audit

| Forbidden pattern from the master brief | Carolina Noise response |
|---|---|
| Dominant burnt orange | Absent. Palette comes from verified club colors plus SBC’s red sticker artwork. |
| Rounded pill plus emoji eyebrow | Absent. Labels are flat mono registration text. |
| Gradient-wash hero | Absent. The hero uses solid ink fields, halftone dots, hard rules, and a physical poster composition. |
| Mid-sentence color highlight | Absent. Color assigns layers and objects, not arbitrary words. |
| Full-bleed centered CTA band | Absent. Conversion appears inside membership posters and the closing composition. |
| Giant faded ghost text | Absent from content sections. Large outline numerals at the edges function as section-registration furniture and do not duplicate the headline. |
| Diagonal tagline ribbon | Absent. The only moving band is an activity ticker with factual SBC content. |
| Uniform thick black boxes | Absent. Borders concentrate on poster objects and the dense workspace; typography and color fields carry other sections. |
| Inter, Poppins, Space Grotesk, Playfair | Absent. |
| Three generic feature cards | Absent. Programs appear as an irregular ephemera wall with bespoke diagrams. |
| Fabricated statistics or citations | Absent. Utility counts and member rows are clearly labeled sample data. Organization facts and prices come from the project brief and Chris’s confirmed membership details. |
| Generic dark plus acid accent | Absent. Navy is one surface in a multi-color print palette, not the entire identity. |
| Warm cream plus terracotta | Absent. The paper is cool blue-white and terracotta does not appear. |
| Broadsheet editorial layout | Absent. The composition behaves like supporter posters and a board-console workspace. |

## Accessibility and performance choices

- Semantic landmarks, heading order, a skip link, visible focus, explicit image dimensions, and meaningful alt text.
- Minimum 44px targets for primary controls and mobile navigation.
- No `transition: all`, scroll-driven layout reads, or animated layout properties.
- Below-fold marks lazy-load. The hero artwork gets high fetch priority.
- Member filters use real labels, correct input types, autocomplete guidance, and a semantic table.
- Destructive actions do not appear in this concept proof.
- The member table keeps its semantic structure and becomes a keyboard-scrollable region on narrow screens.

## Files

- `sbc10.html`: public homepage concept.
- `sbc10-members.html`: dense utility-screen proof.
- `carolina-noise.css`: shared tokens, public composition, and utility components.
- `carolina-noise.js`: public navigation, reveal, parallax, and club tabs.
- `carolina-noise-members.js`: filters, selection, export, dialog, and sample edits.
- `carolina-noise-assets/`: web copies of supplied SBC artwork.