# Key City Theatre — BrandBoss Standards (AI Execution File)

> Machine-oriented brief. Follow every rule literally. Canonical JSON: http://localhost:8895/wp-content/uploads/brandboss/brand.json

**Tagline:** Where the East Kootenay Comes Together

## Mission
House lights dim, a red glow off the proscenium, the whole town in the seats. Bold poster-wall energy outside, warm shared-moment intimacy inside. The site should feel like a marquee: confident, graphic, unmissable.

## Color Palette

| Token | Name | Hex | Role | Usage |
|---|---|---|---|---|
| `--bsc-color-primary` | Primary | `#CE0E2D` | primary | Key City red. Primary CTA fill, hover fills, logo bar, focus ring, active tabs. |
| `--bsc-color-primary-deep` | Primary Deep | `#A30B24` | primary | Red hover/pressed state. |
| `--bsc-color-ink` | Ink | `#101114` | neutral | Theatre dark. Headings, dark sections (visit strip, footer, event cards), hero base. |
| `--bsc-color-ink-2` | Ink 2 | `#1A1B1F` | neutral | Raised dark surface (cards on dark). |
| `--bsc-color-cream` | Cream | `#F3EDE2` | neutral | Warm light section background (newsletter), light hover fill |
| `--bsc-color-line-cream` | Line Cream | `#D8D3C8` | neutral | Borders on light (tabs, inputs) |
| `--bsc-color-grey` | Grey | `#6B6B6B` | neutral | Muted body text on light |
| `--bsc-color-white` | White | `#FFFFFF` | neutral | Page background, text on dark/red |
| `--bsc-color-success` | Success | `#2E7D4F` | neutral | Confirmation |
| `--bsc-color-warning` | Warning | `#D9832E` | neutral | Attention |
| `--bsc-color-error` | Error | `#A30B24` | neutral | Errors, destructive |
| `--bsc-color-info` | Info | `#1F4E8C` | neutral | Neutral notices |

### WCAG Contrast (use only passing pairs for text)

