---
version: alpha
name: Stagehand Floodlight
description: "Raw, high-contrast event UI: square corners, solid offset shadows, heavy Fraunces headlines and electric cyan on teal-tinted concrete."
colors:
  background: "#f4f7f7"
  foreground: "#0e1413"
  card: "#ffffff"
  card-foreground: "#0e1413"
  popover: "#ffffff"
  popover-foreground: "#0e1413"
  primary: "#006d76"
  primary-foreground: "#ffffff"
  secondary: "#e6eceb"
  secondary-foreground: "#1c2423"
  muted: "#e6eceb"
  muted-foreground: "#424e4d"
  accent: "#c9f8fa"
  accent-foreground: "#003d43"
  destructive: "#cc1b1b"
  destructive-foreground: "#ffffff"
  success: "#06623d"
  success-foreground: "#ffffff"
  warning: "#ffd91f"
  warning-foreground: "#261d00"
  border: "#0e1413"
  input: "#424e4d"
  ring: "#006d76"
  dark-background: "#0e1413"
  dark-foreground: "#f4f7f7"
  dark-card: "#1c2423"
  dark-card-foreground: "#f4f7f7"
  dark-popover: "#1c2423"
  dark-popover-foreground: "#f4f7f7"
  dark-primary: "#22c9d4"
  dark-primary-foreground: "#00282c"
  dark-secondary: "#2e3837"
  dark-secondary-foreground: "#e6eceb"
  dark-muted: "#2e3837"
  dark-muted-foreground: "#b0bcbb"
  dark-accent: "#003d43"
  dark-accent-foreground: "#c9f8fa"
  dark-destructive: "#ff6262"
  dark-destructive-foreground: "#3b0104"
  dark-success: "#26b977"
  dark-success-foreground: "#012115"
  dark-warning: "#f2c200"
  dark-warning-foreground: "#261d00"
  dark-border: "#8d9b9a"
  dark-input: "#6e7c7b"
  dark-ring: "#22c9d4"
typography:
  display-lg:
    fontFamily: Fraunces
    fontSize: 76px
    fontWeight: 900
    lineHeight: 0.95
    letterSpacing: -0.035em
  display-md:
    fontFamily: Fraunces
    fontSize: 56px
    fontWeight: 900
    lineHeight: 1
    letterSpacing: -0.03em
  heading-lg:
    fontFamily: Fraunces
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: -0.02em
  heading-md:
    fontFamily: Instrument Sans
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.015em
  heading-sm:
    fontFamily: Instrument Sans
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: -0.005em
  body-lg:
    fontFamily: Instrument Sans
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
  body-md:
    fontFamily: Instrument Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: Instrument Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: Instrument Sans
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.04em
  caption:
    fontFamily: JetBrains Mono
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.03em
  code:
    fontFamily: JetBrains Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  xl: 0px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    typography: "{typography.label}"
    rounded: 0px
    padding: 0 20px
    height: 48px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label}"
    rounded: 0px
    padding: 0 20px
    height: 48px
  button-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.label}"
    rounded: 0px
    padding: 0 20px
    height: 48px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body-sm}"
    rounded: 0px
    padding: 0 16px
    height: 48px
  card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: 0px
    padding: 24px
  popover:
    backgroundColor: "{colors.popover}"
    textColor: "{colors.popover-foreground}"
    rounded: 0px
    padding: 12px
  helper-text:
    backgroundColor: "{colors.background}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt:
    backgroundColor: "{colors.muted}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
    typography: "{typography.caption}"
    rounded: 0px
    padding: 0 8px
    height: 24px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.success-foreground}"
    typography: "{typography.caption}"
    rounded: 0px
    padding: 0 8px
    height: 24px
  badge-warning:
    backgroundColor: "{colors.warning}"
    textColor: "{colors.warning-foreground}"
    typography: "{typography.caption}"
    rounded: 0px
    padding: 0 8px
    height: 24px
  badge-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.caption}"
    rounded: 0px
    padding: 0 8px
    height: 24px
  button-primary-dark:
    backgroundColor: "{colors.dark-primary}"
    textColor: "{colors.dark-primary-foreground}"
    typography: "{typography.label}"
    rounded: 0px
    padding: 0 20px
    height: 48px
  button-secondary-dark:
    backgroundColor: "{colors.dark-secondary}"
    textColor: "{colors.dark-secondary-foreground}"
    typography: "{typography.label}"
    rounded: 0px
    padding: 0 20px
    height: 48px
  button-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.label}"
    rounded: 0px
    padding: 0 20px
    height: 48px
  input-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-foreground}"
    typography: "{typography.body-sm}"
    rounded: 0px
    padding: 0 16px
    height: 48px
  card-dark:
    backgroundColor: "{colors.dark-card}"
    textColor: "{colors.dark-card-foreground}"
    rounded: 0px
    padding: 24px
  popover-dark:
    backgroundColor: "{colors.dark-popover}"
    textColor: "{colors.dark-popover-foreground}"
    rounded: 0px
    padding: 12px
  helper-text-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt-dark:
    backgroundColor: "{colors.dark-muted}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge-dark:
    backgroundColor: "{colors.dark-accent}"
    textColor: "{colors.dark-accent-foreground}"
    typography: "{typography.caption}"
    rounded: 0px
    padding: 0 8px
    height: 24px
  badge-success-dark:
    backgroundColor: "{colors.dark-success}"
    textColor: "{colors.dark-success-foreground}"
    typography: "{typography.caption}"
    rounded: 0px
    padding: 0 8px
    height: 24px
  badge-warning-dark:
    backgroundColor: "{colors.dark-warning}"
    textColor: "{colors.dark-warning-foreground}"
    typography: "{typography.caption}"
    rounded: 0px
    padding: 0 8px
    height: 24px
  badge-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.caption}"
    rounded: 0px
    padding: 0 8px
    height: 24px
