# Chicago Stepping Design System ("IN THE POCKET" / Chrome Noir)

A bespoke visual system for the **Chicago Stepping** app. Built from first

principles, grounded in Chicago-stepping culture: the smooth, gliding, soulful

6-/8-count partner dance that came out of Chicago's West and South sides in the

1940s-60s, evolved from the jitterbug and the 1950s glide-and-stride "bop." It

deliberately does NOT use the `ui-ux-pro-max` skill or any generic

component-kit look.

Updated 2026-07-04 to match Dad's July 2nd decisions (`JULY2ND_SPEC.md`, D1-D10)

and the shipped Chrome Noir code. This file describes what is actually in

`apps/web`, not an aspiration.

## Locked identity decisions (Dad, July 2nd)

- **No disco ball.** The old chrome disco ball hero (WebGL) sent a conflicted

  message (disco vs. stepping) and is deleted: components, canvas fallback,

  PNG, everything. Do not bring it back.

- **Signature emblem: the stepping couple.** An abstract line-art couple

  mid-turn; she glides under his raised arm, gown fanning into the sweep, a

  cobalt dot marking the held hands. Lives in

  `apps/web/src/components/stepping-couple.tsx`, mirrored in `public/icon.svg`

  and the manifest. Pure SVG + CSS, no WebGL, gated on

  `prefers-reduced-motion`.

- **Wordmark: CHICAGO STEPPING.** Serif italic "Chicago" over display

  "STEPPING" (`apps/web/src/components/wordmark.tsx`). The name leads with

  Chicago Stepping everywhere; final clever phrasing subject to a family vote.

- **Tagline LOCKED: "Chicago Stepping. Your City."** Appears in the hero and

  footers verbatim.

- **Voice: grown-up, concise, straight to the point.** No fluff, no slang-cute

  filler. Section names The Sets / The Floor / The Road are approved and stay.

- **Professional bar: Apple / BlackRock / Fidelity.** Color can pop but never

  goes cheesy.

- **Readability is a requirement, not a preference.** The audience skews

  older. Kickers stay at or above 0.8rem, body copy at or above 1rem, strong

  contrast. Never shrink type to make a layout work.

## Sourcing (provenance, so this stays defensible and original)

- **Design DNA** distilled from Zion's references: monolithstudio.com,

  airborne.studio, donprod.uk, ning-h.com, tenbinlabs.xyz, wildyriftian.com,

  oscarpecher.com. Common laws we adopt: two-tone discipline, near-black

  ground / off-white ink (never pure #000/#fff), type-as-art, mono micro-type

  for metadata, one signature object, negative space as luxury.

- **Technique** lifted only from MIT/CC0 repos (security-scanned):

  `studio-freight/lenis` (MIT) for smooth scroll. No-license references are

  reimplemented from scratch, never copied.

## Concept spine: IN THE POCKET

The site runs like a set that never stops. Chicago stepping is a glide, not a

stomp: lead and follow on a 6-/8-count, locked into the music. The page is a

run of acts:

1. **THE SPOTLIGHT**: the hero. Type-as-art (STEP. GLIDE. spin.), the couple

   emblem, the locked tagline.

2. **THE SETS**: sets, weekenders, classes, workshops, competitions, socials.

3. **THE FLOOR**: stepping groups, DJs, promoters/hosts, classes.

4. **THE ROAD**: per-city travel guide for the traveling stepper.

The old "THE NINE / Greek-letter" framing is gone entirely. This is Chicago

stepping, never Greek stepping.

## Color: Chrome Noir (two-tone + one cobalt accent)

| Token | Hex | Role |

|---|---|---|

| `--stage` | `#0a0a0b` | ground (near-black, the floor after dark) |

| `--bone` | `#f4f1ea` | ink (warm off-white, never pure white) |

| `--gold` | `#3d5afe` | the ONE accent: electric cobalt (token keeps the legacy `--gold` name so every `text-gold`/`bg-gold` utility reskins from one place) |

| `--gold-bright` | `#6e86ff` | accent hover / active |

| `--ash` | `#9aa1b0` | cool grey for secondary mono metadata (lightened for contrast) |

| `--line` | `rgba(244,241,234,0.12)` | hairlines |

Discipline: no other hues. Cobalt pops but stays professional; if a treatment

reads cheesy, cut it.

## Type: smooth + editorial duality (lead and follow)

- **Display / impact:** `Bricolage Grotesque`, oversized, tight, declarative.

- **Editorial accent:** `Instrument Serif`, high-contrast serif for

  storytelling lines and the "Chicago" half of the wordmark.

- **Metadata:** `Space Mono` kickers for labels, indices, set times, city

  coordinates (`CHI · 41.878, -87.629`, `01 / 06`).

Rules:

- On any screen, either the display type is loud or the imagery is. Never both.

- Floors (older-people-friendly): `.kicker` >= 0.8rem, letter-spacing 0.22em;

  body/serif copy >= 1rem. Do not shrink anything below these.

## Motion: "in the pocket" (cheap on old phones)

- **Reveals:** `beat-in` staggered ease-ins on the count (b1-b5 delays).

- **Emblem:** entrance stagger (figures fade-rise, arms draw in, the held-hands

  dot pops), then a slow 9s float and 0.7deg sway. Transform/opacity only; no

  WebGL anywhere (the disco ball lagged and is gone).

- **Smooth scroll:** Lenis (MIT) via `SmoothScroll`.

- **Marquee:** mono ticker of cities and count motifs.

- **Reduced motion:** every animation gates on `prefers-reduced-motion`.

## Layout

Editorial and asymmetric. Generous negative space. Numbered mono indices

(`01 / Sets`). Hairline rules frame each act. Mobile-first; the set reflows to

a single column without losing the count.

## Components (current set)

- `SteppingCouple`: the signature emblem (hero + site mark).

- `Wordmark`: CHICAGO STEPPING lockup (header, footers, mobile nav).

- `SmoothScroll`: Lenis provider.

- `Marquee`: running mono ticker.

- `MobileNav`, `SiteFooter`, skeletons.

- Act section shell: mono kicker + huge display title + content.