Quorum

Insider network duotone

Paper / ink two-tone with a single rich-blue accent that marks insiders, links, and focus rings. Quiet typographic confidence — restrained color, tabular numerals, generous airspace, serif Mondwest-style display paired with neogrotesque body.

Palette

Install the full kit

Drops 4 doc/token files plus 6 starter components.

DESIGN.md

# Quorum — Design Language

> Founder-network duotone. Paper / ink with a co-founder blue. Quiet typographic confidence; the design recedes so the network does the talking.

## Identity

Quorum reads like a private members' brochure for a venture community — a printed quarterly that earned a website. The page is `#fefffc` paper, the type is `#171717` ink, and a single rich blue (`#0a6ee4`) carries every co-founder reference and every interactive surface. There's no flash. Visual character comes from precise typographic detail (tabular numerals for clocks, negative tracking on display, mixing serif Mondwest with neo-grotesque AF) and generous white space. Cards float on cream like type-specimen plates.

The design's most distinctive moment is **the co-founder color treatment** — anywhere a co-founder's name appears in the body, it shifts to `--accent` blue. It's a low-effort visual cue that does two jobs: it lets readers skim the network, and it signals which entities are insiders.

## Palette

| Token | Value | Role |
|-------|-------|------|
| `--background` | `#fefffc` warm paper | Page surface |
| `--foreground` | `#171717` ink | Body copy |
| `--card` | `#ffffff` pure white | Card / panel fill |
| `--popover` | `#ffffff` | Floating elements |
| `--primary` | `#1f1f29` near-black | Primary CTA bg |
| `--primary-foreground` | `#ffffff` | Text on primary |
| `--secondary` | `#f4f4f5` | Secondary chip bg |
| `--muted` | `#f4f4f5` | Subtle dividers, hover fills |
| `--muted-foreground` | `#6b6b6b` ink-soft | Secondary text |
| `--accent` | `#0a6ee4` co-founder blue | Names, links, focus rings, one CTA |
| `--accent-foreground` | `#ffffff` | Text on blue |
| `--accent-deep` | `#134eaa` | Hover/active state for blue |
| `--border` | `rgba(23,23,23,0.08)` | Hairline borders |
| `--ring` | `rgba(23,23,23,0.2)` | Focus ring |

Static brand tokens (in `@theme`):

| Token | Value | Use |
|-------|-------|-----|
| `--color-quorum-paper` | `#fefffc` | Surface |
| `--color-quorum-ink` | `#171717` | Type |
| `--color-quorum-ink-soft` | `#6b6b6b` | Secondary type |
| `--color-quorum-ink-muted` | `#9c9c9c` | Tertiary, captions |
| `--color-quorum-card-dark` | `#1f1f29` | Inverted card surface |
| `--color-quorum-blue` | `#0a6ee4` | Co-founder blue |
| `--color-quorum-blue-deep` | `#134eaa` | Co-founder blue, hover |

## Typography

### Families

| Family | Token | Role |
|--------|-------|------|
| AF (sans, Arial fallback) | `--font-af` | Default — body, UI, most h1s |
| Mondwest (serif, Georgia fallback) | `--font-mondwest` | Editorial headings, pull quotes |
| Geist Mono / SF Mono | `--font-mono` | Clocks, IDs, section numbers, hashes |

### Scale

| Tier | Size | Weight | Tracking | Line-height |
|------|------|--------|----------|-------------|
| Display | `clamp(48px, 6vw, 96px)` | 400 | `-0.32px` | `1.05` |
| H1 | `clamp(36px, 4vw, 64px)` | 400 | `-0.28px` | `1.1` |
| H2 | `clamp(28px, 3vw, 44px)` | 400 | `-0.02em` | `1.15` |
| H3 | `20px` | 400 | `-0.01em` | `1.25` |
| Body | `16px` | 400 | `0` | `1.5` |
| Body small | `14px` | 400 | `0` | `1.5` |
| Caption | `13px` | 400 | `0.01em` | `1.4` |
| Mono / numeric | `15px` | 400 | `0` | `1` |

All weights are `400`. AF carries weight via its custom stylistic set (`ss01`), not via font-weight.

### OpenType features

```css
body {
  font-feature-settings: "ss01", "kern";
}
```

This wakes up AF's signature alternates. Always include `ss01`.

### Tabular numerals

Apply `.tabular-nums` to anything counting or aligning by digit:

```tsx
<time className="tabular-nums">21:48 EST</time>
<span className="tabular-nums">$0 — $1,200,000</span>
```

### Tracking utilities

```css
.quorum-tracking-28 { letter-spacing: -0.28px; }  /* H1 */
.quorum-tracking-32 { letter-spacing: -0.32px; }  /* Display */
.quorum-text-balance { text-wrap: balance; }       /* multi-line headlines */
```