---

# Stagehand Floodlight

## Overview

Stagehand Floodlight is for festivals, club nights, conferences and ticket drops. Each surface is a slab with a 2px border. Each shadow is a solid offset block in ink (#0e1413). Display headlines are set in Fraunces 900. There are no gradients, blurs or rounded corners. The model is a poster pasted on a concrete wall: legible at a glance, with one cyan action per view.

Moods: brutalist, bold, raw, deliberate. Built for: events, ticketing, festivals. Density: comfortable.

Every color has a light value and a dark value. Tokens named `dark-*` are the dark-mode counterparts of the token with the same role name.

## Colors

Brand cyan (hue ~185°) is the only action color. Light mode uses primary brand.700 #006d76: about 5.6:1 on background and 6.1:1 under white text. Dark mode uses brand.400 #22c9d4: about 9.2:1 on background and 7.7:1 under brand.950 text. Neutrals are cold concrete tinted toward the same teal hue, with chroma held low and even from 50 to 950. Ink (neutral.950) is the default foreground and the shadow color. Success is shifted cool, toward ~155°, so it sits next to cyan without competing. Warning is a lemon signal yellow (warning.300 light, warning.400 dark) that always carries warning.950 text. Destructive is red (danger.600 light, danger.400 dark), roughly 170° away from the brand hue, so it can never be confused with primary. Light borders are ink, not hairline grey. Dark borders are neutral.400.

- **Primary** `#006d76` / dark `#22c9d4`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#f4f7f7` / dark `#0e1413` on `#0e1413` / dark `#f4f7f7`: page surface and body text.
- **Card** `#ffffff` / dark `#1c2423`: raised surfaces.
- **Secondary** `#e6eceb` / dark `#2e3837`: secondary buttons and quiet controls.
- **Muted** `#e6eceb` / dark `#2e3837` with **muted-foreground** `#424e4d` / dark `#b0bcbb`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#c9f8fa` / dark `#003d43`: highlights, selected rows, badges.
- **Destructive** `#cc1b1b` / dark `#ff6262`, **Success** `#06623d` / dark `#26b977`, **Warning** `#ffd91f` / dark `#f2c200`: status only, always paired with an icon or label.
- **Border** `#0e1413` / dark `#8d9b9a`, **Input** `#424e4d` / dark `#6e7c7b`, **Ring** `#006d76` / dark `#22c9d4`.

All text/background pairs above pass WCAG AA (4.5:1) in both modes; this is checked automatically at build time.

## Typography

The scale steps by a ratio of about 1.4 from heading-sm 20px: 20 / 28 / 40 / 56 / 76. Body sizes run 14 / 16 / 18 below it. Fraunces ships 700 and 900 here: 900 for display-lg and display-md, 700 for heading-lg. Display tracking tightens with size (-0.035 at 76px, -0.03 at 56px, -0.02 at 40px). Instrument Sans (400–700) handles all UI text, with headings and labels at 700 and body at 400. Body line heights are 1.5–1.55. JetBrains Mono (400/500/700) sets captions, dates, venues and ticket codes at 12–14px.

- Display: **Fraunces** (fallback Georgia, serif)
- Interface: **Instrument Sans** (fallback system-ui, sans-serif)
- Mono: **JetBrains Mono** (fallback ui-monospace, monospace)

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | Fraunces | 76px | 0.95 | 900 |
| display-md | Fraunces | 56px | 1 | 900 |
| heading-lg | Fraunces | 40px | 1.08 | 700 |
| heading-md | Instrument Sans | 28px | 1.2 | 700 |
| heading-sm | Instrument Sans | 20px | 1.3 | 700 |
| body-lg | Instrument Sans | 18px | 1.55 | 400 |
| body-md | Instrument Sans | 16px | 1.55 | 400 |
| body-sm | Instrument Sans | 14px | 1.5 | 400 |
| label | Instrument Sans | 14px | 1.2 | 700 |
| caption | JetBrains Mono | 12px | 1.4 | 500 |
| code | JetBrains Mono | 14px | 1.5 | 400 |

## Layout

The base grid is 4px. Padding inside bordered blocks is generous: cards use space.6 (24px), sections use space.16–24. Sections are full width, divided by 2px rules in the border token, with content capped at 1280px. Asymmetric columns are allowed. Buttons and inputs are 48px tall. Badges are 24px tall.

Spacing uses a 4px base: xs = 4px, sm = 8px, md = 16px, lg = 24px, xl = 32px, 2xl = 48px, 3xl = 64px.

## Elevation & Depth

There is no blur and no ambient shadow. Elevation is a solid ink offset of shadow.sm 2px, shadow.md 4px or shadow.lg 8px, always paired with a 2px border. Cards use shadow.md; dialogs and popovers use shadow.lg. On hover, the element translates 2px toward its shadow and drops to shadow.sm; on active, it translates 4px and the shadow is removed. In dark mode the ink shadow nearly disappears against neutral.950. There, depth comes from the card fill (neutral.900, one step above background) plus the neutral.400 border.

- sm: `2px 2px 0 0 #0e1413`
- md: `4px 4px 0 0 #0e1413`
- lg: `8px 8px 0 0 #0e1413`

## Shapes

Every radius is 0 except radius.full, which is reserved for avatars and status dots of 8px or less. Buttons, inputs, cards, badges, menus, dialogs and images all have square corners. Borders are 2px and solid, never dashed or translucent.

Radius scale: sm 0px, md 0px, lg 0px, xl 0px, full 9999px.

## Components

Components ending in `-dark` are the dark-mode versions. Button: 48px tall, 20px horizontal padding, label type. Input: 48px tall with a 1px input-colored border; focus shows a 2px ring in the ring color. Card: 24px padding, 1px border, sm shadow. Badge: pill, caption type.

## Do's and Don'ts

- **Do:** Set radius.none (0) on buttons, inputs, cards, badges, menus, dialogs and images. Use radius.full only for avatars and status dots 8px or smaller.
- **Do:** Give every card, input and button a solid 2px border: the border token for cards and buttons, the input token for inputs.
- **Do:** Use shadow.md on cards and shadow.lg on dialogs and popovers. On hover, translate 2px toward the shadow and switch to shadow.sm; on active, translate 4px and remove the shadow.
- **Do:** Show focus as a 2px solid ring-token outline with a 2px offset on every interactive element. Never rely on a shadow change alone.
- **Do:** Set display-lg (76px) and display-md (56px) in Fraunces 900 with their negative letterSpacing, and keep headlines to two lines or fewer.
- **Do:** Set buttons, labels and nav items in Instrument Sans 700 using the label style (14px, +0.04 tracking). Set dates, times, venues and ticket codes in JetBrains Mono using caption (12px) or code (14px).
- **Do:** Use one primary button per view for the main action, such as 'Get tickets'. Make all other actions secondary buttons with a 2px border.
- **Do:** Use the warning token with warning-foreground text for sold-out and last-tickets badges, and always include a text label.
- **Don't:** Don't use blurred shadows, gradients, glassmorphism or translucent borders.
- **Don't:** Don't round any corner above 0, including images, tags, tooltips and dropdowns.
- **Don't:** Don't use cyan for errors or destructive actions. Use destructive (danger.600 in light, danger.400 in dark) with destructive-foreground text.
- **Don't:** Don't set Fraunces below 40px (heading-lg). Use Instrument Sans for heading-md (28px) and everything smaller.
- **Don't:** Don't use muted-foreground for primary content or for text smaller than 14px (body-sm).
- **Don't:** Don't use untinted grey. Take every neutral from the teal-tinted neutral ramp.
- **Don't:** Don't put primary-colored text on the accent surface. Use accent-foreground (brand.900 in light, brand.100 in dark).
- **Don't:** Don't put white text on the warning token. Use warning-foreground (warning.950) in both modes.