---
version: alpha
name: Anthropic
description: "Ivory paper, a hairline rule, and one black band at the end."
colors:
  on-surface: "#141413"
  surface: "#FAF9F5"
  outline: "#D1CFC5"
  primary: "#E3DACC"
  ivory-medium: "#F0EEE6"
  chalk: "#F5F4ED"
  white: "#FFFFFF"
  ink-black: "#0F0F0E"
  slate-light: "#5E5D59"
  cloud: "#B0AEA5"
  stone: "#73726C"
  slate-faded-10: "rgba(20, 20, 19, 0.1)"
  slate-faded-60: "rgba(20, 20, 19, 0.6)"
  olive: "#788C5D"
  cactus: "#BCD1CA"
  coral: "#EBCECE"
typography:
  display-xl:
    fontFamily: Anthropic Sans
    fontSize: 64px
    fontWeight: 400
    lineHeight: 70.4px
    letterSpacing: 0em
  display-serif:
    fontFamily: Anthropic Sans
    fontSize: 72px
    fontWeight: 400
    lineHeight: 79.2px
    letterSpacing: 0em
  headline-1:
    fontFamily: Anthropic Serif
    fontSize: 52px
    fontWeight: 400
    lineHeight: 52px
    letterSpacing: 0em
  headline-1-reversed:
    fontFamily: Anthropic Serif
    fontSize: 52px
    fontWeight: 400
    lineHeight: 65px
    letterSpacing: 0em
  headline-4:
    fontFamily: Anthropic Serif
    fontSize: 32px
    fontWeight: 400
    lineHeight: 38.4px
    letterSpacing: 0em
  section-heading:
    fontFamily: Anthropic Serif
    fontSize: 24px
    fontWeight: 400
    lineHeight: 31.2px
    letterSpacing: 0em
  headline-6:
    fontFamily: Anthropic Serif
    fontSize: 19px
    fontWeight: 400
    lineHeight: 22.8px
    letterSpacing: 0em
  subheading:
    fontFamily: Anthropic Serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 22.4px
    letterSpacing: 0em
  body-l:
    fontFamily: Anthropic Serif
    fontSize: 24px
    fontWeight: 400
    lineHeight: 33.6px
    letterSpacing: 0em
  body-1:
    fontFamily: Anthropic Serif
    fontSize: 20px
    fontWeight: 400
    lineHeight: 31px
    letterSpacing: 0em
  body-3:
    fontFamily: Anthropic Serif
    fontSize: 15px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: 0em
  nav-link:
    fontFamily: Anthropic Serif
    fontSize: 15px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: -0.0375px
  caption:
    fontFamily: Anthropic Serif
    fontSize: 14px
    fontWeight: 400
    lineHeight: 16.8px
    letterSpacing: 0.15px
  body-4:
    fontFamily: Anthropic Serif
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16.8px
    letterSpacing: 0em
  mono-label:
    fontFamily: Anthropic Mono
    fontSize: 16px
    fontWeight: 400
    lineHeight: 22.4px
    letterSpacing: 0em
rounded:
  buttons-clickable-wraps: 8px
  cards-media-frames-illustration-tiles: 16px
  search-input: 12px
  home-launch-band-container: 24px
  split-cta-left-half: 8px
  split-cta-dropdown-half: 8px
  skip-link: 16px
  skip-link-2: 8px
  publication-rows-headers-bands: 0px
spacing:
  space-1: 4px
  space-2: 8px
  space-3: 12px
  space-4: 16px
  space-5: 24px
  space-6: 32px
  space-7: 40px
  space-8: 48px
  space-9: 64px
  space-10: 80px
  space-11: 96px
  band: 224px
---
# Anthropic — Style Reference

> Ivory paper, a hairline rule, and one black band at the end.

**Theme:** light

