# Design Reference - Anthropic
> Research journal printed on warm stone — authoritative typographic composition where word-level underlines replace color as the primary emphasis mechanism, and the only warmth comes from the paper itself.

## Source
- Original site: https://anthropic.com
- Captured: 2026-04-11T18:03:53.342Z

## Tags
- editorial
- typographic
- achromatic
- serif-grotesque
- research
- ivory
- high-contrast
- institutional
- restrained
- custom-type

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Slate Dark | `#141413` | neutral | Primary text, borders, nav items, icon fills, card backgrounds — the near-black that appears on both light and dark surfaces, making it function as both foreground and background |
| Ivory Light | `#faf9f5` | neutral | Page background, button fills, light surface base — the warm off-white that gives the site its parchment character instead of clinical white |
| Ivory Medium | `#f0eee6` | neutral | Nav backgrounds, secondary surface level, border highlights |
| Ivory Dark | `#e8e6dc` | neutral | Body text on dark backgrounds, dividers, subtle borders |
| Oat | `#e3dacc` | neutral | Tertiary surface backgrounds, warm mid-tone fills |
| Cloud Medium | `#b0aea5` | neutral | Disabled/muted borders, secondary interactive borders, subdued UI chrome |
| Cloud Light | `#d1cfc5` | neutral | Dividers, hairline borders, inactive states |
| Cloud Dark | `#87867f` | neutral | Secondary text, meta labels, timestamps |
| Slate Medium | `#3d3d3a` | neutral | Mid-dark borders, focus rings on light surfaces |
| Slate Light | `#5e5d59` | neutral | Tertiary text, captions, footer secondary content |
| Clay | `#d97757` | accent | Accent CTA elements, highlight states — warm terracotta held in reserve for moments of intentional warmth against the achromatic base |
| Accent Ember | `#c6613f` | accent | Deeper accent state, hover/pressed clay interactions |
| Olive | `#788c5d` | accent | Thematic tag or category label color variant |
| Sky | `#6a9bcc` | accent | Thematic tag or category label color variant |
| Fig | `#c46686` | accent | Thematic tag or category label color variant |
| Cactus | `#bcd1ca` | accent | Thematic tag or category label color variant |

## Typography
- role: All UI chrome: navigation, buttons, labels, badges, footer, body copy. The custom grotesque with tight negative tracking at large sizes — at 61px with -0.02em it reads as architectural lettering, not typical web type. Used at weight 700 for the hero headline, weight 400 for body, weight 500–600 for interactive elements.; sizes: 12px, 15px, 16px, 24px, 61px; family: Anthropic Sans; weight: 400, 500, 600, 700; lineHeight: 1.00–1.40; substitute: Inter, DM Sans; letterSpacing: -0.02em at display sizes (61px), -0.005em at mid sizes (24px), -0.002em at body sizes (15-16px); fontFeatureSettings: standard
- role: Feature card headlines, editorial hero text, project titles. At 91px it dominates the dark feature cards — the serif at display scale against near-black reads as a printed broadsheet masthead. Weight 600 for emphasis within editorial contexts.; sizes: 18px, 20px, 24px, 91px; family: Anthropic Serif; weight: 400, 600; lineHeight: 1.10–1.40; substitute: Playfair Display, Lora; letterSpacing: normal
- role: Technical labels, metadata fields, category tags. Appears sparingly — its presence signals 'data' or 'classification' within otherwise typographic layouts.; sizes: 16px; family: Anthropic Mono; weight: 400; lineHeight: 1.40; substitute: JetBrains Mono, IBM Plex Mono; letterSpacing: normal

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "cards": "8px",
      "badges": "0px",
      "panels": "16px",
      "buttons": "0px",
      "featuredCards": "24px"
    },
    "elementGap": "8-16px",
    "sectionGap": "61px",
    "cardPadding": "31px",
    "pageMaxWidth": "1200px"
  },
  "radius": {
    "cards": "8px",
    "badges": "0px",
    "panels": "16px",
    "buttons": "0px",
    "featuredCards": "24px"
  }
}
```

## Component Patterns
- name: Latest Releases Card Grid
- name: Feature Card (Dark Editorial)
- name: Button Group — Primary, Ghost & Metadata Label
- name: Primary Nav Button (Try Claude); role: Main CTA in top navigation
- name: Ghost Nav Button (Transparent); role: Secondary nav actions, dropdown triggers
- name: Muted Ghost Button; role: Disabled or secondary-secondary action
- name: Inline Text Link with Underline Emphasis; role: Hero-level keyword emphasis links
- name: Feature Card (Dark); role: Full-width editorial feature sections
- name: Release Card (Light); role: Content listing cards in the 'Latest releases' grid
- name: Metadata Badge / Label; role: Category and date labels on cards
- name: Arrow Text Link; role: Read more / announcement CTAs within cards
- name: Continue Reading Button (On Dark); role: CTA within dark feature card
- name: Top Navigation Bar; role: Site-wide primary navigation

## Do
- Use #faf9f5 (Ivory Light) as the page base — never pure white (#ffffff) or neutral gray.
- Apply borderRadius 0px to all buttons and interactive controls except the primary 'Try Claude' CTA which uses 0px 0px 8px 8px (asymmetric: flat top, rounded bottom only).
- Emphasize headline keywords with a thick text-decoration underline only — never color, bold weight increase, or highlight backgrounds — as the sole decorative emphasis mechanism.
- Use Anthropic Serif at display sizes (91px, weight 400) exclusively within dark (#141413) surface cards; use Anthropic Sans for all light-surface headlines.
- Restrict chromatic color to the CSS accent palette (Clay #d97757, Olive #788c5d, etc.) and deploy it sparingly — one accent per section maximum; default state uses zero chromatic color.
- Set dark editorial feature cards to borderRadius 24px and keep them full content-column width with hard clipping of interior imagery at the same radius.
- Use Anthropic Mono 16px for metadata field labels (DATE, CATEGORY) in card footers — the mono/grotesque contrast signals structured data within editorial layout.

## Don't
- Never use pure white (#ffffff) or pure black (#000000) as a surface background — all surfaces must come from the ivory/slate token range.
- Never add box-shadows or drop-shadows to any component — surface contrast and border lines are the only depth signals.
- Never round button corners uniformly — the 0px radius is a deliberate formal signal; avoid introducing 4px, 6px, or pill buttons.
- Never use Anthropic Serif on the page's ivory background at large sizes — the serif display scale is reserved for the dark card inversion.
- Never apply multiple chromatic accent colors within a single section — the palette tokens (Clay, Sky, Fig, Olive) are categorical variants, not combinable accents.
- Never use background fills for badge or label components — metadata labels are pure text with no chip, pill, or capsule treatment.
- Never replace the underline emphasis mechanic with color emphasis on headlines — links within headlines underline, they do not change color.