# Marquee — the OlloVue scene style

A marquee is the lit sign outside a venue: one message, big letters, lights. That is
what a TV scene on OlloVue should feel like. Not a web page on a television, not a
poster with instructions on it. The thing the scene is *about* is the scene.

The jukebox, shout-outs, reviews and birthdays scenes are the reference. If a new
scene would look at home next to them, it is Marquee.

## The rules

Every rule is checkable. A scene passes when all seven hold.

1. **Content is the hero.** The newest or most important real item — a song, a
   message, a review, a name, a game, a score — is the biggest thing on screen. A
   scene never shows instructions *instead of* its content. If it has nothing to
   show, see rule 6.
2. **One thing at a time, huge.** One hero item, 6–9vmin type, weight 800, tight
   letter-spacing (−.03em), balanced line breaks. Rotate through items over time
   (8–10s each, with a thin time bar) rather than shrinking them to fit at once.
3. **Ink, not slabs.** Background is near-black ink (`#0b0b0f`), never a flat grey
   panel. Depth comes from light: a soft brand-accent glow that breathes, or — when
   the item has a photo or artwork — that image blown out, blurred (60–70px),
   darkened to ~.36, as the whole background.
4. **The accent eyebrow.** A small uppercase label in the brand accent, letter-
   spaced (.34–.4em), 1.5–1.6vmin, above the hero, often with a pulsing dot. It
   names the scene ("SHOUT-OUTS", "NOW SERVING", "HOUSE BETS") and is the only
   place the scene's name appears.
5. **The QR has a home.** Every scene a guest can act on carries a QR — small,
   9–11vmin, white with 1vmin radius, next to a bold verb and a one-line promise
   ("Send a shout-out · it lands right here"). Two placements only: a right-hand
   rail (`border-left:1px solid` line, 32% wide) when the scene has a list worth
   showing, or a glass card bottom-centre (`rgba(255,255,255,.06)` + blur) when
   the message deserves the whole screen. Never a giant QR as the hero.
6. **Empty means invitation, not apology.** With nothing to show, the scene turns
   into an invitation in the same voice — a headline with one accented word, a
   warm sentence, a slightly larger QR — never "no data", "coming soon", or a
   settings nag. The venue's logo may lead the invitation.
7. **It fits any tile.** Everything sized in vmin; under a square aspect
   (`@media (max-aspect-ratio:1/1)`) the rail collapses to one column and type
   steps up. `prefers-reduced-motion` stops the glow and entrances. Copy is
   tenant-neutral — a scene serves every venue on the fleet, so no venue names,
   handles or in-jokes baked into the page; read `/tenant` for the logo and name.

## Type, colour, motion

- Type: the system stack (`-apple-system, "Segoe UI", Roboto, …`). Hero 800.
  Eyebrow 800 caps. Secondary text `rgba(255,255,255,.62)`, faint `.34`.
- Colour: ink `#0b0b0f`; accent `var(--brand-accent)` (fallback `#F39200`);
  secondary `var(--brand-secondary)` for gradients (the birthday name); star gold
  `#FBBF24` only for ratings; success/danger only for live status.
- Motion: entrances rise 2.4vmin over .6s `cubic-bezier(.2,.9,.3,1)`; glows drift
  9–14s; nothing loops faster than a breath. Time bars are the only always-moving
  element.

## Audit, 2026-09-05

| Scene | Verdict | Why |
|---|---|---|
| jukebox-tv, shout-qr, reviews-tv, birthday-tv | **Marquee** | the reference set |
| bets-tv, queue-tv, news-tv | **Marquee** | eyebrow, big hero, QR homed |
| sports, pickup, sponsor, pad-menu, weather-tv | own idiom, fine | data board / full-bleed creative / menu hero — leave |
| announce | **rebuild** | logo + one word on a slab |
| loyalty | **rebuild** | a web page on a TV |
| events-tv, events-lineup | **rebuild** | empty state is a line of text on black |
| social-card | **rebuild** | centred poster, venue-specific copy baked in |
| calendar-tv | **rebuild** | empty state is a settings nag |
| bingo-tv, waitlist-tv | empty state only | live states are fine; the QR on bingo is nearly invisible |
| order-qr | light touch | purpose-built; give the QR its glass card |

## How to check a new scene

Render it at 1920×1080 and at a 1:1 tile, in its full state and its empty state.
Put the four renders next to the jukebox. Then go down the seven rules. The
`/scene-preview` route and the roku-renderer's `/shot` do the rendering; the
assistant's `design_tv_scene` brief cites this file, and App Store review uses it.