| FG on BG | Ratio | AA text | AAA text | UI (3:1) |
|---|---|---|---|---|
| primary on primary-deep | 1.42:1 | ❌ | ❌ | ❌ |
| primary on ink | 3.35:1 | ❌ | ❌ | ✅ |
| primary on ink-2 | 3.05:1 | ❌ | ❌ | ✅ |
| primary on cream | 4.84:1 | ✅ | ❌ | ✅ |
| primary on line-cream | 3.78:1 | ❌ | ❌ | ✅ |
| primary on grey | 1.06:1 | ❌ | ❌ | ❌ |
| primary on white | 5.64:1 | ✅ | ❌ | ✅ |
| primary on success | 1.12:1 | ❌ | ❌ | ❌ |
| primary on warning | 1.94:1 | ❌ | ❌ | ❌ |
| primary on error | 1.42:1 | ❌ | ❌ | ❌ |
| primary on info | 1.47:1 | ❌ | ❌ | ❌ |
| primary-deep on primary | 1.42:1 | ❌ | ❌ | ❌ |
| primary-deep on ink | 2.37:1 | ❌ | ❌ | ❌ |
| primary-deep on ink-2 | 2.16:1 | ❌ | ❌ | ❌ |
| primary-deep on cream | 6.85:1 | ✅ | ❌ | ✅ |
| primary-deep on line-cream | 5.35:1 | ✅ | ❌ | ✅ |
| primary-deep on grey | 1.5:1 | ❌ | ❌ | ❌ |
| primary-deep on white | 7.98:1 | ✅ | ✅ | ✅ |
| primary-deep on success | 1.58:1 | ❌ | ❌ | ❌ |
| primary-deep on warning | 2.75:1 | ❌ | ❌ | ❌ |
| primary-deep on error | 1:1 | ❌ | ❌ | ❌ |
| primary-deep on info | 1.04:1 | ❌ | ❌ | ❌ |
| ink on primary | 3.35:1 | ❌ | ❌ | ✅ |
| ink on primary-deep | 2.37:1 | ❌ | ❌ | ❌ |
| ink on ink-2 | 1.1:1 | ❌ | ❌ | ❌ |
| ink on cream | 16.2:1 | ✅ | ✅ | ✅ |
| ink on line-cream | 12.65:1 | ✅ | ✅ | ✅ |
| ink on grey | 3.54:1 | ❌ | ❌ | ✅ |
| ink on white | 18.88:1 | ✅ | ✅ | ✅ |
| ink on success | 3.74:1 | ❌ | ❌ | ✅ |
| ink on warning | 6.51:1 | ✅ | ❌ | ✅ |
| ink on error | 2.37:1 | ❌ | ❌ | ❌ |
| ink on info | 2.27:1 | ❌ | ❌ | ❌ |
| ink-2 on primary | 3.05:1 | ❌ | ❌ | ✅ |
| ink-2 on primary-deep | 2.16:1 | ❌ | ❌ | ❌ |
| ink-2 on ink | 1.1:1 | ❌ | ❌ | ❌ |
| ink-2 on cream | 14.77:1 | ✅ | ✅ | ✅ |
| ink-2 on line-cream | 11.53:1 | ✅ | ✅ | ✅ |
| ink-2 on grey | 3.23:1 | ❌ | ❌ | ✅ |
| ink-2 on white | 17.21:1 | ✅ | ✅ | ✅ |
| ink-2 on success | 3.41:1 | ❌ | ❌ | ✅ |
| ink-2 on warning | 5.93:1 | ✅ | ❌ | ✅ |
| ink-2 on error | 2.16:1 | ❌ | ❌ | ❌ |
| ink-2 on info | 2.07:1 | ❌ | ❌ | ❌ |
| cream on primary | 4.84:1 | ✅ | ❌ | ✅ |
| cream on primary-deep | 6.85:1 | ✅ | ❌ | ✅ |
| cream on ink | 16.2:1 | ✅ | ✅ | ✅ |
| cream on ink-2 | 14.77:1 | ✅ | ✅ | ✅ |
| cream on line-cream | 1.28:1 | ❌ | ❌ | ❌ |
| cream on grey | 4.57:1 | ✅ | ❌ | ✅ |
| cream on white | 1.17:1 | ❌ | ❌ | ❌ |
| cream on success | 4.33:1 | ❌ | ❌ | ✅ |
| cream on warning | 2.49:1 | ❌ | ❌ | ❌ |
| cream on error | 6.85:1 | ✅ | ❌ | ✅ |
| cream on info | 7.13:1 | ✅ | ✅ | ✅ |
| line-cream on primary | 3.78:1 | ❌ | ❌ | ✅ |
| line-cream on primary-deep | 5.35:1 | ✅ | ❌ | ✅ |
| line-cream on ink | 12.65:1 | ✅ | ✅ | ✅ |
| line-cream on ink-2 | 11.53:1 | ✅ | ✅ | ✅ |
| line-cream on cream | 1.28:1 | ❌ | ❌ | ❌ |
| line-cream on grey | 3.57:1 | ❌ | ❌ | ✅ |
| line-cream on white | 1.49:1 | ❌ | ❌ | ❌ |
| line-cream on success | 3.38:1 | ❌ | ❌ | ✅ |
| line-cream on warning | 1.94:1 | ❌ | ❌ | ❌ |
| line-cream on error | 5.35:1 | ✅ | ❌ | ✅ |
| line-cream on info | 5.57:1 | ✅ | ❌ | ✅ |
| grey on primary | 1.06:1 | ❌ | ❌ | ❌ |
| grey on primary-deep | 1.5:1 | ❌ | ❌ | ❌ |
| grey on ink | 3.54:1 | ❌ | ❌ | ✅ |
| grey on ink-2 | 3.23:1 | ❌ | ❌ | ✅ |
| grey on cream | 4.57:1 | ✅ | ❌ | ✅ |
| grey on line-cream | 3.57:1 | ❌ | ❌ | ✅ |
| grey on white | 5.33:1 | ✅ | ❌ | ✅ |
| grey on success | 1.06:1 | ❌ | ❌ | ❌ |
| grey on warning | 1.84:1 | ❌ | ❌ | ❌ |
| grey on error | 1.5:1 | ❌ | ❌ | ❌ |
| grey on info | 1.56:1 | ❌ | ❌ | ❌ |
| white on primary | 5.64:1 | ✅ | ❌ | ✅ |
| white on primary-deep | 7.98:1 | ✅ | ✅ | ✅ |
| white on ink | 18.88:1 | ✅ | ✅ | ✅ |
| white on ink-2 | 17.21:1 | ✅ | ✅ | ✅ |
| white on cream | 1.17:1 | ❌ | ❌ | ❌ |
| white on line-cream | 1.49:1 | ❌ | ❌ | ❌ |
| white on grey | 5.33:1 | ✅ | ❌ | ✅ |
| white on success | 5.05:1 | ✅ | ❌ | ✅ |
| white on warning | 2.9:1 | ❌ | ❌ | ❌ |
| white on error | 7.98:1 | ✅ | ✅ | ✅ |
| white on info | 8.31:1 | ✅ | ✅ | ✅ |
| success on primary | 1.12:1 | ❌ | ❌ | ❌ |
| success on primary-deep | 1.58:1 | ❌ | ❌ | ❌ |
| success on ink | 3.74:1 | ❌ | ❌ | ✅ |
| success on ink-2 | 3.41:1 | ❌ | ❌ | ✅ |
| success on cream | 4.33:1 | ❌ | ❌ | ✅ |
| success on line-cream | 3.38:1 | ❌ | ❌ | ✅ |
| success on grey | 1.06:1 | ❌ | ❌ | ❌ |
| success on white | 5.05:1 | ✅ | ❌ | ✅ |
| success on warning | 1.74:1 | ❌ | ❌ | ❌ |
| success on error | 1.58:1 | ❌ | ❌ | ❌ |
| success on info | 1.65:1 | ❌ | ❌ | ❌ |
| warning on primary | 1.94:1 | ❌ | ❌ | ❌ |
| warning on primary-deep | 2.75:1 | ❌ | ❌ | ❌ |
| warning on ink | 6.51:1 | ✅ | ❌ | ✅ |
| warning on ink-2 | 5.93:1 | ✅ | ❌ | ✅ |
| warning on cream | 2.49:1 | ❌ | ❌ | ❌ |
| warning on line-cream | 1.94:1 | ❌ | ❌ | ❌ |
| warning on grey | 1.84:1 | ❌ | ❌ | ❌ |
| warning on white | 2.9:1 | ❌ | ❌ | ❌ |
| warning on success | 1.74:1 | ❌ | ❌ | ❌ |
| warning on error | 2.75:1 | ❌ | ❌ | ❌ |
| warning on info | 2.86:1 | ❌ | ❌ | ❌ |
| error on primary | 1.42:1 | ❌ | ❌ | ❌ |
| error on primary-deep | 1:1 | ❌ | ❌ | ❌ |
| error on ink | 2.37:1 | ❌ | ❌ | ❌ |
| error on ink-2 | 2.16:1 | ❌ | ❌ | ❌ |
| error on cream | 6.85:1 | ✅ | ❌ | ✅ |
| error on line-cream | 5.35:1 | ✅ | ❌ | ✅ |
| error on grey | 1.5:1 | ❌ | ❌ | ❌ |
| error on white | 7.98:1 | ✅ | ✅ | ✅ |
| error on success | 1.58:1 | ❌ | ❌ | ❌ |
| error on warning | 2.75:1 | ❌ | ❌ | ❌ |
| error on info | 1.04:1 | ❌ | ❌ | ❌ |
| info on primary | 1.47:1 | ❌ | ❌ | ❌ |
| info on primary-deep | 1.04:1 | ❌ | ❌ | ❌ |
| info on ink | 2.27:1 | ❌ | ❌ | ❌ |
| info on ink-2 | 2.07:1 | ❌ | ❌ | ❌ |
| info on cream | 7.13:1 | ✅ | ✅ | ✅ |
| info on line-cream | 5.57:1 | ✅ | ❌ | ✅ |
| info on grey | 1.56:1 | ❌ | ❌ | ❌ |
| info on white | 8.31:1 | ✅ | ✅ | ✅ |
| info on success | 1.65:1 | ❌ | ❌ | ❌ |
| info on warning | 2.86:1 | ❌ | ❌ | ❌ |
| info on error | 1.04:1 | ❌ | ❌ | ❌ |

