---
version: alpha
name: Sable Court
description: One hue at five lightnesses and nothing else. A monochrome brown system where hierarchy is made entirely of tone and type.
meta:
  id: "theme-sable-court"
  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: There is no second colour anywhere in this system
  bestFor: Law, archives, private banking, long-form reports, heritage brands
  avoidFor: Products that need status colours, dashboards, anything with alerts
  defaultMode: light
  surfaceStyle: ruled
  accentUse: underline
  caseStyle: none
  borderWidth: 1px
  imageTreatment: grayscale
  motion:
    intensity: 2
    duration: 200ms
    ease: "cubic-bezier(0.4, 0, 0.2, 1)"
    signature: "Tone shifts only. No transform, no colour change, ever."
  displayFont: EB Garamond
  displayKind: serif
  bodyFont: EB Garamond
  monoFont: IBM Plex Mono
colors:
  background: "#F2E7DF"
  foreground: "#2E1E12"
  card: "#EADED3"
  card-foreground: "#2E1E12"
  popover: "#EADED3"
  popover-foreground: "#2E1E12"
  primary: "#593215"
  primary-foreground: "#FFF9F4"
  secondary: "#E4D3C5"
  secondary-foreground: "#2E1E12"
  muted: "#E4D3C5"
  muted-foreground: "#6F5746"
  accent: "#8C694E"
  accent-foreground: "#FFF9F4"
  destructive: "#780008"
  destructive-foreground: "#FFF9F4"
  border: "#D1C2B6"
  input: "#D1C2B6"
  ring: "#593215"
  chart-1: "#946646"
  chart-2: "#A57C60"
  chart-3: "#73533C"
  chart-4: "#B69784"
  chart-5: "#574335"
colorsDark:
  background: "#190F09"
  foreground: "#E9D7CB"
  card: "#211813"
  card-foreground: "#E9D7CB"
  popover: "#211813"
  popover-foreground: "#E9D7CB"
  primary: "#D4A785"
  primary-foreground: "#160A03"
  secondary: "#2E221A"
  secondary-foreground: "#E9D7CB"
  muted: "#2E221A"
  muted-foreground: "#9E887A"
  accent: "#A27E62"
  accent-foreground: "#160A03"
  destructive: "#FF8B7F"
  destructive-foreground: "#160A03"
  border: "#3B2F27"
  input: "#3B2F27"
  ring: "#D4A785"
  chart-1: "#C99976"
  chart-2: "#A88062"
  chart-3: "#DAB69B"
  chart-4: "#866B57"
  chart-5: "#E4CCBA"
typography:
  display-lg:
    fontFamily: EB Garamond
    fontSize: 54px
    fontWeight: 500
    lineHeight: 1.02
    letterSpacing: -0.01em
  headline-lg:
    fontFamily: EB Garamond
    fontSize: 33px
    fontWeight: 600
    lineHeight: 1.12
    letterSpacing: -0.02em
  headline-md:
    fontFamily: EB Garamond
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.01em
  body-lg:
    fontFamily: EB Garamond
    fontSize: 18.5px
    fontWeight: 400
    lineHeight: 1.62
  body-md:
    fontFamily: EB Garamond
    fontSize: 16.5px
    fontWeight: 400
    lineHeight: 1.58
  body-sm:
    fontFamily: EB Garamond
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label-caps:
    fontFamily: EB Garamond
    fontSize: 10.5px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.18em
  label-mono:
    fontFamily: IBM Plex Mono
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
  numeral-xl:
    fontFamily: IBM Plex Mono
    fontSize: 38px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.03em
rounded:
  none: 0px
  sm: 2px
  md: 3px
  lg: 4px
  xl: 6px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 30px
  xl: 64px
  gutter: 26px
  margin: 40px
  measure: 64ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.md}"
    padding: 12px
  button-secondary:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.md}"
    padding: 12px
  card-article:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  badge-label:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.sm}"
---

# Sable Court

## Overview

Sable Court has exactly one hue. Every colour in the palette — ground, ink,
primary, accent, all five chart series — is the same warm brown at a different
lightness, and there is no mechanism in the system for introducing a second one.

That constraint forces every other decision. Hierarchy is tone and type size.
Status has to be spelled out in words instead of shown in green or red. A chart
must be readable in one colour, which usually means it should be a table.

Use it where seriousness and continuity matter more than reaction speed.

Personality: sober, old, quiet. It should look like it has existed for longer
than the company has.

## Colors

One hue, five lightnesses, and that is the entire specification.

- **Ground (#F2E7DF):** Warm ivory.
- **Ink (#2E1E12):** The same brown at very low lightness.
- **Primary (#593215):** The same brown, mid-dark. Links and the underline that
  marks a current item.
- **Accent (#8C694E):** The same brown, mid. Secondary marks and the rule under
  a section title.
- **Destructive** is the only permitted exception, and it is deliberately
  muted — a brick that is nearly brown. If something is truly destructive, the
  copy has to say so; the colour will not carry it alone.

## Typography

EB Garamond for display *and* body — an old-style serif doing all the reading
work — with IBM Plex Mono for references and figures.

- **Display:** EB Garamond at 54px, weight 500. Set at this size the old-style
  forms read as authority rather than decoration.
- **Body:** EB Garamond at 16.5-18.5px with a 1.62 line height and a strict 64ch
  measure. This theme is for documents.
- **Labels:** sentence case, small caps where the face supports it, otherwise
  11px regular in muted-foreground. Nothing is uppercase.
- **References and figures:** IBM Plex Mono at 12px, so a citation or a docket
  number is visibly a different kind of thing.

## Layout

A single-column document layout with a 64ch measure centred in a 1120px frame,
plus a persistent left margin column at 200px for section numbers, dates and
cross-references — the margin is where the apparatus lives, not the content.

Vertical rhythm is 8px. Sections are separated by 64px and a hairline rule that
stops at the measure rather than running full-bleed.

## Elevation & Depth

Nothing is elevated. There are no shadows and no fills that differ from the
page by more than one tonal step. A card is a region with a hairline rule around
it and 24px of padding.

## Shapes

Nearly square — 4px on cards, 3px on buttons, 2px on badges. The radius exists
only so the hairlines do not look mitred.

Images are grayscale, hard-cropped, and given a 1px rule. Photography is used
sparingly and never full-bleed.

## Components

- **Buttons:** hairline border, card fill, 3px radius, 12px padding. The primary
  button is a solid mid-brown with ivory text. There is no third button style.
- **Documents:** the main component. A title, a mono reference in the left
  margin, a 64ch body, and footnotes at 12px separated by a short rule.
- **Tables:** ruled rows, no fills, mono figures. Column headers are italic
  rather than bold.
- **Inputs:** hairline box, 3px radius, no fill change on focus — the border
  darkens by one tonal step instead.
- **Badges:** hairline outline, no fill, sentence case.

## Do's and Don'ts

- Do express status in words, not in colour.
- Do keep the measure at 64ch even when there is room for more.
- Do put dates, numbers and references in the left margin.
- Don't introduce a second hue for any reason, including success and error.
- Don't bold a heading when a size change will do.
- Don't use a fill to separate two regions; use a rule.
- Don't animate anything but tone.