---
version: alpha
name: Evensong Statehouse
description: "Dark-first civic UI for government services: deep violet-tinted surfaces, one luminous rose accent and a cinematic serif voice."
colors:
  background: "#f6f4fa"
  foreground: "#130f1f"
  card: "#ffffff"
  card-foreground: "#130f1f"
  popover: "#ffffff"
  popover-foreground: "#130f1f"
  primary: "#cc2259"
  primary-foreground: "#ffffff"
  secondary: "#ebe8f2"
  secondary-foreground: "#211d30"
  muted: "#ebe8f2"
  muted-foreground: "#474159"
  accent: "#ffe0e8"
  accent-foreground: "#5c0a29"
  destructive: "#c2410c"
  destructive-foreground: "#ffffff"
  success: "#0f6845"
  success-foreground: "#ffffff"
  warning: "#ffdb85"
  warning-foreground: "#432d00"
  border: "#d7d3e2"
  input: "#b9b4c9"
  ring: "#ec3a73"
  dark-background: "#130f1f"
  dark-foreground: "#f6f4fa"
  dark-card: "#211d30"
  dark-card-foreground: "#f6f4fa"
  dark-popover: "#211d30"
  dark-popover-foreground: "#f6f4fa"
  dark-primary: "#fb6590"
  dark-primary-foreground: "#3a0318"
  dark-secondary: "#312c42"
  dark-secondary-foreground: "#ebe8f2"
  dark-muted: "#312c42"
  dark-muted-foreground: "#b9b4c9"
  dark-accent: "#5c0a29"
  dark-accent-foreground: "#ffe0e8"
  dark-destructive: "#f97a3e"
  dark-destructive-foreground: "#3a0d02"
  dark-success: "#3ec183"
  dark-success-foreground: "#04231a"
  dark-warning: "#e5a50f"
  dark-warning-foreground: "#2a1b00"
  dark-border: "#312c42"
  dark-input: "#474159"
  dark-ring: "#fb6590"
typography:
  display-lg:
    fontFamily: Gloock
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.025em
  display-md:
    fontFamily: Gloock
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.02em
  heading-lg:
    fontFamily: Gloock
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.015em
  heading-md:
    fontFamily: Albert Sans
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.01em
  heading-sm:
    fontFamily: Albert Sans
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: -0.005em
  body-lg:
    fontFamily: Albert Sans
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  body-md:
    fontFamily: Albert Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: Albert Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: Albert Sans
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0.005em
  caption:
    fontFamily: Albert Sans
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.015em
  code:
    fontFamily: DM Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 2px
  md: 6px
  lg: 10px
  xl: 14px
  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: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 44px
  card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  popover:
    backgroundColor: "{colors.popover}"
    textColor: "{colors.popover-foreground}"
    rounded: "{rounded.lg}"
    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: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-warning:
    backgroundColor: "{colors.warning}"
    textColor: "{colors.warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  button-primary-dark:
    backgroundColor: "{colors.dark-primary}"
    textColor: "{colors.dark-primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-secondary-dark:
    backgroundColor: "{colors.dark-secondary}"
    textColor: "{colors.dark-secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  input-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 44px
  card-dark:
    backgroundColor: "{colors.dark-card}"
    textColor: "{colors.dark-card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  popover-dark:
    backgroundColor: "{colors.dark-popover}"
    textColor: "{colors.dark-popover-foreground}"
    rounded: "{rounded.lg}"
    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: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-success-dark:
    backgroundColor: "{colors.dark-success}"
    textColor: "{colors.dark-success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-warning-dark:
    backgroundColor: "{colors.dark-warning}"
    textColor: "{colors.dark-warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
---

# Evensong Statehouse

## Overview

Evensong Statehouse serves public-sector tasks people often do after work, on a phone, in a dark room: permit renewals, benefit portals, council dashboards. Dark mode is the reference design. Pages sit on neutral.950, raised surfaces on neutral.900, and a single Rose accent marks the one primary action per view. Light mode uses the same tokens on neutral.50 and meets the same contrast targets: 4.5:1 minimum for text, 5:1 or more where practical, and 3:1 for primary and ring against background.

Moods: nocturnal, cinematic, authoritative, calm. Built for: government, civic-tech, public-services. 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

