---
version: alpha
name: Chancery Lane
description: A single hue held all the way down: lavender-grey paper, violet ink, and a margin that is always there whether or not anything is in it.
meta:
  id: "theme-chancery-lane"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-09-02T01:54:48+09:00"
  updatedAt: "2026-09-02T01:54:48+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: A document, not an interface.
  bestFor: Contracts and e-signature, legal research, policy and compliance libraries, notarised records, long clause-numbered text
  avoidFor: Consumer marketing, dashboards, anything image-led, anything that needs to feel fast
  defaultMode: light
  surfaceStyle: flat
  accentUse: text
  caseStyle: labels-upper
  borderWidth: 1px
  imageTreatment: none
  motion:
    intensity: 1
    duration: 160ms
    ease: "cubic-bezier(0.4, 0, 0.2, 1)"
    signature: "Marginalia fades; the document body never moves. A page of text that shifts under the reader has lost the argument."
  displayFont: Faustina
  displayKind: serif
  bodyFont: Faustina
  monoFont: Anonymous Pro
colors:
  background: "#D7E3FE"
  foreground: "#1D1F23"
  card: "#CEDCFB"
  card-foreground: "#1D1F23"
  popover: "#CEDCFB"
  popover-foreground: "#1D1F23"
  primary: "#58498A"
  primary-foreground: "#F8FAFF"
  secondary: "#C1D3FD"
  secondary-foreground: "#1D1F23"
  muted: "#C1D3FD"
  muted-foreground: "#565A5F"
  accent: "#5C5774"
  accent-foreground: "#F8FAFF"
  destructive: "#9F1718"
  destructive-foreground: "#F8FAFF"
  border: "#B1C2E6"
  input: "#B1C2E6"
  ring: "#58498A"
  chart-1: "#7367A4"
  chart-2: "#877DB4"
  chart-3: "#5C547F"
  chart-4: "#9F98C0"
  chart-5: "#48435E"
colorsDark:
  background: "#050D23"
  foreground: "#CAD7E5"
  card: "#14171E"
  card-foreground: "#CAD7E5"
  popover: "#14171E"
  popover-foreground: "#CAD7E5"
  primary: "#A496DE"
  primary-foreground: "#090D17"
  secondary: "#1D212B"
  secondary-foreground: "#CAD7E5"
  muted: "#1D212B"
  muted-foreground: "#7C8B9C"
  accent: "#A8A3C3"
  accent-foreground: "#090D17"
  destructive: "#FB7266"
  destructive-foreground: "#090D17"
  border: "#292D37"
  input: "#292D37"
  ring: "#A496DE"
  chart-1: "#A59ADB"
  chart-2: "#8A80B7"
  chart-3: "#BEB6E7"
  chart-4: "#726C91"
  chart-5: "#D1CCED"
typography:
  display-lg:
    fontFamily: Faustina
    fontSize: 46px
    fontWeight: 600
    lineHeight: 1.14
    letterSpacing: -0.015em
  headline-lg:
    fontFamily: Faustina
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.22
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Faustina
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.35
  body-lg:
    fontFamily: Faustina
    fontSize: 17.5px
    fontWeight: 400
    lineHeight: 1.72
  body-md:
    fontFamily: Faustina
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.7
  body-sm:
    fontFamily: Faustina
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
  label-caps:
    fontFamily: Faustina
    fontSize: 10.5px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: 0.16em
  label-mono:
    fontFamily: Anonymous Pro
    fontSize: 12.5px
    fontWeight: 400
    lineHeight: 1.5
  numeral-xl:
    fontFamily: Anonymous Pro
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -0.01em
rounded:
  none: 0px
  sm: 2px
  md: 3px
  lg: 4px
  xl: 5px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 26px
  xl: 52px
  gutter: 20px
  margin: 32px
  measure: 68ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.sm}"
    padding: 11px
  button-ghost:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 11px
  card-panel:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.md}"
    padding: 22px
  badge-label:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.sm}"
---

# Chancery Lane

## Overview

Chancery Lane is for text that has legal weight. Not text that *reads* serious —
text where the difference between clause 4.2 and clause 4.2(a) is worth money,
and where a reader has to be able to point at a thing and say *that one*.

