anthropic.com website design: fonts, colors and UI patterns

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.

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.

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.