Two systems share a wordmark here. The home page is the warmer one — a Webflow build on ivory-medium paper, with an animated sans headline, oat release cards and a photographic launch band; the research index and the team pages are a cooler CSS-module system on ivory-light, built out of hairline tables, bordered publication rows and flat illustration tiles. The split falls at the nav: the home nav is a Webflow component with its own skip link and button classes, the research header is a module header that repeats identically across all three research pages. What holds them together is the ink and the paper — slate `#141413` on ivory, one family of warm neutrals, and a serif that carries every paragraph while the sans carries every heading. The signature move is the hairline: a 1px `#D1CFC5` rule under each publication row, doing the work that a card and a shadow would do in most systems. Depth is almost entirely absent — two shadows in four pages, both on illustration objects — so the page reads as printed matter rather than interface.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Ivory Light | `#FAF9F5` | `--swatch--ivory-light` | The research canvas and the header ground; also the ink on every dark band. Carries far more text than fill — treat it as a reversal colour first, a background second. |
| Ivory Medium | `#F0EEE6` | `--swatch--ivory-medium` | The home page's paper (`.page_wrap.u-bg-ivory-medium`). A half-step warmer than ivory light; the two never meet inside one page. |
| Oat | `#E3DACC` | `--swatch--oat` | The filled panel behind the home release cards. The warmest surface in the system and the only one that reads as a card — its scarcity is the signal. |
| Chalk | `#F5F4ED` | `--color-button-ground` | Ground of the full-width "See more" button on the research pages. A one-step lift off ivory light; never a page background. |
| White | `#FFFFFF` | `--swatch--white` | The search field's fill and the pre-footer headline's ink. The brightest paint in the system, spent on an input and a reversed title. |
| Slate Dark | `#141413` | `--swatch--slate-dark` | Primary ink, the primary button's fill and border, and the fill of the footer and pre-footer bands. The 60-30-10 anchor: ivory, slate, everything else. |
| Ink Black | `#0F0F0E` | `--color-ink-black` | The research header's CTA fill and nav link ink — a hair darker than slate, used where the header sits over ivory. Not interchangeable with slate in code. |
| Slate Light | `#5E5D59` | `--swatch--slate-light` | Secondary ink on the research pages: dates, category captions, text links. Never a fill. |
| Cloud | `#B0AEA5` | `--color-cloud-medium` | Footer link ink on the dark bands, plus the copyright line. Reads as a deliberate two-step drop from ivory so the group titles stay first. |
| Stone | `#73726C` | `--color-stone` | Ink of the "See more" button label. The quietest control text in the system — the button is a load-more, not a call to action. |
| Border Bone | `#D1CFC5` | `--_color-theme---border` | The structural hairline on the research pages: publication rows, section tops, side links, the search field. 1px, always. |
| Slate Faded 10 | `rgba(20, 20, 19, 0.1)` | `--swatch--slate-faded-10` | The home page's hairline — the spec sheet rules inside the release cards. Translucent so it sits on oat and ivory alike. |
| Slate Faded 60 | `rgba(20, 20, 19, 0.6)` | `--color-faded` | Muted metadata ink on the home index rows ("Announcements"). A faded slate, not a grey. |
| Olive | `#788C5D` | `--swatch--olive` | Illustration-tile fill on the research team pages, and the one saturated colour carrying a shadow. Editorial, never a button. |
| Cactus | `#BCD1CA` | `--swatch--cactus` | Illustration-tile fill on the alignment page. Pastel plate for black line art; no text sits on it. |
| Coral | `#EBCECE` | `--swatch--coral` | Illustration-tile fill on the economics page. Same role as cactus — a plate, not a brand accent. |

**Declared but unpainted:** `--swatch--clay`, `--swatch--accent`, `--swatch--sky`, `--swatch--heather`, `--swatch--fig` and `--swatch--ivory-dark` sit in `:root`; the painted inventory across these four pages carries olive, cactus and coral from that family and no others *(declared, not painted)*.

## Tokens — Typography

### Anthropic Sans — every heading, every nav link, every label and every button; 400 to 700, with 700 reserved for the two display sizes · `--_typography---font--display-sans`

- **Substitute:** Arial (the declared fallback), Helvetica Now Display, Inter
- **Weights:** 400, 500, 600, 700
- **Sizes:** 12px, 14px, 15px, 16px, 19px, 24px, 32px, 52px, 64px
- **Line height:** 1.0 at 52px, 1.1 at 64px, 1.2 at 19–32px, 1.3 at 24px, 1.4 everywhere at 12–16px
- **Letter spacing:** normal on all headings; −0.0375px on 15px nav links, −0.24px on the home footer's 12px links, +0.15px on 14px captions
- **Role:** Structure and interface. The display sizes (64px/700 on the home hero, 52px/700 on the research headings) are the system's only bold type; everything from 19px down sits at 400–600.

### Anthropic Serif — every paragraph, the launch band's headline, and nothing in the interface · `--_typography---font--paragraph-text`

