## Design Context

### Users

The operator and a small, deliberately-invited circle. They visit tessera _infrequently_ — to sign in, accept an invite, mint a new invite, register a downstream OAuth client, link a GitHub identity. Sessions are short, transactional, ceremonial: the user is here because something specific needs to happen, then they are _gone_.

Tessera is the front door of the building, not a room you sit in. Anvil, bland, flamemail, git-on-cloudflare — those are the workshops. Tessera is the gate, the keyring, the tile pressed against the lockplate.

**Primary use cases**

- Sign in (and _leave_ — usually onward to the actual destination).
- Accept an invite (a one-time admission).
- Manage linked identities on `/account` (rare, quick, gone).
- Mint invites or register OAuth clients on `/admin/*` (operator-only; weekly at most, often less).

### Brand Personality

**Boring. Secure. Lively in the small moments.**

Auth software is supposed to be uneventful — that's the whole job. So the form is a form. Two inputs, a captcha, a button. No tagline, no reassurance copy, no "Welcome back!" The user knows what they are here to do. Get out of the way.

But not lifeless. The personality budget is small and spent precisely. It lives in:

- the brand glyph rotating six degrees on hover,
- the burnished gold appearing exactly once per page (the primary CTA, or the heart in the footer),
- a serif H1 that carries weight in posture rather than ornament,
- one editorial italic line at the bottom of the sign-in page — _"A tessera, in Roman antiquity, is a small ceramic or bronze tile bearing an identification mark — presented at a checkpoint, recognized, admitted"_ — placed there the way a museum wall card sits below an exhibit.

The sum is "well-made and a little bit warm." Like a stamped library card from a place that takes its job seriously, with a small good-luck object on the desk. Boring, but observed by a person.

A _tessera_ in Roman antiquity was a small ceramic or bronze tile bearing an identification mark — presented at a checkpoint, recognized, admitted. An object of trust between people, hand-cut and unique. The product borrows that frame thematically: the tile is presented, the user is admitted, nobody makes a fuss.

If tessera were a place, it would be the security desk in a research-library lobby — quiet, practiced, the desk has been there longer than you have. If it were a person, it would be the librarian who knows where everything is and doesn't volunteer information you didn't ask for.

### Emotional Goals

**Trust and recognition without ceremony.** The user should feel _seen and admitted_, not _processed_. Confidence comes from sparseness — empty space says "we know what we're doing here." The opposite of what tessera should feel like is the SaaS-onboarding cheerful tone. Closer to a quiet nod than a wave.

When the operator returns at midnight to revoke an OAuth client, the interface should feel like the lights coming on in a room they already know. Not "Hi! Let's get you started." Just — _here it is_.

### Aesthetic Direction

**Tone**: Editorial restraint with a thread of heritage. The references aren't dashboards. They're the Penguin Modern Classics covers, the museum exhibit caption beside an artifact, the typeset library catalog card, the warm-cream pages of a 1960s university press monograph. Spectral does the ceremonial work on H1s; Hanken Grotesk does the steady labor everywhere else. Burnished gold (`#c89738`) appears rarely, never as decoration.

**Reference anchors**

- **jam.dev** — what tessera takes from this is the confidence to leave a screen sparse. A sign-in page does not need a feature grid below the form. It does not need a hero. It needs the form.
- **charm.land** — what tessera takes is _warmth_. Despite the institutional tone, small details (the glyph rotation on hover, the gold heart, the considered serif italic) say "a human chose this." Without that, "boring" becomes "lifeless."
- **Editorial / institutional print** — museum captions, the typesetting of a Penguin Modern Classics title page, an exhibit catalog. The combination of Spectral, italic editorial copy, warm neutrals, and sparse pages comes from this register.

**Anti-references**