## Typography

- **Heading:** Helvetica Condensed Bold (fallback: 'HelveticaNeue-CondensedBold', 'Helvetica Neue Condensed Bold', 'Arial Narrow', sans-serif) — weights: 700 — source: system
- **Body:** Work Sans (fallback: 'Helvetica Neue', Arial, sans-serif) — weights: 300, 400, 500, 600, 700 — source: Google Fonts

Scale: base 16px, ratio 1.25. Resolved sizes:
- caption: 12.8px (`--bsc-font-caption`)
- body: 16px (`--bsc-font-body`)
- h6: 20px (`--bsc-font-h6`)
- h5: 20px (`--bsc-font-h5`)
- h4: 25px (`--bsc-font-h4`)
- h3: 31.3px (`--bsc-font-h3`)
- h2: 39.1px (`--bsc-font-h2`)
- h1: 48.8px (`--bsc-font-h1`)

Line heights — headings: 0.95, body: 1.5.

Body max 44ch in cards, 65ch in prose.

## Spacing

Base unit: 4px. Scale (px): 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96, 128. Tokens: `--bsc-space-1` … `--bsc-space-12`. Use ONLY these values for margins, padding, and gaps.

## Grid & Layout

- Grid: 12 columns, 24px gutters
- Page margins: clamp(24px, 5vw, 96px) — max content width: 1360px
- Body max 44ch in cards, 65ch in prose.
- committed — near-black ink sections carry the theatre-dark drama; signature red is the single loud accent (CTAs, hovers, logo bar); cream warms the in-between strips. Posters supply the colour variety, the chrome stays disciplined.