- **Substitute:** Georgia (the declared fallback), Tiempos Text, Source Serif 4
- **Weights:** 400, 500, 600
- **Sizes:** 15px, 16px, 18px, 20px, 24px, 72px
- **Line height:** 1.4 at 15–24px, 1.55 on the 20px research lede, 1.1 at 72px
- **Letter spacing:** normal at every size but the 16px skip link (−0.16px)
- **Role:** Reading. The serif carries the hero lede, the team descriptions and the abstracts, and takes one display moment — the 72px/500 launch title over the photographic band.

### Anthropic Mono — the spec-sheet labels inside the home release cards · `--_typography---font--mono`

- **Substitute:** ui-monospace, iA Writer Mono, JetBrains Mono
- **Weights:** 400
- **Sizes:** 16px
- **Line height:** 22.4px (1.4)
- **Letter spacing:** normal, set uppercase via `.u-text-transform-uppercase`
- **Role:** Data labels — "DATE", "CATEGORY" — paired at the same size with a sans value on the opposite side of a hairline.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display XL (home hero) | 64px | 70.4px | normal | `--text-display-xl` |
| Display Serif (launch band) | 72px | 79.2px | normal | `--text-display-serif` |
| Headline 1 | 52px | 52px | normal | `--text-headline-1` |
| Headline 1 reversed (pre-footer) | 52px | 65px | normal | `--text-headline-1-reversed` |
| Headline 4 | 32px | 38.4px | normal | `--text-headline-4` |
| Section heading (home) | 24px | 31.2px | normal | `--text-heading` |
| Headline 6 | 19px | 22.8px | normal | `--text-headline-6` |
| Subheading | 16px | 22.4px | normal | `--text-subheading` |
| Body L (serif) | 24px | 33.6px | normal | `--text-body-l` |
| Body 1 (serif) | 20px | 31px | normal | `--text-body-1` |
| Body 3 | 15px | 21px | normal | `--text-body-3` |
| Nav link | 15px | 21px | −0.0375px | `--text-nav` |
| Caption | 14px | 16.8px | 0.15px | `--text-caption` |
| Body 4 | 12px | 16.8px | normal | `--text-body-4` |
| Mono label | 16px | 22.4px | normal | `--text-mono` |

## Tokens — Spacing & Shapes

**Base unit:** 4px   **Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| space-1 | 4px | `--_spacing---space--1` |
| space-2 | 8px | `--_spacing---space--2` |
| space-3 | 12px | `--_spacing---space--3` |
| space-4 | 16px | `--_spacing---space--4` |
| space-5 | 24px | `--_spacing---space--5` |
| space-6 | 32px | `--_spacing---space--6` |
| space-7 | 40px | `--_spacing---space--7` |
| space-8 | 48px | `--_spacing---space--8` |
| space-9 | 64px | `--_spacing---space--9` |
| space-10 | 80px | `--_spacing---space--10` |
| space-11 | 96px | `--_spacing---space--11` |
| band | 224px | `--spacing-band` |

### Border Radius

| Element | Value |
|---------|-------|
| Buttons, clickable wraps | 8px |
| Cards, media frames, illustration tiles | 16px |
| Search input | 12px |
| Home launch band container | 24px |
| Split CTA — left half | 8px 0 0 8px |
| Split CTA — dropdown half | 0 8px 8px 0 |
| Skip link (research) | 0 0 16px 16px |
| Skip link (home) | 0 0 8px 8px |
| Publication rows, headers, bands | 0px |
| `--radius--small` (4px), `--radius--round` (100vw) | *(declared, not painted)* |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| Tile | `rgba(0,0,0,0.04) 0 1px 1px, rgba(0,0,0,0.06) 0 4px 4px, rgba(0,0,0,0.08) 0 16px 24px` | `--shadow-tile` |
| Play button | `rgba(0,0,0,0.05) 0 4px 24px` | `--shadow-play` |

### Layout

- **Page max-width:** `not measured` — the census carries no width row; `--container--small: 56.25rem` and `--site--margin: 64px` are *(declared, not painted)*
- **Section gap:** 96px on the research landing sections, 48px on the pre-footer band, 64px around the footer, 224px on the home launch band, 80px on the home footer
- **Card padding:** 32px on the home release card, 40px on the illustration tile, 16px on the play button
- **Element gap:** 8px is the workhorse; 24px between nav items, 12px in footer lists, 32px in the home hero grid, 16px in the featured side items, 4px in the hero CTA row, 48px between footer columns

## Components

### Site Header

**Role:** The persistent bar on the research pages — wordmark left, five nav links right, the split CTA at the end.