- **Auth0 / Okta / Clerk dashboards** — the entire enterprise-IDM aesthetic. Tessera is the opposite: hand-cut, single-purpose, no "Configure SSO" sidebars, no "Identity Provider Setup Wizard," no integration logos in a grid.
- **Crypto-wallet "secure vault" UIs** — neon teal/electric blue on near-black, gradient meshes, "your keys, your control" hero copy. Tessera does not lean on the security cliché.
- **Costume-Roman aesthetic** — no laurel wreath icons, no SPQR, no imperial purple, no Trajan-column typography. The Roman frame is _thematic_, not literal.
- **AI-template dark mode** — neon accents, glow shadows, gradient text, generic "shield + checkmark" centered above hero copy, "Sign in to continue" tagline under every H1. Anything that could ship as a Vercel template default.
- **Notion-clone admin layouts** — sidebar + breadcrumb + endless cards. Tessera's admin surfaces are pages, not dashboards.

**Theme**: Dark, lifted-canvas (suite-standard, see Accessibility). The auth context is a browser tab open at a workbench, late evening, the user signing in to do something else.

### Accessibility — Astigmatism (suite-wide hard constraint)

Inherited from anvil/bland/flamemail. Hard constraint, not a preference:

- **Never pure white on pure black.** Body text ceiling: `zinc-200` on lifted dark. `zinc-100` reserved for headings only. Canvas stays at `#221f21` — never darker.
- **Minimum body font weight: 450.** No `font-light`, no `font-thin`. Light strokes halate on dark backgrounds for ~33% of users.
- **No hairline borders** at low opacity. Minimum effective: 1px at 40%+ opacity, or use a background tint instead.
- **Generous tracking on small text.** Sub-14px text gets `tracking-wide` or wider.
- **Test contrast on lifted surfaces**, not just `--canvas`. `zinc-400` on a `zinc-900` card is the real check.

### Design Principles

1. **Boring is the feature.** The sign-in form is a sign-in form. Two inputs, a captcha, a button. No tagline. No reassurance copy. No "Welcome back!" The user knows what they are here to do.

2. **Liveliness in the seams.** The personality budget is small and spent precisely: a hover rotation on the brand glyph, a single accent on the primary CTA, a serif H1 that carries weight, a gold heart in the footer, one italic editorial line on the sign-in page. These are the moments where the interface says "a person made this." Spread the budget thinner and everything turns generic.

3. **The serif is the signature.** Spectral on H1 is tessera's identity injection. Spreading it everywhere dilutes it. Body, labels, buttons, cards — all Hanken. The serif appears only where ceremonial weight matters: page titles, the brand mark in editorial copy, the H1 of the consent dialog, and the one italic line about Roman tessera tiles on the sign-in page.

4. **Gold is rare.** `accent-500` (`#c89738`) is the primary CTA, the active nav state, and the small heart in the footer. Never a background fill. Never a gradient. Never a decorative shadow. Its power is rarity.

5. **Trust the user to read.** No icon next to a button that already says "Sign in." No "or" divider with horizontal lines. No subtitle under the H1 explaining what tessera is. If a label or button text already names the action, the icon is redundant — drop it.

6. **Heritage, not costume.** The Roman frame is thematic — the warm neutrals, the gold accent, the editorial serif. It is never literal. No laurel iconography, no SPQR, no Trajan-column typography. The reader should sense weight without naming the source.

### Technical Constraints (suite-shared)

- **Dark mode only**, `html.dark`, `color-scheme: dark`.
- **Tailwind v4** with CSS-native `@theme`. No `tailwind.config.js`, no PostCSS.
- **React 19** + `react-router-dom` 7.
- **Fonts self-hosted via `@fontsource`**: Hanken Grotesk variable, JetBrains Mono variable, Spectral 400/500/600/700 + 400-italic. CSP locks `font-src` to `'self'` — auth surfaces make zero third-party requests.
- **Icons**: `lucide-react` pinned to `^0.546` so brand glyphs (Github) stay available — newer versions removed the trademark family.
- **No component library**, no shadcn, no Better Auth UI. Hand-coded primitives in `src/client/components/ui/`.
- **75ms default transition**, scoped to specific properties (`transition-colors`, `transition-transform`). Never `transition-all`.
- **60ms stagger** on entrance reveals, capped at 8 items.