Foundry

Type-foundry editorial

Warm grey-cream surface with deep-ink type and six named typeface roles (display, display italic, editorial, specimen, reading, UI). Signature 32px section radius. Sage accent reserved for trial / free / success indicators.

Palette

Install the full kit

Drops 4 doc/token files plus 7 starter components.

DESIGN.md

# Foundry — Design Language

> Type-foundry editorial. Warm cream surface, deep ink, six named serif faces, signature 32px section radius. Every page is a specimen plate.

## Identity

Foundry is a type foundry's design language. Every surface is a stage for type. The page is `#e7e4e0` warm grey-cream, with `#faf8f4` cream cards floating on top. Type is `#2b1b1b` deep ink — never `#000000`. There are **six** named typeface tokens — UI for UI sans, Reading for general body, plus four serifs (Display regular, Display italic, Editorial, Specimen) for headlines, pull quotes, and specimen displays. Section corners use a distinctive `32px` radius — large enough to read as architectural, not decorative.

A muted sage accent (`#c8e6c1`) appears **only** on trial-pack badges, free-tier indicators, and success states. It is not a decorative color. The rest of the page is content: type at every scale, hairline pills, and large architectural sections.

## Palette

| Token | Value | Role |
|-------|-------|------|
| `--background` | `#e7e4e0` warm grey-cream | Page surface |
| `--card` | `#faf8f4` cream | Card surfaces, hero block fills |
| `--foreground` | `#2b1b1b` deep ink | Body copy, display type |
| `--muted-foreground` | `#5b4a4a` ink-soft | Secondary copy, captions |
| `--secondary` | `#d8d3cb` pill | Pill chips, button surfaces |
| `--muted` | `#efece7` grey | Subtle dividers, hover fills |
| `--accent` | `#c8e6c1` sage | Trial / free / success badges |
| `--accent-foreground` | `#2b1b1b` | Text on sage |
| `--border` | `#d8d3cb` | Hairlines |
| `--destructive` | `#b94a3c` | Error state |

Static brand tokens:

| Token | Value |
|-------|-------|
| `--color-foundry-cream` | `#faf8f4` |
| `--color-foundry-bg` | `#e7e4e0` |
| `--color-foundry-light-grey` | `#ebe8e3` |
| `--color-foundry-grey` | `#efece7` |
| `--color-foundry-ink` | `#2b1b1b` |
| `--color-foundry-ink-soft` | `#5b4a4a` |
| `--color-foundry-pill` | `#d8d3cb` |
| `--color-foundry-pill-soft` | `#e1ddd5` |
| `--color-foundry-accent-green` | `#c8e6c1` |
| `--color-foundry-dark` | `#2a1d1c` |

## Typography

Six families. Each has one role. Never substitute.

| Family | Token | Role |
|--------|-------|------|
| UI | `--font-foundry-sans` | UI sans — buttons, captions, nav, eyebrows |
| Reading | `--font-foundry-interface` | Body text, long-form, footnotes |
| Display | `--font-foundry-romie` | Display headlines |
| Display Italic | `--font-foundry-romie-italic` | Emphasis inside headlines, pull quotes |
| Editorial | `--font-foundry-kalice` | Editorial subheads, secondary serif |
| Specimen | `--font-foundry-ninna` | Specimen displays, font-card titles |

### Scale

| Tier | Family | Size | Weight | Tracking | Line-height |
|------|--------|------|--------|----------|-------------|
| Specimen | Specimen | `clamp(96px, 14vw, 192px)` | 400 | `0` | `0.95` |
| Display | Display | `clamp(64px, 8vw, 128px)` | 400 | `-0.01em` | `1.0` |
| H1 | Display | `clamp(48px, 5vw, 80px)` | 400 | `0` | `1.05` |
| H2 | Editorial | `clamp(32px, 4vw, 48px)` | 400 | `0` | `1.1` |
| H3 | Reading | `20px` | 450 | `0` | `1.25` |
| Body | Reading | `14px` | 450 | `0` | `1.5` |
| Body large | Reading | `16px` | 450 | `0` | `1.55` |
| Pull quote | Display Italic | `32–48px` | 400 | `0` | `1.2` |
| Eyebrow | UI | `11–12px` | 500 | `0.08em` | `1` (uppercase) |
| Caption | UI | `12px` | 400 | `0.02em` | `1.4` |

Base body is set to `14px` on `body`. Reading's stylistic axis covers most weight needs without bolding.

### Specimen sections

The reason the site exists. Sections that show off a typeface in use:

```tsx
<section className="foundry-section bg-card p-12 md:p-16">
  <p className="plinth-eyebrow text-muted-foreground">Display</p>
  <h1 className="font-foundry-specimen text-[clamp(96px,14vw,192px)] leading-[0.95]">
    Aa Bb Cc
  </h1>
  <p className="font-foundry-reading mt-8 text-base leading-[1.55]">
    A sturdy text serif with a sharp side. Made for editorial work and at home in
    long-form running text or oversized display.
  </p>
</section>
```

## Spacing & geometry

### Container

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

`max-w-7xl` = `1280px`. Hero specimen sections may grow to `max-w-[1440px]`.

### Radius

| Token | Value | Use |
|-------|-------|-----|
| `--radius` | `12px` | Buttons, inputs, cards |
| `--radius-sm` | `7.2px` (0.6×) | Tighter elements |
| `--radius-md` | `9.6px` (0.8×) | Medium |
| `--radius-lg` | `12px` (1×) | Default |
| `--radius-xl` | `16.8px` (1.4×) | Large cards |
| `--radius-2xl` | `21.6px` (1.8×) | XL cards |
| `--radius-section` | `32px` | **Signature section radius** — heroes, CTAs, feature wrappers |