Cited from `.SiteHeader-module-scss-module__zKj4Ca__header`: a `#FAF9F5` header, 16px vertical padding, 0px radius, no border and no shadow. It separates from the canvas by nothing at all on the research pages, which share that exact ivory — the header is legible because of the 24px gap in `.SiteHeader-module-scss-module__zKj4Ca__contentWrapper` and the black CTA, not because of a rule. Nav labels are 15px/400 at 21px with −0.0375px tracking in `#0F0F0E`. Keep it flat; a border or a drop shadow here would be the loudest thing on the page.

### Split "Try Claude" CTA

**Role:** The one commercial action in the chrome, built as a button plus a dropdown arrow.

Two builds, same shape. Research pages: `.SiteHeader-module-scss-module__zKj4Ca__claudeCtaButton.body-3` is a `#0F0F0E` fill with `#FAF9F5` text at 15px/400, 8px 16px padding, radius `8px 0 0 8px`, no border; `.SiteHeader-module-scss-module__zKj4Ca__claudeCtaDropdownTrigger` carries the same `#0F0F0E` fill, 12px 16px padding, radius `0 8px 8px 0` and a 1px `rgba(255, 255, 255, 0.2)` border — the hairline that splits the two halves. Home page: `.btn_main_wrap.is-combo` is `#141413` on `#141413`, 8px 16px, radius `8px 0 0 8px`. Never round the inner corners.

### Primary Button

**Role:** The filled action inside content — "Read announcement" on the home release cards.

`.btn_main_wrap` is a `#141413` fill with a matching 1px `#141413` border, 8px 16px padding and 8px radius, no shadow, with an 8px gap to its trailing arrow. Label is `.btn_main_text` at 15px/400, 15px line-height, −0.08px tracking, in `#FAF9F5`. Border and fill are the same colour deliberately: the border exists so the inverse variant can swap both values and keep the identical footprint. Keep the label at 400 — weight is never the emphasis mechanism in this system, contrast is.

### Secondary Button

**Role:** Low-commitment actions — load more results, or a reversed action on a dark band.

Two measured variants of `.Button-module-scss-module__f9ZZrG__button`. On ivory: `#F5F4ED` fill, 1px `#D1CFC5` border, 8px 24px padding, 8px radius, label 16px/400 at 20px with −0.16px tracking in `#73726C` — spanning the full width of the publication table as a "See more" bar. On the dark pre-footer band: `#FAF9F5` fill, 1px `#FAF9F5` border, 8px 16px padding, 8px radius, ink `#141413`. Same geometry, inverted paint; that is the whole button system.

### Home Hero

**Role:** The opening statement — a sans headline against a serif paragraph, side by side.

Built from `.u-display-xl.word-animation-processed`: Anthropic Sans 64px/700 at 70.4px line-height, normal tracking, `#141413`, with two words carrying underlines in the tiles. Its counterweight is `.u-paragraph-l.u-max-width-40ch` — Anthropic Serif 24px/400 at 33.6px, held to a 40-character measure so it stacks four short lines against three long ones. The grid gap is 32px (`.home_hero_grid.u-grid-tablet`). The 1.1 line-height on the display and the 1.4 on the serif are the system's two rhythms in one view.

### Release Card

**Role:** A model or product announcement, presented as a card with a spec sheet.

The oat plate is `.g_background.w-variant-a4963f55-d907-0301-299c-9bb3d537575f.u-co` at `#E3DACC`; the content box is `.package_banner.is-pad-m` — 32px padding on all sides, 16px radius, no border, no shadow, 32px internal gap. The spec sheet is `.package_banner_list.u-mb-6.w-list-unstyled` with 1px `rgba(20, 20, 19, 0.1)` rules and `.package_banner_list_item.u-paragraph-xs.u-font-display-sans` rows at 12px 0 padding, 16px/400 at 22.4px. Mono uppercase label left, sans value right, hairline between. The dark button anchors the bottom.

### Article Row

**Role:** The home page's index of recent writing — title left, category right, rule below.

`.article-list-item.w-variant-09ef868d-ec23-1553-cf01-d5a31bc64ebd` sets 16px 0 padding, 0px radius, no fill, and a 1px `rgba(20, 20, 19, 0.2)` border — twice the opacity of the card rules, because this list stands alone on ivory rather than on oat. Row type is 16px/500 at 22.4px; the right-hand category is `.u-color-faded` at 16px/500, 22.4px, in `rgba(20, 20, 19, 0.6)`. Nothing here has a background, a hover chip or an icon: the rule is the entire component.

### Featured Grid

**Role:** The research index's lead story with a stack of secondary items beside it.

