---
title: "Anthropic design system"
variant: extended
source: https://www.anthropic.com/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/anthropic-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Anthropic · Design System

> Warm editorial restraint for frontier AI

**Theme:** light · **Industry:** ai · **Source:** https://www.anthropic.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Anthropic’s homepage pairs a warm, restrained editorial canvas with bold typography and clear pathways into its research and products. A large feature panel and compact release cards lead into mission content, while a high-contrast footer gathers extensive navigation.

## North star

Use warm paper-like surfaces, purposeful serif-and-sans contrast, and generous whitespace to make complex AI work feel clear and considered.

## Overview

The page is defined by a quiet warm-neutral palette: a pale beige canvas carries most sections, with near-black text and a soft off-white product feature panel creating contrast without introducing bright accent colours. The compact black navigation CTA is the strongest control accent; fine gray dividers organize release metadata and link lists. Typography is editorial but disciplined: large, heavy sans-serif hero lettering sits alongside readable serif body copy and oversized serif product-feature type. The layout places the hero headline and explanatory paragraph in separate columns, then gives the featured model a broad, rounded panel. Three release cards and a two-column mission-and-links block provide a denser middle rhythm. Imagery is sparse in the measured view; the product showcase relies mainly on typography and a restrained arc graphic rather than a photographic campaign. The dark footer creates a distinct closing band, with small, tightly organized link groups.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#141413` | `--color-soft-ink` | brand | Primary text, navigation, dark footer surface, and the prominent Try Claude control. |
| Warm Canvas | `#f0eee6` | `--color-warm-canvas` | surface | Main page background across the hero, product feature, releases, and mission sections. |
| Gallery White | `#faf9f5` | `--color-gallery-white` | surface | Off-white feature-panel surface, light-on-dark footer text, and selected announcement links. |
| Quiet Stone | `#b0aea5` | `--color-quiet-stone` | semantic | Muted footer copy and low-emphasis privacy link text. |
| Pencil Gray | `#c4c2bc` | `--color-pencil-gray` | semantic | Subtle borders and hairline separators between otherwise open content. |
| Paper Edge | `#dad8d1` | `--color-paper-edge` | neutral | Measured neutral border tone; a supporting divider colour rather than a defining surface. |
| Oat Mist | `#e3dacc` | `--color-oat-mist` | surface | Secondary pale surface appearing in card or supporting interface areas, not the main canvas. |
| Graphite Haze | `#6c6b67` | `--color-graphite-haze` | neutral | Low-emphasis text detail; use sparingly for subdued copy rather than headings. |

### Semantic aliases