Allowed image aspect ratios: 16:9 wide crop, 1:1 display crop (native poster behind), 2:1 card, min-height 340px

## Logo System


### Logo — DO
- Red vertical bar (6px) left of three-line condensed uppercase 'KEY / CITY / THEATRE' stack, 'CRANBROOK, BC' letter-spaced beneath.
- Height of one wordmark line on all sides.
- Dark ink text on white/light; white text version on ink sections. Red bar constant in both.
- Approved version: Ink text + red bar (light backgrounds)
- Approved version: White text + red bar (dark backgrounds)
- Minimum digital width: 90px
- Minimum print width: 0.9in

### Logo — DO NOT
- Do not recolor the bar
- Do not set the wordmark in a non-condensed face
- Do not stretch/skew
- Do not add effects
- Do not run the stack horizontal

## Imagery



Treatments: Text over photos sits on an overlay at >=4.5:1. Feature cards may tint the overlay with the feature accent colour.

**Imagery — DO**
- Official show posters at native aspect, uncropped focal art
- The venue: marquee, lobby, auditorium, gallery wall
- Audiences reacting (releases for identifiable faces)
- Performers on the Key City stage (with artist approval)
- Community festivals: kids' festival, Ed Fest street scenes

**Imagery — DO NOT**
- AI-generated performers/audiences presented as real
- Generic red-curtain clip-art theatre stock
- Cold grading, heavy HDR, watermarks, comps
- Cropping a poster so its title/art is unreadable
- Stretched or upscaled low-res posters

## Voice & Tone

Voice attributes: bold, welcoming, community-proud, theatrical

Confident marquee voice: short declarative lines, warm community pride, zero corporate filler.

- ✅ Say: "Lead with the show and the date"
- ❌ Not: "Arts-speak jargon (transformative experiences)"

- ✅ Say: "Speak as 'your theatre'"
- ❌ Not: "Vague hype without a date and a ticket link"

- ✅ Say: "Name the region: Cranbrook, East Kootenay, Ktunaxa territory acknowledgement"
- ❌ Not: "No em dashes"

## Application Rules (non-negotiable execution constraints)

These rules govern HOW the tokens above are applied. They are part of the standard.

### Color budgets
| Layer | Share of any composition |
|---|---|
| Neutrals (bg, surface, ink, muted, border) | 70–90% |
| Accent (one only) | 5–10%, max 2 visible uses per screen |
| Semantic (success/warning/danger) | 0–5%, never decorative |
| Effects (gradients/glows) | <1% |

### Contrast gates (WCAG 2.2 AA working ceiling)
| Pair | Minimum |
|---|---|
| Body text on background | 4.5:1 |
| Large text (≥18px / bold ≥14px) | 3:1 |
| UI components vs adjacent surfaces | 3:1 |
| Placeholder text | 4.5:1 |

### Letter-spacing
| Context | Tracking |
|---|---|
| Body 14–18px | 0 |
| Small 11–13px | +0.01 to +0.02em |
| UI labels / buttons | +0.02em |
| ALL CAPS | +0.06 to +0.1em (required) |
| Headings ≥32px | −0.01 to −0.02em |
| Display ≥48px | −0.02 to −0.03em (floor −0.04em) |

### Line height
| Text | Leading |
|---|---|
| Display / H1 | 1.0–1.2 |
| Body | 1.5–1.6 (+0.05–0.1 on dark) |
| Small ≤14px | 1.5 |

### Hard bans
Gradient text · colored side-stripe borders · decorative glassmorphism · pure #000 or #fff surfaces · off-scale spacing values · text below 4.5:1 · more than one accent color · second accent invention · stretching/recoloring/effects on the logo.

---
Generated 2026-07-17 10:22:19 by BrandBoss. Tokens stylesheet: http://localhost:8895/wp-content/uploads/brandboss/tokens.css