`.FeaturedGrid-module-scss-module__W1FydW__mediaContent` is the image frame — 16px radius, no fill, no border, no shadow. The headline is `.headline-4.FeaturedGrid-module-scss-module__W1FydW__featuredTitl` at Anthropic Sans 32px/600, 38.4px, `#141413`; the date is `.FeaturedGrid-module-scss-module__W1FydW__date.caption.bold` at 14px/500, 16.8px, +0.15px tracking, `#5E5D59`. Secondary items are `.FeaturedGrid-module-scss-module__W1FydW__sideLink` rows: 1px `#D1CFC5` top rule, 0px radius, 16px gap between them, 16px row / 32px column grid gap.

### Publication Table

**Role:** The full archive — date, category and title in three columns, one rule per record.

`.PublicationList-module-scss-module__KxYrHG__listItem` is an anchor with no fill, 0px radius, 0px padding and a single 1px `#D1CFC5` border; `.PublicationList-module-scss-module__KxYrHG__listHeader` carries the same rule under the DATE / CATEGORY / TITLE labels. The list sets a 16px row / 24px column gap. Dates run 15px/400 at 21px in `#5E5D59`, titles in slate at the body size. This is the system's densest surface and it still has no zebra stripe, no card and no hover fill — only the rule and the ink change.

### Search Input

**Role:** Filtering the publication archive.

`.SearchFilter-module-scss-module__d4ijlG__input` is the only white fill in the interface: `#FFFFFF`, 1px `#D1CFC5` border, 12px radius, 8px 40px padding, text 14px/400 at 14px in `#141413`. The 40px left inset is the leading magnifier's room; the 12px radius sits between the 8px control radius and the 16px card radius, marking the field as neither. Against ivory the white reads as recessed rather than raised — the input is the one place the system admits a distinct plane.

### Illustration Tile

**Role:** The visual signature of a research team page — flat line art on a coloured plate.

`.Illustration-module-scss-module__WyGOtq__root` measures three ways. The olive variant is `#788C5D` with 40px padding, 16px radius, no border, and the system's tile shadow: `rgba(0,0,0,0.04) 0 1px 1px, rgba(0,0,0,0.06) 0 4px 4px, rgba(0,0,0,0.08) 0 16px 24px`. The cactus variant is `#BCD1CA` and the coral variant `#EBCECE`, both 16px radius, 0px padding, no shadow. Line art is drawn in black on ivory paper shapes. Colour here is editorial classification, not brand accent — one plate per team.

### Dark Closing Band and Footer

**Role:** The recruiting call and the sitemap — the page's only reversal.

`.PreFooter-module-scss-module__tDFHTW__landingPageRoot` is a `#141413` section with 48px vertical padding and 0px radius; inside it `.PreFooter-module-scss-module__tDFHTW__root` repeats the fill with 32px vertical padding, a 2px `#30302E` border — the one two-pixel rule measured — and a 48px gap. Its title is 52px/700 at 65px in `#FFFFFF`. `.SiteFooter-module-scss-module__JdOqwq__root` continues the same `#141413` with 64px of wrapper padding: group titles at 12px/700, 16.8px, `#FAF9F5`; links at 12px/400, 16.8px, `#B0AEA5`; 48px between columns, 16px inside a list.

## Do's and Don'ts

### Do

- Set body copy in Anthropic Serif at 15–24px with 1.4 line-height (`.body-3.serif`, `.u-paragraph-l.u-max-width-40ch`) and headings in Anthropic Sans (`.headline-1`, `.u-display-xl.word-animation-processed`); the serif takes one display job, the 72px launch title (`.big-cta_title.is-manatee-new`).
- Separate rows with a 1px `#D1CFC5` rule (`.PublicationList-module-scss-module__KxYrHG__listItem`) instead of reaching for a card.
- Keep controls at 8px radius and cards, media and tiles at 16px — the radii list shows 8px on 22 elements and 16px on 13.
- Let the black band (`.PreFooter-module-scss-module__tDFHTW__landingPageRoot`, `.SiteFooter-module-scss-module__JdOqwq__root`) do all the contrast work at the end of the page.
- Use `#B0AEA5` for footer links and `#5E5D59` for dates and captions — two distinct quiet inks, one for reversal and one for ivory.

### Don't