`--color-canvas` → `#f0eee6` (Warm Canvas) · `--color-surface` → `#faf9f5` (Gallery White) · `--color-surface-2` → `#141413` (Soft Ink) · `--color-surface-3` → `#e3dacc` (Oat Mist) · `--color-text` → `#141413` (Soft Ink) · `--color-text-muted` → `#b0aea5` (Quiet Stone) · `--color-text-subtle` → `#faf9f5` (Gallery White) · `--color-border` → `#c4c2bc` (Pencil Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#141413` | `#f0eee6` | 15.87:1 | AAA |
| `#141413` | `#faf9f5` | 17.5:1 | AAA |
| `#141413` | `#e3dacc` | 13.31:1 | AAA |
| `#b0aea5` | `#f0eee6` | 1.91:1 | fail |
| `#b0aea5` | `#faf9f5` | 2.11:1 | fail |
| `#b0aea5` | `#141413` | 8.29:1 | AAA |
| `#b0aea5` | `#e3dacc` | 1.61:1 | fail |
| `#faf9f5` | `#f0eee6` | 1.1:1 | fail |
| `#faf9f5` | `#141413` | 17.5:1 | AAA |
| `#faf9f5` | `#e3dacc` | 1.31:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Anthropic Sans | `--font-display` | webfont | 400, 600, 500, 700 | Bold hero and page headings, navigation controls, links, captions, and compact interface text. | Inter |
| Anthropic Serif | `--font-body` | webfont | 400, 465 | Display title in the featured model panel, hero supporting paragraph, and editorial body copy. | Source Serif 4 |
| Anthropic Mono | `--font-mono` | webfont | 400 | Uppercase code-style labels and compact metadata when a technical marker is needed. | IBM Plex Mono |

- **Anthropic Sans:** Use confident heavier weights for headings and restrained regular weights for navigation; measured caption text has slightly tight tracking.
- **Anthropic Serif:** Use regular, literary forms for body copy and large display moments; preserve an understated editorial feel.
- **Anthropic Mono:** Measured at regular weight; reserve uppercase treatment for small technical labels, not long-form copy.

### Type scale — Augmented Fourth (ratio ≈ 1.45, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 79.5px | 465 | 1.16 | -0.015em | — | Anthropic Serif | Oversized serif model-feature title and editorial display moments. |
| h1 | 61px | 700 | 1.1 | 0 | — | Anthropic Sans | Bold sans-serif primary hero headline. |
| h2 | 24px | 600 | 1.3 | 0 | — | Anthropic Sans | Section headings such as Latest releases. |
| h3 | 22.5px | 400 | 1.4 | 0 | — | Anthropic Serif | Serif subheadings and editorial feature titles. |
| body | 18px | 400 | 1.4 | 0 | — | Anthropic Serif | Serif explanatory paragraphs and supporting editorial copy. |
| caption | 12px | 400 | 1.4 | -0.02em | — | Anthropic Sans | Small sans-serif captions and footer utility text. |
| nav | 61px | 700 | 1.1 | 0 | — | Anthropic Sans | Primary navigation and menu-level labels. |
| link | 16px | 400 | 1.4 | 0 | — | Anthropic Sans | Inline links, release details, and announcement actions. |
| code | 16px | 400 | 1.4 | 0 | uppercase | Anthropic Mono | Uppercase mono labels for technical or metadata markers. |

OpenType features in use: `"dlig" 0`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 8, 12, 16, 22, 31, 46 px.
- Section rhythm 61px · element gap 8px · card padding — · max content width 1285px.

The measured content max width is 1285px, with comfortable density and a 4px-based spacing system. The hero aligns a large left headline with a right supporting paragraph; the feature below spans broadly, then release content moves into three columns. A two-column mission and link-list section precedes a full-width dark footer with four link columns. Maintain generous section pauses and use fine rules to structure dense lists.

## Shape & elevation

- Radius: nav `8px` · link `8px` · xs `8px` · sm `16px` · md `24px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The page reads as mostly flat: no measured shadows or gradients define its hierarchy. Separate sections with changes in surface tone and use fine hairlines for card metadata and long link lists. Rounded corners appear on the feature panel and compact controls, but avoid stacking cards or adding pronounced depth.

## Imagery

The first viewport and scaled full-page screenshot show little reliance on photography. The featured model panel is primarily typographic, with an understated curved line framing its display title; release cards are text-led. Measured image and SVG counts are limited, so keep any supporting illustration quiet and secondary rather than turning the page into a visual gallery.

## Components

### Top navigation

Compact horizontal header on the warm canvas, with Anthropic wordmark, serif-influenced navigation, and a near-black Try Claude dropdown control.

### Hero introduction

Left-aligned bold sans-serif headline paired with a serif explanatory paragraph in a two-column composition.

### Model feature panel

Broad off-white rounded panel centered around an oversized serif model title, curved line motif, short description, and dark read-more action.

### Release cards

Three-column announcement cards with a brief title and summary, fine-rule metadata rows, and compact dark announcement links.

### Mission and content links

Mission statement sits beside a vertically arranged list of editorial topics, separated by subtle horizontal rules.

### Footer directory

Full-width near-black band with a light logo, four dense link columns, muted utility text, and social links.

### Measured component styles

- **Primary button** (“Research”): transparent background · text #141413 · radius 0px · padding 22.4px 12px · 400 20px Anthropic Serif
- **Link** (“Haiku”): transparent background · text #141413 · radius 0px · padding 0px · 400 16px Anthropic Sans
- **Navigation item** (“Research Policy Commitments Learn News T”): transparent background · text #141413 · radius 0px · padding 0px · 400 20px Anthropic Serif

## Do

- Keep the main content on a warm beige canvas.
- Use near-black for primary text and the main CTA.
- Pair bold sans-serif headings with literary serif copy.
- Give the hero headline and supporting paragraph distinct columns.
- Organize dense release metadata with fine horizontal rules.
- Reserve the darkest full-width surface for the footer.

## Don't

- Do not introduce bright accent colours absent from the measured palette.
- Do not add prominent shadows or decorative gradients.
- Do not turn the editorial layout into a dense dashboard.
- Do not make supporting illustrations compete with the headline.
- Do not use sans-serif for every text role.
- Do not apply heavy borders to every card and section.

## Agent prompt

Build a new Anthropic-style page with a calm editorial hierarchy and comfortable whitespace. Use Warm Canvas (#f0eee6) for the main page, Soft Ink (#141413) for headings and controls, and Gallery White (#faf9f5) for a featured surface. Pair bold Anthropic Sans-like headings with Anthropic Serif-like paragraphs and display titles; keep mono styling limited to compact metadata. Establish a clear hero with a large headline beside supporting copy, followed by a broad feature panel and structured content cards. Use fine gray rules instead of heavy boxes or shadows. Keep calls to action compact and high contrast. Close with a full-width Soft Ink footer, light text, and neatly grouped navigation links. Avoid bright accents, gradients, and decorative clutter.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Warm-canvas introduction with a bold left headline and serif supporting paragraph in a two-column layout. | Mission-first messaging, Inline headline links | Oversized sans-serif heading, Serif supporting copy, Open canvas |
| 2 | product-showcase | Two-column feature area centered on a broad, off-white rounded panel. | Featured model introduction, Single read-more action | Large serif title, Curved line motif, Dark compact CTA |
| 3 | content-feed | Three announcement cards across the page, each with stacked metadata and an action link. | Scan release summaries, Follow announcement link | Text-led cards, Fine metadata dividers, Compact dark buttons |
| 4 | feature-split | Mission statement on the left and a ruled editorial link list on the right. | Explore related topics, Browse editorial resources | Two-column composition, Text-led links, Subtle separators |
| 5 | footer | Full-width dark band with a logo area and four dense navigation columns. | Browse grouped site links, Reach utility and social links | Near-black background, Small light text, Muted utility copy |

## Source CSS custom properties (selected)

```css
--_color-theme---background: #faf9f5;
--_text-style---font-family: "Anthropic Serif",Georgia,sans-serif;
--_color-theme---text: #141413;
--_text-style---font-size: 1.25rem;
--_text-style---line-height: 1.4;
--_text-style---font-weight: 400;
--_text-style---letter-spacing: 0em;
--border-width--main: .0625rem;
--_color-theme---link--text-hover: #5e5d59;
--_typography---font--paragraph-medium: 500;
--_typography---font--display-serif-family: "Anthropic Serif",Georgia,sans-serif;
--_text-style---margin-bottom: 1rem;
--_text-style---margin-top: 1rem;
--_spacing---space--6: clamp(1.75rem, 1.6734693877551021rem + 0.326530612244898vw, 2rem);
--_spacing---space--8: clamp(2.25rem, 2.020408163265306rem + 0.9795918367346939vw, 3rem);
--radius--large: 1rem;
--radius--main: .5rem;
--radius--small: .25rem;
--_spacing---space--4: 1rem;
--_spacing---gap--gap-xl: clamp(2.5rem, 2.0408163265306123rem + 1.9591836734693877vw, 4rem);
--_spacing---space--5: 1.5rem;
--_spacing---space--1: .25rem;
--_spacing---space--2: .5rem;
--_spacing---space--3: .75rem;
--_spacing---space--7: clamp(2rem, 1.846938775510204rem + 0.653061224489796vw, 2.5rem);
--_typography---font--display-sans: "Anthropic Sans",Arial,sans-serif;
--_typography---font--display-sans-medium: 500;
--_typography---font--display-sans-semibold: 600;
--_typography---font--display-serif-semibold: 600;
--radius--round: 100vw;
--_color-theme---border: #1414131a;
--_spacing---space--9: clamp(2.5rem, 2.0408163265306123rem + 1.9591836734693877vw, 4rem);
--_typography---font--detail: "Anthropic Sans",Arial,sans-serif;
--_typography---font--display-sans-bold: 700;
--_color-theme---background-secondary: #f0eee6;
--_spacing---gap--gap-xs: .5rem;
--_color-theme---text-agate: #b0aea5;
--_button-style---border: #141413;
--_button-style---background: #141413;
--_button-style---text: #faf9f5;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/anthropic-com