Neutrals are tinted violet at every step. Saturation is highest in the 800–950 range so dark surfaces read as midnight violet, not grey. Rose (brand) peaks in chroma at steps 400–600. Dark mode uses brand.400 (#fb6590) for primary and ring: 6.6:1 against neutral.950, with brand.950 text on top at 6.1:1. Light mode uses brand.600 (#cc2259): white text on it at 5.3:1, and 4.9:1 against neutral.50. Destructive is an orange-leaning vermilion, danger.600 #c2410c in light and danger.400 #f97a3e in dark. That puts it about 36° of hue away from Rose (ΔE2000 ≈ 24 in light, higher in dark), so a delete button cannot be mistaken for the brand action. Success (emerald) and warning (amber) follow the same warm, high-chroma curve as Rose. Success, warning and destructive always appear with an icon and a text label.

- **Primary** `#cc2259` / dark `#fb6590`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#f6f4fa` / dark `#130f1f` on `#130f1f` / dark `#f6f4fa`: page surface and body text.
- **Card** `#ffffff` / dark `#211d30`: raised surfaces.
- **Secondary** `#ebe8f2` / dark `#312c42`: secondary buttons and quiet controls.
- **Muted** `#ebe8f2` / dark `#312c42` with **muted-foreground** `#474159` / dark `#b9b4c9`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#ffe0e8` / dark `#5c0a29`: highlights, selected rows, badges.
- **Destructive** `#c2410c` / dark `#f97a3e`, **Success** `#0f6845` / dark `#3ec183`, **Warning** `#ffdb85` / dark `#e5a50f`: status only, always paired with an icon or label.
- **Border** `#d7d3e2` / dark `#312c42`, **Input** `#b9b4c9` / dark `#474159`, **Ring** `#ec3a73` / dark `#fb6590`.

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

## Typography

Sizes follow a 1.25 (major third) ratio from a 16px base: 12 / 14 / 16 / 20 / 32 / 40 / 60. Body-lg at 18 is the one off-ratio size, kept for long-form reading. Gloock is a high-contrast display serif that ships only weight 400. It is used at display-lg (60), display-md (40) and heading-lg (32), with letterSpacing tightening from -0.015 to -0.025em as size grows. Albert Sans (400/500/600/700) sets every functional element: body-md at 16px with 1.6 line height, labels at 14/600, captions at 12/500 with +0.015em tracking. DM Mono (400/500) is reserved for typography.code: case IDs, reference numbers, table dates and code.

- Display: **Gloock** (fallback Georgia, serif)
- Interface: **Albert Sans** (fallback system-ui, sans-serif)
- Mono: **DM Mono** (fallback ui-monospace, monospace)

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | Gloock | 60px | 1.05 | 400 |
| display-md | Gloock | 40px | 1.1 | 400 |
| heading-lg | Gloock | 32px | 1.15 | 400 |
| heading-md | Albert Sans | 20px | 1.3 | 600 |
| heading-sm | Albert Sans | 16px | 1.4 | 600 |
| body-lg | Albert Sans | 18px | 1.6 | 400 |
| body-md | Albert Sans | 16px | 1.6 | 400 |
| body-sm | Albert Sans | 14px | 1.5 | 400 |
| label | Albert Sans | 14px | 1.25 | 600 |
| caption | Albert Sans | 12px | 1.4 | 500 |
| code | DM Mono | 14px | 1.5 | 400 |

## Layout

Comfortable density on a 4px grid using space tokens 1–24. Page content is max 1120px wide and form columns max 640px. Buttons and inputs are 44px high to meet touch-target needs. Major sections are separated by space.12 (48px) to space.16 (64px). Cards use space.6 (24px) padding.

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

## Elevation & Depth

Dark-mode elevation comes from surface tint, not shadow. The page uses background (neutral.950), and card and popover use neutral.900 plus a 1px border (neutral.800). shadow.sm sits under cards. shadow.md is for menus and popovers, shadow.lg for dialogs. All three shadows are violet-black (rgba 8,4,18). Focus uses a 2px ring in the ring token (brand.400 dark, brand.500 light) with a 2px offset.

- sm: `0 1px 2px rgba(8, 4, 18, 0.30)`
- md: `0 6px 18px -4px rgba(8, 4, 18, 0.45)`
- lg: `0 24px 56px -12px rgba(8, 4, 18, 0.65)`

## Shapes

Rounding is restrained: radius.sm (2px) for tags and table cells, radius.md (6px) for buttons and inputs, radius.lg (10px) for cards, radius.xl (14px) for dialogs. radius.full is used only for status badges.

Radius scale: sm 2px, md 6px, lg 10px, xl 14px, full 9999px.

## Components

Components ending in `-dark` are the dark-mode versions. Button: 44px tall, 20px horizontal padding, label type. Input: 44px 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:** Design dark mode first. Use background (neutral.950) for the page and card/popover (neutral.900) with a 1px border (neutral.800) for raised surfaces, then verify light mode.
- **Do:** Give exactly one button per view the primary token (for example 'Submit application'); make all other buttons secondary or ghost.
- **Do:** Set Gloock only at display-lg (60px), display-md (40px) and heading-lg (32px), always weight 400. Set heading-md and smaller in Albert Sans.
- **Do:** Set case numbers, reference IDs and table dates in DM Mono (typography.code, 14px) so characters align in columns.
- **Do:** Keep buttons and inputs at 44px height and body text at body-md (16px / 1.6) or larger.
- **Do:** Pair every success, warning and destructive color with an icon and a text label, such as a badge reading 'Approved' or 'Action needed'.
- **Do:** Show keyboard focus as a 2px ring in the ring token with a 2px offset on every interactive element, including table row links.
- **Do:** Reserve shadow.md for menus and popovers and shadow.lg for dialogs; cards use only shadow.sm.
- **Don't:** Don't use primary (Rose) for errors, deletions or destructive confirmations; use the destructive token (danger.600 light, danger.400 dark).
- **Don't:** Don't use pure black (#000000) or untinted grey for any surface; take all surfaces from the neutral ramp.
- **Don't:** Don't set Gloock below 24px, in bold, faux-italic or all caps.
- **Don't:** Don't place body text on brand.400 or lighter; luminous Rose is for buttons, links and the focus ring only.
- **Don't:** Don't apply more than one Rose glow or accent-tinted highlight per card or section.
- **Don't:** Don't set essential instructions, error messages or legal text in muted-foreground; use foreground at body-md.
- **Don't:** Don't use radius above radius.xl (14px); only badges use radius.full.