- Don't add shadows to cards or buttons: the shadow block carries two entries, `.Illustration-module-scss-module__WyGOtq__root` and `.VideoEmbed-module-scss-module__TSxPAa__play-button`, and every measured control row reads `shadow none`.
- Don't set body text bold. The census paints 700 at 64px, 52px, 12px group titles and the 16px skip link; paragraphs at 15–24px are 400 throughout.
- Don't tint the illustration plates into buttons — `#788C5D`, `#BCD1CA` and `#EBCECE` are measured as illustration fills on the team pages and nowhere else in the component census.
- Don't mix the two papers in one view: `#F0EEE6` is the home canvas, `#FAF9F5` the research canvas.
- Don't introduce a saturated CTA colour. The primary action is `#141413` on ivory (`.btn_main_wrap`), and the archive's load-more is deliberately the quietest control on the page.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas — research | `#FAF9F5` | The dominant ground, 59% of painted background area |
| 0 | Canvas — home | `#F0EEE6` | The home page's warmer paper |
| 1 | Card plate | `#E3DACC` | Home release cards |
| 1 | Button ground | `#F5F4ED` | The "See more" bar |
| 2 | Input | `#FFFFFF` | Search field only |
| 3 | Dark band | `#141413` | Pre-footer, footer, primary button |
| 3 | Header CTA | `#0F0F0E` | Split CTA and its dropdown half |
| — | Plates | `#788C5D` / `#BCD1CA` / `#EBCECE` | Illustration tiles on team pages |

## Elevation

Depth is carried by luminance steps and hairlines, not by shadow. The ladder is short: ivory canvas, a warmer plate (oat, chalk) or a brighter one (white), then the slate band. Borders do the rest — 1px `#D1CFC5` on ivory, 1px `rgba(20, 20, 19, 0.1)` and `rgba(20, 20, 19, 0.2)` on the home page, 2px `#30302E` on the dark band, 1px `rgba(255, 255, 255, 0.2)` inside the CTA. Two objects break the rule and both are media: the illustration tile's three-layer shadow (1px, 4px, 24px blur at 4/6/8% black) and the play button's single `0 4px 24px` at 5%. Both float artwork, not interface.

## Imagery

Three modes, cleanly separated. Photography appears full-bleed and atmospheric — a sky with clouds behind the launch headline, a documentary still of two people on a bench behind the play button. Illustration is flat, black line work on a single pastel plate, one colour per research team, at 16px radius. Product and data pictures appear as raster artwork inside the featured grid's 16px frame. Note that the blues and greens visible in artwork are photographic or embedded image, not paint: the inventory's fills stop at olive, cactus and coral. Icons are monochrome and tiny — social marks in the footer, a magnifier in the search field, an arrow after link labels.

## Layout

Contained, generously margined, and left-aligned. The research pages run a two-column head — 52px headline left, serif lede plus a wrapped row of team links right — then a 1px `#D1CFC5` top rule opening every section. Section rhythm is 96px for landing sections, 48px around the pre-footer, 64px through the footer; the home page runs looser, with 224px on the launch band and 80px on the footer container. Grids are explicit: five equal description columns on the research index, a 16px/32px featured grid, a three-column publication table, a five-column footer. Nav is a fixed-height bar with 24px between items. Full-bleed is reserved for two things — the photographic band and the closing dark section.

## Typography Voice

Two modes, and the system keeps them honest. Interface mode is Anthropic Sans, tight: 52px at a 1.0 line-height on research headings, 64px at 1.1 on the home hero, captions at 14px with +0.15px tracking. Reading mode is Anthropic Serif, open: 20px at 31px (1.55) for the research lede, 24px at 33.6px for the home paragraph, 15px at 21px for team abstracts. The signature move is that the display sizes do not get looser tracking or heavier optical treatment — they get *less* leading, down to 52px on 52px, so a headline reads as a single object while the paragraph beside it breathes. The mono face appears once, uppercase, at the same 16px as the sans value it labels — the difference is texture, not scale.

## Agent Prompt Guide

## Quick Color Reference

- background: `#FAF9F5`
- text: `#141413`
- surface: `#E3DACC`
- border: `#D1CFC5`
- accent: `#788C5D`
- primary action: `#141413`

## Example Component Prompts

