Cutroom owner's guide

# Cutroom theme guide

Cutroom is a media operations frontend for **Northline Pictures**, a small studio producing the fictional *Afterlight* anthology. It is a frontend template with realistic fixtures. It does not include storage, transcoding, streaming, auth, billing, analytics ingestion, or persistence.

The premium workflow pass makes five operational screens one traceable lifecycle. `mediaHref` and `getMediaItem` preserve asset identity from library and title entry into review; the player uses one clock for transport, waveform, and timecodes; ingest rejects unsupported or oversized local files without silent truncation; distribution separates rendition readiness from the central release gate; and studio access validates invitations and confirms removal. These remain browser-only fixtures.

## Identity

- **Positioning:** one review-to-release workspace for independent media teams.
- **Signature:** the continuous filmstrip recurs in the library, review timeline, and sequence builder.
- **Deviation:** `/title` drops the application rail and lets the player bleed to the viewport edge, creating a credible public title page inside the console system.
- **Register:** technical-plain in application screens; editorial on the title page.
- **Motion:** editorial-cut. Feedback is 140ms, state change is 240ms, **a close is 150ms**, and the playhead is the sole ambient animation *on a settled screen*. Reduced motion stops it. Opening carries the distance, the pre-scale (modal .96, menu .97, tooltip .98) and — only on surfaces narrower than a menu — a 2px blur; leaving drops all three and never bounces. Loading placeholders and a busy button may pulse or spin on opacity while data is pending; nothing else loops.
- **Display:** Red Hat Mono turns titles and timecode into one editorial-machine register.
- **Text:** Schibsted Grotesk keeps dense controls and comments easy to scan.
- **Mono:** Red Hat Mono carries timecode, IDs, durations, and stacked figures.
- **Type ratio:** 1.125, the dashboard/operations ladder.

## Color rules

- Light surfaces are achromatic white and gray. Dark surfaces are black and charcoal.
- Light-mode controls and links use near-black graphite. Chartreuse is reserved for dark-mode action and media overlays. An action that sits on a still or on `--scrim` takes `Button`/`ButtonLink` `variant="media"` (the `--media-primary` tokens, hover and active included), never `primary`: in light mode `primary` is graphite, and graphite on a near-black frame is a black pill on black (the title hero and the overview live card shipped that way through 1.10.4).
- Lilac marks collaboration. Blue is information, green is success, amber is warning, and red is failure. Neutral charts do not borrow status colors.
- Brand ground is a state, not a rest. The upload dropzone at rest is a field (`--field-border` on `bg-muted`, hover raises the edge to `--primary-border`), the same in both modes; `--primary-soft` under a `--primary` dash is the drag-over state only. Through 1.10.5 rest wore the brand pair, which in dark was 660×255px of olive under lime that read as a drag in progress.
- State colors always ship as text, soft, border, and foreground tokens. Status pills also include a dot or icon.
- A field is identified by its recessed `--field` ground and its label. `--field-border` is refinement and stays in the soft band (1.2–2.5:1 against every ground it meets); in dark it is quiet enough that the sidebar search reads as a dark well with no visible edge. Never raise it to 3:1 — that is the P-13 misreading. `--control-border` is the separate 3:1 token, and it is only for boundaries that identify on their own: the unfilled checkbox box and the switch track.
- The selected chip is a light step off the card with graphite ink, never an inversion of it. `--selection` was a near-black `#303030` through 1.10.3 — the same hex as `--primary-hover` — and because `--ring` is the same graphite the focus ring vanished inside it at 1.43:1. The fill carries the state quietly; `--selection-border` stays graphite and is what the focus ring paints over and past, so a focused selected row changes ~2px of `--selection` to `--ring` at 13.77:1. Do not darken the fill back, and do not soften the border: `theme.css` records what each of those two costs.
- Never use alpha color states. Use the declared hover, active, soft, and border tokens.
- The one translucent surface is the modal veil, `cutroom-overlay-veil`, which mixes `--scrim` to 78%. It is a non-text graphic under a `--card` panel: no foreground is ever composited against it, so it is not a color state and the rule above stands.
- Never add raw colors, palette utilities, bare shadows, or colored left-border cards.

## File map

- `src/app/` composes ten routes. Pages stay thin.
- `src/components/` contains one self-contained surface per file.