# Referent — design exploration

Brand language exploration for Referent. **Twelve directions**, side-by-side, so we can pick one (or combine two) before committing to a full identity system.

## Quick start

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

That opens the **master comparison page** — twelve cards across two rounds, each card themed in its direction's palette. Click any card to view 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
```

## What's in here

```
docs/design-exploration/
├── BRIEF.md                  # positioning, audience, voice, anti-refs (read this first)
├── README.md                 # you are here
├── index.html                # master 4×3 comparison page (twelve cards)
├── shared/
│   ├── reset.css             # tiny shared CSS reset
│   └── ascii-wordmark.txt    # ASCII rendering of "Referent" (used by terminal directions)
└── directions/
    │  ── ROUND 01 ──
    ├── 01-folio/             # editorial, magazine-grade, dusty-rose accent
    ├── 02-counsel/           # editorial, old bookshop, brass accent
    ├── 03-lex/               # terminal-precise, dark warm graphite, phosphor accent
    ├── 04-margin/            # terminal-precise, light daylight workshop, rust accent
    ├── 05-hearth/            # warm, cream + sienna, committed
    ├── 06-pact/              # warm, sage + linen, trustworthy advisor
    │  ── ROUND 02 ──
    ├── 07-dossier/           # archival, manila + ink + stamp red, case file
    ├── 08-drafting/          # technical, paper + graphite + pencil-blue, blueprint
    ├── 09-broadsheet/        # editorial-loud, newsprint + ink + arterial red
    ├── 10-atelier/           # gallery, bone + wine, quietly expensive
    ├── 11-verdict/           # modernist, off-white + electric cobalt — NOT navy
    └── 12-pacific/           # coastal, fog + driftwood + slate teal, mature
```

Each direction folder has:

- `index.html` — single scrollable page, four surfaces (wordmark, landing hero, color palette, product surface peek)
- `tokens.md` — OKLCH values, type stack, motion spec, semantic role table

## How to use this

1. **Skim** the master `index.html`. Get a gestalt read on the spread.
2. **Read** `BRIEF.md` to remember what we're trying to be (and not be).
3. **Open three directions in separate tabs** — one editorial, one terminal/modernist, one warm/coastal. Rapid-switch. Which one feels like Referent?
4. **Try the anti-AI test on each:** "could Harvey or Legora look at this and want to copy it?" If yes, that direction failed. The right answer is the one they'd never make.
5. **Pick a direction or combine two.** Don't request a thirteenth.

## The two rounds

**Round 01 (the original six)** — three locked tonal lanes (editorial, terminal-precise, warm), two directions per lane covering different stylistic angles within each.

**Round 02 (register expansion)** — six new directions that fill registers the first round didn't cover:
- **Dossier** — archival/case-file aesthetic
- **Drafting** — technical/blueprint precision
- **Broadsheet** — bigger newspaper authority (vs. Folio's boutique magazine)
- **Atelier** — modern-gallery quietly-expensive
- **Verdict** — sans-first modernist with explicit "not navy" cobalt
- **Pacific** — Pacific NW coastal, mature, slightly melancholy

## Coverage map

| Lane | Light | Dark | Restrained | Committed | Sans-led | Serif-led | Mono-led |
|---|---|---|---|---|---|---|---|
| Folio | ✓ | | ✓ | | | ✓ | |
| Counsel | ✓ | | ✓ | | | ✓ | |
| Lex | | ✓ | ✓ | | | | ✓ |
| Margin | ✓ | | ✓ | | | | ✓ |
| Hearth | ✓ | | | ✓ | | ✓ | |
| Pact | ✓ | | | ✓ | | ✓ | |
| Dossier | ✓ | | ✓ | | | ✓ | |
| Drafting | ✓ | | ✓ | | ✓ | | |
| Broadsheet | ✓ | | ✓ | | | ✓ | |
| Atelier | ✓ | | | ✓ | | ✓ | |
| Verdict | ✓ | | | ✓ | ✓ | | |
| Pacific | ✓ | | | ✓ | | ✓ | |

Eleven light-mode directions (one of which the user can run dark with token swaps), one committed dark-mode direction (Lex). Six committed-color palettes, six restrained palettes. Type leadership splits across four sans-led, six serif-led, two mono-led.

## Font note

These prototypes use **free Google Fonts approximations** of the commercial faces called for in each direction. Each `tokens.md` lists both the prototype face and the production-license target. Production direction would license the actual faces. The shape of the typography decision is intact in the prototype.

## 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.
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).