---
version: alpha
name: Curtain Call
description: A house lit at half. Mid violet-grey walls, plum on plum, and type set like a printed programme.
meta:
  id: "theme-curtain-call"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-09-01T23:26:31+09:00"
  updatedAt: "2026-09-01T23:26:31+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: The room before the lights go down.
  bestFor: Theatre and concert programmes, ticketing, festival schedules, arts venues, membership sites
  avoidFor: Developer tools, dense dashboards, anything that needs to look inexpensive
  defaultMode: dark
  surfaceStyle: filled
  accentUse: underline
  caseStyle: none
  borderWidth: 1px
  imageTreatment: duotone
  motion:
    intensity: 2
    duration: 320ms
    ease: "cubic-bezier(0.4, 0, 0.2, 1)"
    signature: "Panels rise from below and settle, the way a curtain does — never a fade."
  displayFont: Gloock
  displayKind: serif
  bodyFont: Cabin
  monoFont: Cutive Mono
colors:
  background: "#A6A5B5"
  foreground: "#000000"
  card: "#9898A0"
  card-foreground: "#000000"
  popover: "#9898A0"
  popover-foreground: "#000000"
  primary: "#7F2195"
  primary-foreground: "#FAF9FF"
  secondary: "#888893"
  secondary-foreground: "#000000"
  muted: "#888893"
  muted-foreground: "#1B1F36"
  accent: "#600373"
  accent-foreground: "#FAF9FF"
  destructive: "#9F1618"
  destructive-foreground: "#FAF9FF"
  border: "#7E7D87"
  input: "#7E7D87"
  ring: "#7F2195"
  chart-1: "#86369A"
  chart-2: "#B22E39"
  chart-3: "#6B5500"
  chart-4: "#00825C"
  chart-5: "#00548B"
colorsDark:
  background: "#26262D"
  foreground: "#FFFFFF"
  card: "#313138"
  card-foreground: "#FFFFFF"
  popover: "#313138"
  popover-foreground: "#FFFFFF"
  primary: "#D67AEF"
  primary-foreground: "#0D0C16"
  secondary: "#3D3D48"
  secondary-foreground: "#FFFFFF"
  muted: "#3D3D48"
  muted-foreground: "#A6AAB8"
  accent: "#CB78E0"
  accent-foreground: "#0D0C16"
  destructive: "#FE7569"
  destructive-foreground: "#0D0C16"
  border: "#4C4C56"
  input: "#4C4C56"
  ring: "#D67AEF"
  chart-1: "#D17FE7"
  chart-2: "#F2696D"
  chart-3: "#D2A900"
  chart-4: "#00AD7B"
  chart-5: "#6FBBFF"
typography:
  display-lg:
    fontFamily: Gloock
    fontSize: 78px
    fontWeight: 400
    lineHeight: 1.04
    letterSpacing: -0.03em
  headline-lg:
    fontFamily: Gloock
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.14
    letterSpacing: -0.015em
  headline-md:
    fontFamily: Gloock
    fontSize: 23px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.005em
  body-lg:
    fontFamily: Cabin
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.68
  body-md:
    fontFamily: Cabin
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.65
  body-sm:
    fontFamily: Cabin
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.55
  label-caps:
    fontFamily: Cabin
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.18em
  label-mono:
    fontFamily: Cutive Mono
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.01em
  numeral-xl:
    fontFamily: Cutive Mono
    fontSize: 52px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.02em
rounded:
  none: 0px
  sm: 2px
  md: 3px
  lg: 4px
  xl: 6px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 28px
  xl: 56px
  gutter: 22px
  margin: 30px
  measure: 62ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.sm}"
    padding: 13px
  button-ghost:
    backgroundColor: transparent
    textColor: "{colors.foreground}"
    rounded: "{rounded.sm}"
    padding: 13px
  card-panel:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  badge-label:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.sm}"
---

# Curtain Call

## Overview

Curtain Call is a system for places people go in the evening. The ground is not
paper and not night — it is the mid violet-grey of a house lit at half, the
twenty minutes when the audience is seated and the stage is not yet lit.

That mid-tone is the whole idea. Almost every interface either starts white and
adds shadow, or starts black and adds glow; this one starts in between, so a
card can go lighter *and* darker on the same page and both directions read as
depth. The plum sits on top as the only saturated thing in the room.

It suits programmes, schedules, ticketing and membership. It is wrong for
anything that has to feel cheap or fast — the type is set for a page someone
holds, not a screen someone scans.

## Colors

One hue, two depths, and a room to put them in.

- **Ground:** mid violet-grey. Not a background so much as a wall. Cards go up
  toward the light, footers and wells go down away from it.
- **Primary (plum):** the act of choosing — buy, reserve, join. Filled, never
  outlined.
- **Accent:** the same plum, darker. It is the *state* of having chosen: your
  seat, your night, your booking. Because the two are one hue, a page can be
  entirely plum without becoming loud.
- **Neutrals** carry almost no chroma, so the violet in the ground reads as
  light rather than as tint.
- Charts are polychrome, because a season of programming is genuinely a set of
  unrelated things.

## Typography

Gloock for display, Cabin for reading, Cutive Mono for times and seat numbers.

- **Display:** Gloock at 78px. A high-contrast serif with almost no mid-weight —
  it looks printed, not rendered. Use it for the title of the thing.
- **Headings:** the same face all the way down. There is no second display face
  and no uppercase in this system; the programme is set in mixed case.
- **Body:** Cabin at 15px, 1.65, 62ch. Warm, slightly humanist, comfortable at
  length.
- **Times, dates, seat numbers:** Cutive Mono. It is a typewriter face, and its
  figures make a schedule read as a document rather than a table.

## Layout

A 12-column grid at 1320px with 22px gutters and a 30px margin. The signature
arrangement is a **two-tier bill**: a full-bleed hero for tonight, then a dense
dated list beneath it where every row is one event and the date lives in a
28px-wide gutter to the left of the rule.

Vertical rhythm is 4px. Sections are separated by 28px of space, not by lines —
the only rules in the system are inside the bill.

## Elevation & Depth

Tonal, in both directions. A card is lighter than the ground; a well, a footer
or an inactive row is darker. Shadows exist but are soft and very low-contrast,
used only on the one element that is currently open.

The signature motion is a rise: panels come up from below and settle. Nothing in
this system fades in.

## Shapes

Nearly square — 2px on controls, 4px on cards, 6px on modals. The radius is
small enough to read as a printed corner rather than a rounded UI.

Photography is duotone in the plum, full-bleed, and always of a room or a stage,
never of a product.

## Components

- **Bill row:** date in the left gutter in Cutive Mono, title in Gloock at 23px,
  venue and running time in body-sm beneath, availability on the right. A 1px
  rule below. The whole row is the hit target.
- **Buttons:** plum fill, 2px radius, 13px padding. Ghost buttons carry no
  border at all — just the label and an underline on hover.
- **Seat map:** squares at 3px radius, secondary for free, plum for chosen,
  muted with a diagonal for gone.
- **Badges:** uppercase label-caps on secondary, no border.
- **Inputs:** filled with card, 1px border, plum underline on focus.

## Do's and Don'ts

- Do let the ground be a mid-tone and move cards in both directions from it.
- Do keep every saturated pixel in the plum family.
- Do set the whole programme in mixed case.
- Don't introduce a second hue for status; use lightness.
- Don't fade anything in — things rise.
- Don't set display type below 23px; it is a headline face and falls apart small.
- Don't use photography of people holding products.