# How anthropic.com is designed

[Open the live Fudge conversation](https://design.withfudge.com/share/anthropic.com-design)

Last updated: 2026-07-30

## Captured pages

[![Home \\ Anthropic](https://pin.fontofweb.com/6290?format=jpg)](https://design.withfudge.com/share/pin-6290)

[Home \ Anthropic](https://design.withfudge.com/share/pin-6290)

[![Harness design for long-running application development \\ Anthropic](https://pin.fontofweb.com/8483?format=jpg)](https://design.withfudge.com/share/pin-8483)

[Harness design for long-running application development \ Anthropic](https://design.withfudge.com/share/pin-8483)

[![When AI builds itself \\ Anthropic](https://pin.fontofweb.com/9505?format=jpg)](https://design.withfudge.com/share/pin-9505)

[When AI builds itself \ Anthropic](https://design.withfudge.com/share/pin-9505)

[![When AI builds itself \\ Anthropic](https://pin.fontofweb.com/9504?format=jpg)](https://design.withfudge.com/share/pin-9504)

[When AI builds itself \ Anthropic](https://design.withfudge.com/share/pin-9504)

## Design character

Anthropic’s captured pages are calm, editorial, and unusually unhurried for a technology company. A warm, paper-like field gives dense black typography, carefully separated columns, sparse diagrams, and occasional cinematic feature art room to work. The recurring tension is useful: crisp sans-serif display and navigation provide present-day clarity, while serif article copy gives long-form ideas a literary cadence.

Adapt the character, not a single page: preserve the open field, firm type contrast, disciplined line work, and content-first pacing.

## Typography

The captured records retain measurements but not font-family names. The screenshots show a sans-serif interface and display layer with serif reading text; do not treat a substitute family as an identified Anthropic font.

| Observed use | Weight | Size | Line height |
| --- | ---: | ---: | ---: |
| Small label/caption | 400 | 10px | 12px |
| Utility text | 400 | 14–16px | 20px where retained |
| Article body | 400 | 17px | 26.35px |
| Emphasized UI text | 600 | 19px | 22.8px |
| Article subheading | 400 | 25px | 38.75px |
| Editorial heading | 400 | 36px | 45px |
| Engineering-page headline | 700 | 52px | 52px |
| Home hero headline | 700 | 64px | 70.4px |

Use large display statements sparingly. Keep article body generous and comfortably leaded; reserve the serif voice for long-form reading, captions, or other editorial moments rather than using it as a general UI font.

## Colors

No measured color values or stable color roles were returned for this capture set, so this guide does not publish a color token table. Visually, the inspected pages rely on a light warm-neutral field and near-black text, with restrained image or diagram color; reproduce that low-chroma relationship without treating any sampled screen color as a canonical token.

## Spacing and layout

The layout is defined by large outer breathing room, a broad editorial frame, and narrow reading measures nested inside it. The home page uses a wide two-column opening before a large featured panel; engineering and institute pieces move into a more controlled article composition.

| Repeated recorded value | Observed context |
| ---: | --- |
| 16px | Article padding and compact gaps |
| 32px | Repeated article gaps |
| 48px | Section separation |
| 64px | Column gaps and horizontal padding |
| 96px | Major vertical section padding |
| 152.5–156px | Wide article-side margins in the captured desktop views |
| 316px | Narrower centered engineering reading measure |

Do not flatten these into a universal scale: the records include page-level measurements, not a confirmed global token system.

## Visual language

The pages favor flat, paper-like surfaces over gloss. One-pixel rules organize article transitions and metadata; 8px corners recur where a rounded treatment is present. The home view uses a large, dark featured panel to create contrast inside an otherwise open canvas. Engineering imagery is graphic and diagrammatic, while the institute view uses a delicate timeline-like illustration. No shadow values were retained.

## Components and visible states

- A compact wordmark-led header pairs text navigation with a dark rounded “Try Claude” control.
- Home-page hero copy is split across a large left statement and a smaller editorial introduction.
- Featured content becomes a large, high-contrast panel rather than a dense card grid.
- Engineering articles pair a category label, graphic motif, display title, divider, date, summary, and a narrow reading column.
- Institute content uses a diagram/timeline alongside explanatory text.
- Underlined inline links and thin dividers provide emphasis without a heavy component chrome.

Only default appearances are represented in the captures. Hover, focus, open-menu, loading, error, and other interaction states were not retained.

## Practical guidance

- Start with a generous neutral canvas and let content, not decoration, set the pace.
- Pair a decisive sans display style with a separate editorial reading voice; keep the transition intentional.
- Use rules, whitespace, and a small number of rounded controls before adding cards or shadows.
- Let illustrations explain the idea and keep them simple, diagrammatic, or editorial rather than dashboard-like.
- Avoid saturated AI-brand gradients, dense SaaS panels, and indiscriminate use of the serif treatment.

## Known gaps and scope

This guide covers eight desktop-viewport captures: the home page, one engineering article, and one institute article. It does not cover the Claude product interface. The retained data did not provide measured color roles, font-family identities, shadow values, media inventory, complete component structure, interaction states, or cross-viewport behavior; no responsive rules are asserted.