The 32px section radius is the language's most distinctive geometric element.

### Section composition

Wrap major sections in `.foundry-section`:

```tsx
<section className="foundry-section bg-card p-12 md:p-16">
  {/* hero, CTA panel, feature block */}
</section>
```

For sections that need only top or bottom rounding (stack edges):

```tsx
<section className="foundry-section-t bg-card pt-12">…</section>
<section className="foundry-section-b bg-card pb-12">…</section>
```

### Pills

```css
.foundry-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 9999px;
  background: var(--color-foundry-pill);
  color: var(--foreground);
  font-size: 12px;
  letter-spacing: 0.02em;
}
```

Pills are used for download buttons, category chips, trial badges. Their `9999px` radius is the **only** exception to the language's 12px-to-32px curve language.

## Motion

- Smooth scroll wired on `html`.
- Hover: 200ms opacity 0.85 or bg-color shift. No transforms.
- Specimen sections may include 4–8s loops of font-weight or variable-axis tweens.
- No parallax. No scroll-jacking.

## Voice & copy

- Foundry-speak. Type personalities described in human terms.
- *"A sturdy text serif with a sharp side."*
- *"Made for editorial work."*
- *"Display is a workhorse with a sense of humor."*
- CTAs: *"Try it free"*, *"Download trial pack"*, *"Get the family"*, *"License Display"*.
- Section titles are noun phrases referencing typefaces: *"Display"*, *"Editorial"*, *"Specimen in use"*, *"Pairings"*.
- Numbers are precise but quiet: *"5 weights, 1 italic axis"*, *"From $25"*.

## Component recipes

### Hero specimen
- `.foundry-section` (32px radius) wraps a cream card with `p-12 md:p-16`.
- Eyebrow (UI 12px uppercase) → giant Specimen `Aa Bb` characters → body text in Reading.
- One CTA pill (`.foundry-pill`) at the bottom-left.

### Trial font card
- Two-pane card: left = title + `.foundry-pill bg-accent` (sage "Free"), download button. Right = gradient specimen tile with a giant `Aa` in the showcased typeface.
- Card radius: `--radius-xl` (16.8px).

### Pairings section
- 3-column grid showing fonts in conversation: each card uses a different family pair (Display + UI, Editorial + Reading, Specimen + Reading).
- Card bg `--card` (cream), card border `--border`.

### Manifesto
- Single full-width `.foundry-section`.
- Left col: massive Display numeral `01–07`.
- Right col: short paragraph in Reading explaining each principle.

### Footer
- `.foundry-section-t` (top-rounded only — sits flush with the bottom of the page).
- Dark variant: bg `--color-foundry-dark`, type cream.
- Three columns: typefaces, foundry, social. Eyebrows + Reading links.

## Anti-patterns

- ❌ Pure white `#ffffff` for the page bg. Use `#e7e4e0` (`--background`).
- ❌ Pure black `#000000`. Use `#2b1b1b` (`--foreground`).
- ❌ Sage accent (`--accent`) on anything other than free/trial/success indicators.
- ❌ Mixing families with no role distinction. Don't put Editorial in body, Display in nav.
- ❌ Square corners on cards or buttons. The 12–32px curve is the language.
- ❌ Pure-white drop shadows. Use the `--border` hairline for elevation suggestion.
- ❌ `font-bold` (700). Reading uses weight 450–500 max; serifs stay at 400.

## Accessibility

- `--foreground` (`#2b1b1b`) on `--background` (`#e7e4e0`) passes AA at body size. Don't drop to lighter inks for caption text — use `--muted-foreground` (`#5b4a4a`) which still passes.
- Sage accent (`#c8e6c1`) is decorative-only — never carries information by color alone (always paired with the word "Free" or a check icon).
- Specimen sections use type-as-image semantically; provide `aria-label` for screen readers describing the typeface.
- Web fonts are loaded via `font-display: swap` — content stays readable in fallback (Georgia for serifs, system sans for sans).
- Focus rings: `--ring` (`#5b4a4a`) at 2px with 2px offset.

## Font files

The pack ships **token declarations only**, not woff2 files. To use the full language:

1. Copy the woff2 files (Display, Display Italic, Editorial, Specimen, Reading, UI) into your project's `/public/fonts/` directory.
2. Add the `@font-face` declarations to your global stylesheet:

```css
@font-face {
  font-family: "Display";
  src: url("/fonts/romie-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* repeat for DisplayItalic, Editorial, Specimen, Reading, UI */
```

3. The token CSS already references these family names with serif/sans fallbacks (Georgia / system sans), so the language degrades gracefully if a font fails to load.

## What ships with the pack

- `tokens.css` — full token set scoped to `[data-designlang="foundry"]`. Six font tokens, the `.foundry-section` 32px radius utility, `.foundry-section-t`, `.foundry-section-b`, `.foundry-pill`.
- `CLAUDE.md` / `AGENTS.md` — agent guidance.
- Components: `hero-cinematic`, `navbar-editorial`, `bento-features`, `cta-ticket`, `diagram-tabs`, `footer-marquee-backers`, `usp-strip`, `trial-font-card`.
- Foundations — `Button`, `Card`.

Components (8)