# Referent — design exploration · eight siblings

Brand language exploration for Referent. **Eight sibling color stories**, all derived from the warm cream and transitional serif the live site at [referent.law](https://referent.law/) already speaks. Six cover the wider spectrum (bronze through graphite); the last two — **Antique** and **Champagne** — drill deeper into the bronze/gold family for a richer-saturated and a paler-luminous read of the same hue. Each sibling tweaks a single hue and one quiet typographic note. The chassis stays put.

## Quick start

```bash
# from the repo root
open docs/design-exploration/index.html
```

That opens the **8-up master comparison page**, each card themed in its direction's palette. Click any card for the full direction.

If you want a real local server (some browsers nag about font loading from `file://`):

```bash
cd docs/design-exploration
python3 -m http.server 8000
# then visit http://localhost:8000
```

## Light + dark

Every page (master index and all eight directions) ships with a **light / dark theme toggle** in the top bar. The toggle:

- Defaults to your OS preference on first visit.
- Persists your choice in `localStorage` (`referent-theme`).
- Updates if you change OS theme — until you flip it manually.

Each direction has its own dark palette. The hue character holds in both modes.

## What's in here

```
docs/design-exploration/
├── BRIEF.md                  # positioning, audience, voice, anti-refs (read this first)
├── README.md                 # you are here
├── index.html                # 8-up master comparison page
├── shared/
│   ├── reset.css             # tiny shared CSS reset
│   ├── theme-toggle.css      # toggle styling (inherits from each direction)
│   └── theme-toggle.js       # toggle behavior + localStorage persistence
├── scripts/
│   ├── generate-directions.mjs  # rebuilds 02–08 from bronze template
│   └── generate-tokens.mjs      # rebuilds tokens.md for 02–08
└── directions/
    ├── 01-bronze/            # current spec polished · cream + olive bronze
    ├── 02-brass/             # warmer · ivory + warm brass
    ├── 03-oxblood/           # authority · cream + oxblood seal
    ├── 04-sage/              # cooler · linen + sage olive
    ├── 05-sienna/            # warmer earth · cream + burnt sienna
    ├── 06-graphite/          # neutral · cream + warm graphite
    ├── 07-antique/           # richer bronze · honey + antique gold
    └── 08-champagne/         # pale gilt · bone + pale champagne
```

Each direction folder has:

- `index.html` — single scrollable bento brand book. Cover · palette · type · applied hero · voice · spec · footer.
- `tokens.md` — OKLCH values (light + dark), type stack, micro-shift note, motion spec, when-to / when-not.

## How to use this

1. **Skim** the master `index.html`. The six cards are colored in their own palette so the gestalt read is instant.
2. **Open three full directions** in tabs — your favorite plus two others.
3. **Toggle dark on each.** The hue must hold in both modes; some siblings (oxblood, sage) shift more than others.
4. **Read the closing fold** of each: "When to / When not to." That's where the real decision lives.
5. **Pick one.** Or merge two with a sentence ("Bronze paper with the oxblood stamp on emphasis only").

## The eight siblings

The first six cover the wider hue spectrum. The last two are the **bronze/gold family deep cut** — Antique pushes saturation, Champagne pulls lightness — for direct A/B against Bronze and Brass.

| # | Name | Paper | Accent | Micro-shift | Family |
|---|---|---|---|---|---|
| 01 | **Bronze** | `#FFF5D4` | `#948A68` | reference variant — none | bronze/gold |
| 02 | **Brass** | `#F8F0DA` | `#B8956C` | wider eyebrow tracking (0.26em) | bronze/gold |
| 03 | **Oxblood** | `#FFF5D4` | `#8C3A36` | drop-cap on long-form lede | red |
| 04 | **Sage** | `#F4F1E5` | `#7A8970` | body lifts to 18px / 1.62 | green |
| 05 | **Sienna** | `#FFF5D4` | `#B66A4C` | old-style figures on body | terracotta |
| 06 | **Graphite** | `#FAF6E8` | `#5E5A4D` | thinner rules + Inter Tight UI | neutral |
| 07 | **Antique** | `#F8EFD8` | `#A47842` | display weight 500 · hero leading 0.92 | bronze/gold · richer |
| 08 | **Champagne** | `#FCF6E5` | `#D4B587` | hairline frontispiece · two-line italic deck | bronze/gold · paler |

All eight lead with **Baskervville** (Tiempos analog) for display + body, **Inter** for UI/eyebrows, **JetBrains Mono** for metadata. Production target: license Tiempos Headline + Söhne + Söhne Mono.

### The bronze/gold family side-by-side

| Sibling | Position | Best for |
|---|---|---|
| 02 Brass | warmer than bronze, lighter than antique | luminous, more present |
| 01 Bronze | the reference · current site | balanced, restrained |
| 07 Antique | richer than bronze, more saturated | confident, institutional |
| 08 Champagne | paler than bronze, less saturated | refined, ceremonial |

## Regenerating

If you tweak a token in a sibling's config and want to reflow the HTML:

```bash
node docs/design-exploration/scripts/generate-directions.mjs
node docs/design-exploration/scripts/generate-tokens.mjs
```

Both scripts treat `01-bronze/index.html` and the inline configs as the source of truth. Hand-edits to `02-brass` through `08-champagne` will be **overwritten** on regen.

## What this is NOT

- Final logos (no glyph art on this pass — wordmarks only).
- App code changes (nothing in `apps/client/` is touched).
- A PRODUCT.md or DESIGN.md (those come after we pick a direction).
- A marketing site.

## What comes next

After picking a direction:

1. Author full `DESIGN.md` with the chosen direction's tokens (light + dark).
2. Commission glyph/logomark exploration grounded in the chosen language.
3. Build a real marketing landing page in the chosen direction.
4. Migrate `apps/client/` tokens to match (or hold the app in monochrome and let the brand carry the personality marketing-side).

The wrong outcome of this exploration is "they all look fine, let's commission a seventh." Pick one. Or merge two.