---
version: alpha
name: Violet Hour
description: The loudest primary in the library on pale pink, with hard offset shadows and wide display caps.
meta:
  id: "theme-violet-hour"
  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: Doors at eight. Everything in caps.
  bestFor: Nightlife and music listings, festivals, club and venue sites, launch pages, youth brands
  avoidFor: Finance, healthcare, enterprise tools, anything requiring a sober voice
  defaultMode: dark
  surfaceStyle: hard-shadow
  accentUse: fill
  caseStyle: headings-upper
  borderWidth: 2px
  imageTreatment: punch
  motion:
    intensity: 4
    duration: 200ms
    ease: "cubic-bezier(0.2, 0, 0, 1.4)"
    signature: "Cards snap 3px toward their own shadow on press, like a key bottoming out."
  displayFont: Unbounded
  displayKind: sans
  bodyFont: Hanken Grotesk
  monoFont: Red Hat Mono
colors:
  background: "#F8EAF4"
  foreground: "#271D26"
  card: "#FAD8EF"
  card-foreground: "#271D26"
  popover: "#FAD8EF"
  popover-foreground: "#271D26"
  primary: "#923DE6"
  primary-foreground: "#FFF8FD"
  secondary: "#F4C8E7"
  secondary-foreground: "#271D26"
  muted: "#F4C8E7"
  muted-foreground: "#655763"
  accent: "#D66669"
  accent-foreground: "#150812"
  destructive: "#B6322D"
  destructive-foreground: "#FFF8FD"
  border: "#E1BAD6"
  input: "#E1BAD6"
  ring: "#923DE6"
  chart-1: "#8B43D7"
  chart-2: "#9C63E2"
  chart-3: "#6D3DA3"
  chart-4: "#AE89E2"
  chart-5: "#523875"
colorsDark:
  background: "#220B1D"
  foreground: "#E1DAE0"
  card: "#2B1526"
  card-foreground: "#E1DAE0"
  popover: "#2B1526"
  popover-foreground: "#E1DAE0"
  primary: "#C297FF"
  primary-foreground: "#150812"
  secondary: "#3A1B33"
  secondary-foreground: "#E1DAE0"
  muted: "#3A1B33"
  muted-foreground: "#948B93"
  accent: "#D26366"
  accent-foreground: "#150812"
  destructive: "#FF897D"
  destructive-foreground: "#150812"
  border: "#462A3F"
  input: "#462A3F"
  ring: "#C297FF"
  chart-1: "#BA86FF"
  chart-2: "#9F66E5"
  chart-3: "#CCABFF"
  chart-4: "#805CB1"
  chart-5: "#DBC5FF"
typography:
  display-lg:
    fontFamily: Unbounded
    fontSize: 70px
    fontWeight: 700
    lineHeight: 0.98
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Unbounded
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Unbounded
    fontSize: 21px
    fontWeight: 600
    lineHeight: 1.24
  body-lg:
    fontFamily: Hanken Grotesk
    fontSize: 16.5px
    fontWeight: 400
    lineHeight: 1.6
  body-md:
    fontFamily: Hanken Grotesk
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.56
  body-sm:
    fontFamily: Hanken Grotesk
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.44
  label-caps:
    fontFamily: Hanken Grotesk
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.14em
  label-mono:
    fontFamily: Red Hat Mono
    fontSize: 12.5px
    fontWeight: 500
    lineHeight: 1.35
  numeral-xl:
    fontFamily: Red Hat Mono
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.03em
rounded:
  none: 0px
  sm: 2px
  md: 4px
  lg: 6px
  xl: 8px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 9px
  md: 18px
  lg: 28px
  xl: 60px
  gutter: 20px
  margin: 28px
  measure: 56ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.md}"
    padding: 14px
  card-listing:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: 20px
  chip-time:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.sm}"
  badge-label:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.sm}"
---

# Violet Hour

## Overview

Violet Hour is a listings system for things that happen after dark. Its primary
is the most saturated colour in this library, and it sits on a page that is pale
pink in light mode and deep plum in dark — there is no neutral moment anywhere
in it.

Structurally it runs on hard shadows: every card carries a 2px border and a
solid offset shadow with no blur, and pressing one moves it 3px toward that
shadow so it appears to bottom out. That is the entire interaction vocabulary,
and it is used consistently enough that a person learns it in one click.

It is aggressively unsuitable for anything sober. Do not use it for money,
health, or anything a person does at work.

## Colors

Pale pink, violet, coral.

- **Ground:** pink in light mode, deep plum in dark. The dark ground is not
  black — this system has no black anywhere.
- **Primary (violet):** the loudest value in the library. Buttons, active nav,
  the price. It can cover large areas here because the ground is chromatic too.
- **Accent (coral):** time. Door time, set time, last entry. Every time in the
  system is a coral chip, and nothing else is coral.
- **Neutrals** are heavily tinted toward the ground's pink.
- Charts are monochrome violet at five lightnesses; a lineup is one kind of
  thing, so it gets one hue.

## Typography

Unbounded for display, Hanken Grotesk for body, Red Hat Mono for times.

- **Display:** Unbounded at 70px, weight 700, uppercase. It is a very wide
  geometric face; set short. Two words, three at most, and let it run to the
  edge.
- **Headings:** uppercase at every level. Body and captions are sentence case.
- **Body:** Hanken Grotesk at 15px, 1.56, 56ch. Neutral on purpose — the display
  face is doing all the shouting and the body has to stay out of its way.
- **Times:** Red Hat Mono inside coral chips. Never in the body face.

## Layout

A 12-column grid at 1300px with 20px gutters. The signature structure is the
**night rail**: a fixed left column of coral time chips running down the page in
order, with listing cards to their right, so the whole evening reads as a
vertical timeline rather than a list of separate events.

Vertical rhythm is 6px, and card gaps are wide — 28px — because every card has a
shadow that needs room.

## Elevation & Depth

Hard shadow. A 2px border plus a solid offset shadow at 5px/5px, no blur, in the
foreground colour. Elevation is binary: a thing has the shadow or it does not.

On press, the element translates 3px on both axes toward the shadow and the
shadow shortens to 2px. Nothing fades and nothing scales.

## Shapes

Small but not square — 4px on controls, 6px on cards. Combined with the hard
shadow this reads as a printed sticker rather than a UI panel.

Photography is punch-treated, high-contrast, and always cropped tight on a face
or an instrument. Full-bleed images are encouraged.

## Components

- **Night rail:** the signature component. Coral time chips in a fixed left
  column, listing cards to the right, one continuous vertical rule behind.
- **Listing card:** 2px border, hard shadow, image top, uppercase act name in
  Unbounded at 21px, venue in body-sm, price in violet.
- **Buttons:** violet fill, 4px radius, hard shadow, 3px press travel.
- **Time chip:** coral fill, mono, 2px radius. Only ever contains a time.
- **Inputs:** 2px border, no shadow until focus, then the hard shadow appears.

## Do's and Don'ts

- Do keep every time in a coral chip and in the mono face.
- Do give every raised element the same 5px hard shadow.
- Do set display type in two or three words at most.
- Do use full-bleed, high-contrast photography.
- Don't blur a shadow.
- Don't introduce black or pure grey.
- Don't set body copy in the display face at any size.