Everything follows from that. The measure is locked at 68ch and never widens.
There is a margin rail to the right of the body on every screen, and it is
present whether or not anything is in it, because a rail that appears when a
comment arrives makes the whole document reflow and the reader loses their
place. The rail costs 120px of width permanently. That is the price.

There is one hue in the system. Lavender-grey paper, violet ink, violet marks —
a document written with one pen. It suits contracts, policy libraries and legal
research. It is wrong for anything that needs a photograph.

## Colors

One hue, held all the way down.

- **Ground:** lavender-grey. Not white, because white makes 16px serif text look
  thin, and this is a system where people read for an hour.
- **Primary (violet):** actions that bind — sign, execute, submit. It is the
  only fill in the system.
- **Accent:** the same violet, lighter, and it is *text*: annotation numbers,
  cross-references, the defined-term marks. It clears 4.5:1 on both the ground
  and the card, because a cross-reference nobody can read is a broken link.
- **Neutrals** carry real chroma here — they are tinted lavender, not grey. A
  neutral grey next to this ground reads as a printing error.
- **Destructive** is the only other hue permitted, and it appears exactly twice
  in the system: terminate, and delete.
- Charts are monochrome. Nothing in a contract is a pie.

## Typography

Faustina for everything, Anonymous Pro for identifiers.

- **Display and headings:** Faustina at 600. A serif with sturdy, slightly
  condensed forms that hold up at 20px, which matters because most headings in a
  document are clause headings, not page titles.
- **Body:** Faustina at 16px, 1.7, 68ch. Sixteen, not fifteen — this is reading,
  not scanning.
- **Clause numbers, document IDs, hashes:** Anonymous Pro. It has the one
  property that matters for legal identifiers, which is that 1, l and I are
  three different shapes.
- Uppercase is reserved for rail labels and status. Headings are mixed case,
  because that is how the underlying documents are written.

## Layout

**The document column and the permanent rail.** A locked 68ch body column with a
120px rail to its right, on *every* screen — reader, editor, search results,
settings. The rail holds clause numbers, comment counts, version marks and
defined-term glosses, and when it holds nothing it holds nothing visibly. It
never collapses.

Numbering hangs. A clause number sits in the left margin of the body column,
outside the measure, so the text edge stays flush from the first line to the
last. Sub-clauses indent by exactly one 26px step and no further; a document
that needs four levels of indent needs restructuring, not more indent.

Sections are separated by space and by a hairline rule at 1px. Vertical rhythm
is 4px and the body baseline is 27.2px.

## Elevation & Depth

There is no elevation. Cards sit flat on the ground with a 1px border and no
shadow anywhere in the system, in either mode. The only depth cue is that the
card is a slightly different lightness from the ground.

This is deliberate: a shadow implies a thing can be picked up and moved, and
nothing in a executed document can be. Motion is limited to marginalia fading
in. The document body itself never animates.

## Shapes

Nearly square — 2px on controls, 3px on cards. Borders are 1px and are the
primary structural device, since there are no shadows to do the job.

There is no photography. The image treatment is "none" and it means it: an
illustration in a contract system is a liability. Where a visual is genuinely
required — a signature block, a seal, an exhibit — it is rendered as a bordered
box with a mono caption, not as a picture.

## Components

- **Clause:** number hanging in the left margin in Anonymous Pro, body in
  Faustina, rail on the right showing comment count and status. The whole clause
  is the anchor target and gets a violet left border when linked to.
- **Defined term:** violet text with a 1px dotted underline. Hovering shows the
  definition in the rail, not in a floating tooltip — tooltips cover the text
  you were reading.
- **Signature block:** a bordered box 2 columns wide, name in body, role in
  label-caps, date in mono, and a 1px rule for the mark.
- **Redline:** insertions in violet with a solid underline, deletions in
  destructive with a strike. Never coloured backgrounds — they make the page
  unprintable.
- **Buttons:** violet fill at 2px radius. Ghost buttons are violet text with no
  border at all.

## Do's and Don'ts

- Do keep the rail present and empty rather than absent and appearing.
- Do hang clause numbers outside the measure.
- Do let the accent be text; it was solved to 4.5:1 for exactly that.
- Don't widen the measure past 68ch, on any breakpoint, for any reason.
- Don't add a shadow to make something look interactive.
- Don't introduce a second hue for status — use the destructive red or nothing.
- Don't put a photograph in a legal document.