1. **Publication table**: Three-column list (date, category, title) on `#FAF9F5`. Each row is an anchor with no fill, 0px radius, 0 padding, separated by a 1px `#D1CFC5` rule; list gap 16px row / 24px column. Dates in Anthropic Sans 15px/400, 21px, `#5E5D59`; titles in `#141413`. Header row labels uppercase above the same rule. No hover fill, no stripe, no shadow.
2. **Release card**: A `#E3DACC` plate holding a 16px-radius content box with 32px padding and 32px internal gap. Title Anthropic Sans 24px/600 at 31.2px; body Anthropic Serif 18px/400 at 25.2px. Below, a spec list with 1px `rgba(20, 20, 19, 0.1)` rules and 12px 0 rows: uppercase Anthropic Mono 16px label left, Anthropic Sans 16px value right. Bottom action: `#141413` fill, 1px `#141413` border, 8px 16px padding, 8px radius, `#FAF9F5` label at 15px/400 with an 8px gap to a trailing arrow.
3. **Split header CTA**: Two halves. Left: `#0F0F0E` fill, `#FAF9F5` label at 15px/400, 8px 16px padding, radius `8px 0 0 8px`, no border. Right: `#0F0F0E` fill, 12px 16px padding, radius `0 8px 8px 0`, 1px `rgba(255, 255, 255, 0.2)` border, chevron only. No shadow, no gap between halves.
4. **Illustration tile**: A 16px-radius square filled `#788C5D` with 40px padding, holding black line art on an ivory paper shape, under `rgba(0,0,0,0.04) 0 1px 1px, rgba(0,0,0,0.06) 0 4px 4px, rgba(0,0,0,0.08) 0 16px 24px`. Sibling variants use `#BCD1CA` or `#EBCECE` with 0px padding and no shadow.
5. **Dark closing band**: Full-bleed `#141413` section, 48px vertical padding, containing a 2px `#30302E` bordered block with 32px vertical padding and a 48px gap. Headline Anthropic Sans 52px/700 at 65px in `#FFFFFF`; action button `#FAF9F5` fill, 1px `#FAF9F5` border, 8px 16px padding, 8px radius, `#141413` label.

## Similar Brands

