---
version: alpha
name: Ultra Civic
description: Duotone by law: ultramarine and its own tint, nothing else. Wayfinding signage brought indoors, with 2px rules and uppercase headings.
meta:
  id: "theme-ultra-civic"
  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 colour and its tint. A second hue would be a bug.
  bestFor: Government and civic services, transit, universities, public information, forms at scale
  avoidFor: Luxury retail, entertainment, anything that needs more than two semantic colours
  defaultMode: light
  surfaceStyle: outline
  accentUse: fill
  caseStyle: headings-upper
  borderWidth: 2px
  imageTreatment: duotone
  motion:
    intensity: 2
    duration: 140ms
    ease: "cubic-bezier(0.2, 0, 0, 1)"
    signature: "Fills invert. An active element swaps its ink and its paper."
  displayFont: Archivo
  displayKind: sans
  bodyFont: Archivo
  monoFont: Azeret Mono
colors:
  background: "#F1F3F8"
  foreground: "#252934"
  card: "#E8EBF1"
  card-foreground: "#252934"
  popover: "#E8EBF1"
  popover-foreground: "#252934"
  primary: "#0C2DBB"
  primary-foreground: "#F8FAFF"
  secondary: "#DDE1EA"
  secondary-foreground: "#252934"
  muted: "#DDE1EA"
  muted-foreground: "#5C6372"
  accent: "#5981E0"
  accent-foreground: "#0A0D13"
  destructive: "#8B000B"
  destructive-foreground: "#F8FAFF"
  border: "#CCCFD6"
  input: "#CCCFD6"
  ring: "#0C2DBB"
  chart-1: "#3665E4"
  chart-2: "#517FEE"
  chart-3: "#3154AD"
  chart-4: "#799CEA"
  chart-5: "#2E457B"
colorsDark:
  background: "#0A0F1A"
  foreground: "#D3D8E5"
  card: "#141922"
  card-foreground: "#D3D8E5"
  popover: "#141922"
  popover-foreground: "#D3D8E5"
  primary: "#6E9AFF"
  primary-foreground: "#070D1A"
  secondary: "#1D2331"
  secondary-foreground: "#D3D8E5"
  muted: "#1D2331"
  muted-foreground: "#848C9A"
  accent: "#426BCE"
  accent-foreground: "#F8FAFF"
  destructive: "#F66D62"
  destructive-foreground: "#070D1A"
  border: "#2B313E"
  input: "#2B313E"
  ring: "#6E9AFF"
  chart-1: "#78A1FF"
  chart-2: "#5482F1"
  chart-3: "#9EBDFF"
  chart-4: "#4E6EB9"
  chart-5: "#BBD1FF"
typography:
  display-lg:
    fontFamily: Archivo
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1.02
    letterSpacing: -0.04em
  headline-lg:
    fontFamily: Archivo
    fontSize: 38px
    fontWeight: 600
    lineHeight: 1.12
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Archivo
    fontSize: 23px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Archivo
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.62
  body-md:
    fontFamily: Archivo
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.58
  body-sm:
    fontFamily: Archivo
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
  label-caps:
    fontFamily: Archivo
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.16em
  label-mono:
    fontFamily: Azeret Mono
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
  numeral-xl:
    fontFamily: Azeret Mono
    fontSize: 52px
    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: 26px
  xl: 56px
  gutter: 20px
  margin: 28px
  measure: 66ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.none}"
    padding: 14px
  button-secondary:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.none}"
    padding: 14px
  card-article:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: 20px
  badge-label:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.sm}"
---

# Ultra Civic

## Overview

Ultra Civic is a duotone system. There is the ultramarine and there is a lighter
tint of the same ultramarine, and between them they have to carry every state
the interface can be in: default, hover, selected, disabled, error. The
discipline that forces is the point — a civic service with fourteen colours is a
civic service nobody can use.

Everything is outlined at 2px, nothing is rounded, and headings are uppercase.
Active elements do not glow or lift; they *invert*, swapping ink and paper, the
way a pressed sign does.

Personality: plain, loud, accountable. Signage, not branding.

## Colors

Two colours: ultramarine, and ultramarine.

- **Primary (#0C2DBB):** Ultramarine. Fills, rules, the whole identity.
- **Accent (#5981E0):** The same hue, much lighter. Selected backgrounds,
  secondary fills, the "you are here" band.
- **Ground (#F1F3F8):** A near-white with the same hue in it at 0.7% chroma, so
  that a large ultramarine fill does not vibrate against it.
- **Ink:** near-black with a blue bias.
- **Destructive** is the only other hue in the file, and it is used only for
  irreversible actions. Errors on forms are marked with the primary plus a rule
  and a word, not with red.
- Charts are monochrome in the primary hue.

## Typography

Archivo for everything, Azeret Mono for reference numbers.

- **Display:** Archivo at 72px, weight 700, uppercase, tight tracking. It should
  look like it was cut from vinyl.
- **Headings:** uppercase at every level. Labels are sentence case — the inverse
  of most themes here, which is deliberate: in signage the big thing shouts.
- **Body:** Archivo at 15px, 1.58 line height, 66ch. Instructions must be
  readable by someone who is anxious.
- **Reference numbers:** Azeret Mono, because a case number needs to be
  transcribable over the phone.

## Layout

A 12-column grid at 1240px with 20px gutters. Form pages use a strict two-column
arrangement: the question at 5 columns, the answer at 7, with a 2px rule between
every question. One question per row, always.

Vertical rhythm is 4px. Section breaks are 56px and a 2px full-bleed rule.

## Elevation & Depth

There is no elevation. Every region is a 2px outlined box. The only depth cue is
inversion — a selected box swaps its fill and its text colour, which reads as
"pressed" without moving anything.

## Shapes

Zero radius throughout, including inputs, checkboxes and images. The 2px border
is uniform: the same weight around a card, a button and a text field, so the
whole page reads as one drawn system.

Images are duotoned to ultramarine and paper, cropped square.

## Components

- **Buttons:** solid ultramarine, paper text, zero radius, 14px padding, 2px
  border in the same colour. Hover inverts to paper fill with ultramarine text.
- **Form rows:** question left, control right, 2px rule beneath, generous 20px
  padding. This is the theme's main component.
- **Inputs:** 2px border, zero radius, paper fill, 4px offset focus outline.
- **Checkboxes and radios:** 24px, 2px border, filled solid when checked. Never
  a tick inside a rounded box.
- **Badges:** solid accent fill, ink text, square.

## Do's and Don'ts

- Do carry every state on two colours and inversion.
- Do set headings uppercase and body sentence case.
- Do keep one question per row in forms.
- Don't introduce a third hue, including for success or error.
- Don't round anything.
- Don't use a shadow to indicate focus; use a 4px offset outline.
- Don't shrink the border below 2px anywhere.