---
version: alpha
name: Midnight Reel
description: A repertory cinema at closing time. Black, one warm metal, an oxblood for danger, and a serif that has seen some things.
meta:
  id: "theme-midnight-reel"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-09-01T19:34:32+09:00"
  updatedAt: "2026-09-02T16:52:37+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: One warm metal on black. Everything else is the absence of light.
  bestFor: Film and music catalogues, ticketing, hospitality, luxury editorial, membership sites
  avoidFor: Data-heavy admin, developer tools, anything with a lot of forms
  defaultMode: dark
  surfaceStyle: ruled
  accentUse: text
  caseStyle: none
  borderWidth: 1px
  imageTreatment: duotone
  motion:
    intensity: 3
    duration: 260ms
    ease: "cubic-bezier(0.33, 1, 0.68, 1)"
    signature: "Long, slow cross-fades. Nothing appears; things become visible."
  displayFont: Playfair Display
  displayKind: serif
  bodyFont: Lora
  monoFont: IBM Plex Mono
colors:
  background: "#F7F3EF"
  foreground: "#2F2621"
  card: "#EEE8E4"
  card-foreground: "#2F2621"
  popover: "#EEE8E4"
  popover-foreground: "#2F2621"
  primary: "#93690D"
  primary-foreground: "#FEF9F5"
  secondary: "#E4DDD8"
  secondary-foreground: "#2F2621"
  muted: "#E4DDD8"
  muted-foreground: "#6D5E58"
  accent: "#8D182C"
  accent-foreground: "#FEF9F5"
  destructive: "#B6322D"
  destructive-foreground: "#FEF9F5"
  border: "#D1CBC6"
  input: "#D1CBC6"
  ring: "#93690D"
  chart-1: "#906A22"
  chart-2: "#A18047"
  chart-3: "#705626"
  chart-4: "#B29B74"
  chart-5: "#554529"
colorsDark:
  background: "#110A07"
  foreground: "#DCD0CC"
  card: "#1A1310"
  card-foreground: "#DCD0CC"
  popover: "#1A1310"
  popover-foreground: "#DCD0CC"
  primary: "#E1AF4A"
  primary-foreground: "#150A06"
  secondary: "#271C18"
  secondary-foreground: "#DCD0CC"
  muted: "#271C18"
  muted-foreground: "#92847F"
  accent: "#D55661"
  accent-foreground: "#150A06"
  destructive: "#FF968A"
  destructive-foreground: "#150A06"
  border: "#342A26"
  input: "#342A26"
  ring: "#E1AF4A"
  chart-1: "#C99D45"
  chart-2: "#A88339"
  chart-3: "#DAB97C"
  chart-4: "#866E3F"
  chart-5: "#E4CEA8"
typography:
  display-lg:
    fontFamily: Playfair Display
    fontSize: 54px
    fontWeight: 500
    lineHeight: 1.02
    letterSpacing: -0.01em
  headline-lg:
    fontFamily: Playfair Display
    fontSize: 33px
    fontWeight: 600
    lineHeight: 1.12
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Playfair Display
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Lora
    fontSize: 18.5px
    fontWeight: 400
    lineHeight: 1.62
  body-md:
    fontFamily: Lora
    fontSize: 16.5px
    fontWeight: 400
    lineHeight: 1.58
  body-sm:
    fontFamily: Lora
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label-caps:
    fontFamily: Lora
    fontSize: 10.5px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.18em
  label-mono:
    fontFamily: IBM Plex Mono
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
  numeral-xl:
    fontFamily: IBM Plex Mono
    fontSize: 38px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.03em
rounded:
  none: 0px
  sm: 0px
  md: 0px
  lg: 0px
  xl: 0px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 32px
  xl: 72px
  gutter: 28px
  margin: 40px
  measure: 66ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.none}"
    padding: 13px
  button-secondary:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.none}"
    padding: 13px
  card-article:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: 22px
  badge-label:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.sm}"
---

# Midnight Reel

## Overview

Midnight Reel is a programme, not an app. The ground is a warm near-black, the
type is a high-contrast serif, and the only colour is a brass that behaves like
lamplight falling on something. Images are duotoned into the same two-colour
world so a still from a 1974 thriller and a photograph taken last week look like
they belong to the same season.

Everything is separated by hairlines. There are no cards, no shadows and no
fills — a "panel" here is a region between two rules. That restraint is what
lets a single brass word carry an entire screen.

Personality: nocturnal, unhurried, slightly grand. Never neon, never playful.

## Colors

Black, brass, oxblood. Three colours, no fourth.

- **Ground (#110A07):** Warm near-black. Slightly brown, never blue.
- **Primary (#E1AF4A):** Brass. Titles that link, the current screening, the
  underline that appears on hover. This is the only bright thing in the system.
- **Accent (#D55661 in dark):** Oxblood. Sold out, cancelled, last night of a
  run. It is a warning colour that still belongs to the palette.
- **Ink (#DCD0CC):** Warm bone, not white. Pure white on this ground reads as a
  bug.
- Charts are monochrome — one hue at five lightnesses. A programme has one kind
  of quantity: seats.

Light mode is the same programme printed: a warm near-white sheet, the brass
darkened to hold on paper, the oxblood deepened to a wine.

## Typography

Playfair Display for everything that is a name, Lora for everything that is a
sentence, IBM Plex Mono for times and durations.

- **Display:** Playfair at 54px, weight 500, almost no negative tracking. High
  stroke contrast is the point; do not use it below 22px, where it falls apart.
- **Body:** Lora at 16.5-18.5px with a 1.62 line height and a 66ch measure.
  Copy here is meant to be read, not scanned.
- **Labels:** sentence case. Nothing in this theme is uppercase — an uppercase
  label would sound like an announcement in a room where people are watching
  something.
- **Times and runtimes:** IBM Plex Mono, always, so a schedule column aligns.

## Layout

A 12-column grid at 1240px with 28px gutters and a generous 40px margin. Long
text sits in columns 3-9; images break out to the full 12 and bleed off the
right edge whenever the content allows.

Vertical rhythm is 8px, and section spacing is deliberately large — 72px between
programme sections. The white space is the theatre.

## Elevation & Depth

No shadows and no fills. Depth is a hairline rule and a change of tone in the
ink. A "raised" element is one whose text is bone instead of muted bone. Modals
are the single exception: they darken everything behind them to near-total black
rather than blurring it.

## Shapes

Zero radius on everything, including the images. Rules are 1px and full-bleed
wherever they can be. The brass underline under a link draws from left to right
over 260ms and is 1px — never a highlight, never a background.

Images are duotoned to black and brass and cropped tall.

## Components

- **Buttons:** no fill. A brass 1px outline with brass text; on hover the fill
  becomes brass and the text becomes the ground. Zero radius, 13px padding.
- **Programme rows:** a ruled row with the title in Playfair, the time in mono
  on the right, and the certificate and runtime in muted bone between them.
- **Badges:** brass text on nothing, with a 1px brass rule underneath.
- **Inputs:** a single 1px bottom rule. No box, no fill, no radius.
- **Tables:** ruled rows only, generous 16px vertical padding, mono numerics.

## Do's and Don'ts

- Do let large areas be empty and dark.
- Do use the brass sparingly enough that a person can point at it.
- Do duotone every photograph into the palette.
- Don't use pure white or pure black.
- Don't add a card, a shadow or a radius.
- Don't uppercase anything.
- Don't hurry the motion — 260ms is the floor here, not the ceiling.