- **Stripe Press** — ivory paper stock, serif reading type against a structural sans, and a refusal of decorative surface.
- **Are.na** — hairline rules and neutral canvas doing all the layout work, with almost no filled chrome.
- **Vitsœ** — warm neutral grounds, unadorned type at a comfortable measure, and depth conveyed by material rather than shadow.
- **Kinfolk** — the editorial temperature: generous white space, serif body copy, colour reserved for imagery.
- **37signals** — plain-spoken sans headings on an off-white page, one black action colour, no gradients anywhere.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --swatch-ivory-light: #FAF9F5;
  --swatch-ivory-medium: #F0EEE6;
  --swatch-oat: #E3DACC;
  --color-button-ground: #F5F4ED;
  --swatch-white: #FFFFFF;
  --swatch-slate-dark: #141413;
  --color-ink-black: #0F0F0E;
  --swatch-slate-light: #5E5D59;
  --color-cloud-medium: #B0AEA5;
  --color-stone: #73726C;
  --color-border: #D1CFC5;
  --color-border-dark: #30302E;
  --swatch-slate-faded-10: rgba(20, 20, 19, 0.1);
  --swatch-slate-faded-20: rgba(20, 20, 19, 0.2);
  --color-faded: rgba(20, 20, 19, 0.6);
  --color-border-inverse: rgba(255, 255, 255, 0.2);
  --swatch-olive: #788C5D;
  --swatch-cactus: #BCD1CA;
  --swatch-coral: #EBCECE;

  /* Typography — Families */
  --font-display-sans: 'Anthropic Sans', Arial, sans-serif;
  --font-paragraph-serif: 'Anthropic Serif', Georgia, serif;
  --font-mono: 'Anthropic Mono', ui-monospace, monospace;

  /* Typography — Scale */
  --text-display-xl: 64px;      --leading-display-xl: 70.4px;
  --text-display-serif: 72px;   --leading-display-serif: 79.2px;
  --text-headline-1: 52px;      --leading-headline-1: 52px;
  --text-headline-1-reversed: 52px; --leading-headline-1-reversed: 65px;
  --text-headline-4: 32px;      --leading-headline-4: 38.4px;
  --text-heading: 24px;         --leading-heading: 31.2px;
  --text-headline-6: 19px;      --leading-headline-6: 22.8px;
  --text-subheading: 16px;      --leading-subheading: 22.4px;
  --text-body-l: 24px;          --leading-body-l: 33.6px;
  --text-body-1: 20px;          --leading-body-1: 31px;
  --text-body-3: 15px;          --leading-body-3: 21px;
  --text-nav: 15px;             --leading-nav: 21px;
  --text-caption: 14px;         --leading-caption: 16.8px;
  --text-body-4: 12px;          --leading-body-4: 16.8px;
  --text-mono: 16px;            --leading-mono: 22.4px;
  --tracking-nav: -0.0375px;
  --tracking-button: -0.08px;
  --tracking-module: -0.16px;
  --tracking-footer-link: -0.24px;
  --tracking-caption: 0.15px;

  /* Spacing */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 24px;
  --spacing-6: 32px;
  --spacing-7: 40px;
  --spacing-8: 48px;
  --spacing-9: 64px;
  --spacing-10: 80px;
  --spacing-11: 96px;
  --spacing-band: 224px;

  /* Border Radius */
  --radius-main: 8px;
  --radius-input: 12px;
  --radius-large: 16px;
  --radius-band: 24px;
  --radius-cta-left: 8px 0 0 8px;
  --radius-cta-right: 0 8px 8px 0;
  --radius-skip-research: 0 0 16px 16px;
  --radius-skip-home: 0 0 8px 8px;

  /* Shadows */
  --shadow-tile: rgba(0, 0, 0, 0.04) 0 1px 1px 0, rgba(0, 0, 0, 0.06) 0 4px 4px 0, rgba(0, 0, 0, 0.08) 0 16px 24px 0;
  --shadow-play: rgba(0, 0, 0, 0.05) 0 4px 24px 0;
}
```

### Tailwind v4

```css
@theme {
  --color-ivory-light: #FAF9F5;
  --color-ivory-medium: #F0EEE6;
  --color-oat: #E3DACC;
  --color-button-ground: #F5F4ED;
  --color-white: #FFFFFF;
  --color-slate-dark: #141413;
  --color-ink-black: #0F0F0E;
  --color-slate-light: #5E5D59;
  --color-cloud-medium: #B0AEA5;
  --color-stone: #73726C;
  --color-border: #D1CFC5;
  --color-border-dark: #30302E;
  --color-slate-faded-10: rgba(20, 20, 19, 0.1);
  --color-slate-faded-20: rgba(20, 20, 19, 0.2);
  --color-faded: rgba(20, 20, 19, 0.6);
  --color-border-inverse: rgba(255, 255, 255, 0.2);
  --color-olive: #788C5D;
  --color-cactus: #BCD1CA;
  --color-coral: #EBCECE;

  --font-display-sans: 'Anthropic Sans', Arial, sans-serif;
  --font-paragraph-serif: 'Anthropic Serif', Georgia, serif;
  --font-mono: 'Anthropic Mono', ui-monospace, monospace;

  --text-display-xl: 64px;
  --text-display-xl--line-height: 70.4px;
  --text-display-serif: 72px;
  --text-display-serif--line-height: 79.2px;
  --text-headline-1: 52px;
  --text-headline-1--line-height: 52px;
  --text-headline-1-reversed: 52px;
  --text-headline-1-reversed--line-height: 65px;
  --text-headline-4: 32px;
  --text-headline-4--line-height: 38.4px;
  --text-heading: 24px;
  --text-heading--line-height: 31.2px;
  --text-headline-6: 19px;
  --text-headline-6--line-height: 22.8px;
  --text-subheading: 16px;
  --text-subheading--line-height: 22.4px;
  --text-body-l: 24px;
  --text-body-l--line-height: 33.6px;
  --text-body-1: 20px;
  --text-body-1--line-height: 31px;
  --text-body-3: 15px;
  --text-body-3--line-height: 21px;
  --text-nav: 15px;
  --text-nav--line-height: 21px;
  --text-caption: 14px;
  --text-caption--line-height: 16.8px;
  --text-body-4: 12px;
  --text-body-4--line-height: 16.8px;
  --text-mono: 16px;
  --text-mono--line-height: 22.4px;

  --tracking-nav: -0.0375px;
  --tracking-button: -0.08px;
  --tracking-module: -0.16px;
  --tracking-footer-link: -0.24px;
  --tracking-caption: 0.15px;

  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 24px;
  --spacing-6: 32px;
  --spacing-7: 40px;
  --spacing-8: 48px;
  --spacing-9: 64px;
  --spacing-10: 80px;
  --spacing-11: 96px;
  --spacing-band: 224px;

  --radius-main: 8px;
  --radius-input: 12px;
  --radius-large: 16px;
  --radius-band: 24px;

  --shadow-tile: rgba(0, 0, 0, 0.04) 0 1px 1px 0, rgba(0, 0, 0, 0.06) 0 4px 4px 0, rgba(0, 0, 0, 0.08) 0 16px 24px 0;
  --shadow-play: rgba(0, 0, 0, 0.05) 0 4px 24px 0;
}
```