## Spacing & geometry

### Spacing scale

| Token | Value | Use |
|-------|-------|-----|
| `space-2` | `8px` | Inline gap |
| `space-4` | `16px` | Chip padding |
| `space-6` | `24px` | Container gutter |
| `space-8` | `32px` | Card internal |
| `space-20` | `80px` | Section vertical (mobile) |
| `space-28` | `112px` | Section vertical (desktop) |

### Container

```html
<div class="mx-auto max-w-7xl px-6">
```

`max-w-7xl` = `1280px`. Full-bleed sections (`100vw`) are allowed via `.full-page-width` for dividers and CTAs.

### Radius

`12px` baseline. No pills (`9999px`), no square corners. Computed radius scale:

| Token | Value |
|-------|-------|
| `--radius` | `12px` |
| `--radius-sm` | `7.2px` (0.6×) |
| `--radius-md` | `9.6px` (0.8×) |
| `--radius-lg` | `12px` (1×) |
| `--radius-xl` | `16.8px` (1.4×) |
| `--radius-2xl` | `21.6px` (1.8×) |

### Borders

Hairlines only:

```css
border: 1px solid var(--border);  /* 8% ink */
```

Never `border-2` or thicker.

## Motion

- Smooth scroll on anchor links (CSS-level, already wired on `html`).
- Hover transitions: opacity 0.7 or `--accent → --accent-deep`, 200ms ease.
- No parallax. No scroll-jacking. No transforms beyond a 1–2px translate on hover for cards.
- Marquee logos: continuous, 30s+ — Quorum's pace is patient.

## Voice & copy

- Quiet, declarative, in-the-know.
- Co-founder names are styled `text-[color:var(--accent)]`.
- Headlines are short observations or invitations: *"A network for builders."* / *"Become a coordinator."*
- CTAs are second-person imperative: *"Become a member"*, *"Read the manifesto"*, *"Apply to coordinate"*.
- Pricing and amounts are mono + tabular: *"$200/year"*, *"21:48 EST"*.

## Co-founder treatment

Anywhere a co-founder appears in long-form body or a list:

```tsx
<p className="text-base leading-6">
  Hosted by <span className="text-[color:var(--accent)] hover:text-[color:var(--accent-deep)] transition-colors duration-200">First Last</span>, founder of …
</p>
```

Rules:
- Only proper names of network co-founders get this treatment.
- Don't underline (color is the signal).
- Hover state shifts to `--accent-deep` (`#134eaa`).
- If the section uses `--accent` for a CTA, skip blue on names within that section to avoid competition.

## Component recipes

### Membership CTA
Centered radial halo behind a Mondwest title, body copy, pill CTA + price line, quiet disclaimer underneath. Halo uses `--accent` at 4% opacity.

### Case card grid
Two- or three-column portrait case cards. Each card is `--card` (white) with `border var(--border)`, 12px radius, a custom gradient strip on the left edge, scope/category labels in mono, and a giant Mondwest brand name.

### Manifesto numbered
12-column layout: massive Mondwest accolade number on the left (col 1–5), body on the right (col 7–12), then a 3-col grid of numbered manifesto points below.

### Clock / coordinator section
A live clock or coordinator listing — uses `.tabular-nums`, mono family, near-black on paper. The clock is the only "live" element on the page; everything else is static.

## Anti-patterns

- ❌ Pure white `#ffffff` as the page background — use `#fefffc` (`--background`).
- ❌ Pills (`rounded-full`) — Quorum uses `12px` radius universally.
- ❌ Thick borders (`border-2`+).
- ❌ Bold weights — AF gets its character from `ss01`, not from font-weight.
- ❌ Blue on backgrounds (`bg-[color:var(--accent)]`) for large surfaces.
- ❌ Mondwest for body copy. Serif is for editorial titles only.
- ❌ Non-tabular nums on prices or clocks.

## Accessibility

- `--accent` (`#0a6ee4`) on `--background` (`#fefffc`) passes AA at 18px+ and at 14px bold-equivalent. For tighter sizes, use `--accent-deep` (`#134eaa`).
- Focus rings: 2px solid `--ring` with 2px offset. Don't override per component.
- Smooth-scroll already wired; respect `prefers-reduced-motion` by overriding `scroll-behavior: auto` if needed.
- The clock element should announce updates via `aria-live="polite"`.

## What ships with the pack

- `tokens.css` — `@theme inline` block + scoped vars on `[data-designlang="quorum"]`, including `.quorum-tracking-28`, `.quorum-tracking-32`, `.quorum-text-balance`, `.tabular-nums`.
- `CLAUDE.md` / `AGENTS.md` — agent guidance.
- Components: `membership-cta`, `case-card-grid`, `manifesto-numbered`, `category-grid`.
- Foundations — `Button`, `Card`.

Components (4)