Home \ Anthropic

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/anthropic.com -->
<!-- Extracted: 2026-04-26T13:05:03.356Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "Home \\ Anthropic"
description: "Anthropic projects a serious, safety-first, and research-driven image, emphasizing responsibility in AI development. The brand feels authoritative and trustworthy, with a focus on impact and mitigating risks."
colors:
  primary: "#d97757"
  tertiary: "#c6613f"
  neutral: "#5e5d59"
  surface: "#f0eee6"
  on-surface: "#141413"
  border: "#e8e6dc"
  link: "#141413"
typography:
  display-lg:
    fontFamily: "Anthropic Sans"
    fontSize: "60.8653px"
    fontWeight: "700"
    lineHeight: "66.9518px"
  headline-lg:
    fontFamily: "Anthropic Serif"
    fontSize: "90.7755px"
    fontWeight: "400"
    lineHeight: "99.8531px"
  headline-md:
    fontFamily: "Anthropic Sans"
    fontSize: "24px"
    fontWeight: "600"
    lineHeight: "31.2px"
  body-md:
    fontFamily: "Anthropic Serif"
    fontSize: "20px"
    fontWeight: "400"
    lineHeight: "28px"
rounded:
  sm: "8px"
  lg: "12px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-secondary:
    backgroundColor: "#faf9f5"
    textColor: "#141413"
    rounded: "0px 0px 8px 8px"
    padding: "12px 31.4776px"
    fontSize: "18px"
    fontWeight: "600"
    borderColor: "#141413"
  button-outline:
    textColor: "#ffffff"
    rounded: "12px"
    padding: "8px 16px"
    fontSize: "12px"
    fontWeight: "500"
    borderColor: "#87867f"
    borderWidth: "1px"
  button-primary:
    backgroundColor: "#d97757"
    textColor: "#ffffff"
    rounded: "12px"
    padding: "8px 16px"
    fontSize: "12px"
    fontWeight: "500"
    borderColor: "#ffffff"
---

# Home \ Anthropic — Design System

## Overview

Anthropic's design system embodies the archetypes of The Sage and The Creator, reflecting a profound commitment to research, responsibility, and the ethical development of AI. This is a system built for clarity and authority, mirroring the gravitas found in organizations like OpenAI, DeepMind, Google AI, and Microsoft Research. The aesthetic prioritizes legibility and a serious, academic tone over overt flash or trend-driven design. It communicates trustworthiness and a meticulous approach to complex problems.

The design atmosphere is intentionally understated, focusing on substance and intellectual rigor. It is not playful, whimsical, or consumer-oriented in the traditional sense. There is no room for vibrant, high-contrast palettes or decorative elements that detract from the core message of safety-first, interpretable AI. The system rejects superficiality, instead opting for a clean, structured presentation that supports deep engagement with complex information. This is a design language for serious inquiry and impactful innovation, not for fleeting attention.

**Key characteristics:**

- Vibe — safety-first, research-driven, authoritative, responsible, serious, interpretable
- Archetypes — The Sage, The Creator
- Comparable to — OpenAI, DeepMind, Google AI, Microsoft Research
- Design era — contemporary-minimal
- Emotional tone — trustworthy-responsible
- Target audience — AI researchers, policymakers, ethical technology advocates, and organizations seeking reliable AI solutions.
- Visual energy — 3/10 (calm/understated)

## Colors

The color palette signals Anthropic's character through a deliberate choice of warmth and understated sophistication. The primary color, #d97757, is a grounded, earthy tone that conveys stability and a human-centric approach to technology. It avoids the coldness often associated with purely technical interfaces. The surface color, #faf9f5, provides a clean, neutral backdrop, ensuring content remains paramount and readability is optimized. This combination establishes a serious, approachable, and trustworthy visual identity, reinforcing the brand's responsible ethos.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#d97757` | Burnt Sienna |
| accent / tertiary | `#c6613f` | Indian Red |
| surface | `#f0eee6` | Linen |
| background | `#faf9f5` | Off-White |
| text | `#141413` | Near-Black |
| border | `#e8e6dc` | Gainsboro |
| link | `#141413` | Near-Black |
| muted | `#5e5d59` | Dark Gray |

## Typography

Anthropic's type system utilizes Anthropic Serif and Anthropic Sans to establish a clear hierarchy and communicate intellectual rigor. The pairing of a serif and sans-serif font provides versatility while maintaining a cohesive, authoritative voice. Serif fonts are employed for their traditional association with academic and formal texts, lending gravitas to headlines and key information. Sans-serif fonts ensure readability for body copy and digital interfaces, promoting clarity and directness. This dual-font strategy supports a sophisticated, research-driven presentation, emphasizing content over decorative flourishes.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Anthropic Serif | body | self-hosted | 400, 600 |
| Anthropic Sans | heading | self-hosted | 500, 600, 700 |
| Anthropic Serif | heading | self-hosted | 400 |
| Anthropic Sans | body | self-hosted | 400, 500 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Anthropic Sans | 60.8653px | 700 | 66.9518px | — |
| Heading 2 | Anthropic Serif | 90.7755px | 400 | 99.8531px | — |
| Heading 3 | Anthropic Sans | 24px | 600 | 31.2px | — |
| Body | Anthropic Serif | 20px | 400 | 28px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 28px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| dropdown | `rgba(0, 0, 0, 0.01) 0px 2px 2px 0px, rgba(0, 0, 0, 0.02) 0px 4px 4px 0px, rgba(0, 0, 0, 0.04) 0px 16px 24px 0px` |

## Shapes

Border-radius scale:

- `sm` — 8px
- `lg` — 12px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Secondary**

- Background — `#faf9f5`
- Text — `#141413`
- Radius — `0px 0px 8px 8px`
- Padding — `12px 31.4776px`
- Font size — `18px`
- Font weight — `600`
- Border — ` solid #141413`
- Sample copy — "Skip to main content"

**Outline**

- Text — `#ffffff`
- Radius — `12px`
- Padding — `8px 16px`
- Font size — `12px`
- Font weight — `500`
- Border — `1px solid #87867f`
- Sample copy — "Customize cookie settings"

**Primary**

- Background — `#d97757`
- Text — `#ffffff`
- Radius — `12px`
- Padding — `8px 16px`
- Font size — `12px`
- Font weight — `500`
- Border — ` solid #ffffff`
- Sample copy — "Accept all cookies"

## Do's and Don'ts

### Do

- Prioritize Anthropic Serif (400, 600) for body text and Anthropic Sans (500, 600, 700) for headings, with Anthropic Serif (400) also available for headings.
- Maintain a body line-height of 28px for optimal readability.
- Use sentence-case for all headings to maintain a consistent, accessible tone.
- Primary brand color #d97757 should be used for key interactive elements like primary buttons and highlights, contrasted with #faf9f5 background and #141413 text.
- Apply a subtle, multi-layer shadow for dropdowns: rgba(0, 0, 0, 0.01) 0px 2px 2px 0px, rgba(0, 0, 0, 0.02) 0px 4px 4px 0px.
- Implement rounded corners with a base unit of 2px, specifically 8px for small elements and 12px for larger interactive components like buttons.
- Construct primary buttons with a #d97757 background, #ffffff text, 12px border-radius, and a #ffffff border, with padding of 8px 16px.
- Use direct, action-oriented verbs in CTAs, often followed by specific topics or benefits, and incorporate light emoji and frequent exclamations in copy where appropriate to convey enthusiasm.

### Don't

- Avoid using gradients in any design elements, as the brand's aesthetic is flat and clean.
- Do not use sharp, 0px border radii for interactive elements, except for specific secondary button bottom edges (0px 0px 8px 8px).
- Refrain from using overly technical jargon without clear explanation; aim for a balance between technical accuracy and accessibility (4/10 technical score).
- Do not deviate from the specified color palette; avoid introducing new primary or accent colors.
- Avoid excessive or bold shadows; only use the subtle multi-layer shadow found for specific UI elements like dropdowns.
- Do not use title case for headings; strictly adhere to sentence-case.
- Avoid overly casual or playful language; maintain a serious and matter-of-fact tone (9/10 serious, 7/10 matter-of-fact).

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 2/10 | formal |
| Playful ↔ Serious | 9/10 | serious |
| Enthusiastic ↔ Matter-of-fact | 7/10 | matter-of-fact |
| Respectful ↔ Irreverent | 2/10 | respectful |
| Technical ↔ Accessible | 4/10 | technical |

### Copywriting style

- Avg. sentence length — 15 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct, action-oriented verbs often followed by specific topics or benefits
- Rhetorical devices — repetition

### Sample copy

> Anthropic is an AI safety and research company that's working to build reliable, interpretable, and steerable AI systems.

> AI research and products that put safety at the frontier

> AI will have a vast impact on the world. Anthropic is a public benefit corporation dedicated to securing its benefits and mitigating its risks.

> No ads. No sponsored content. Just genuinely helpful conversations.

> The first AI-assisted drive on another planet. Claude helped NASA’s Perseverance rover travel four hundred meters on Mars.

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/anthropic.com) | 100% |
| favicon | — | ico | [link](brands/anthropic.com/logo-0.ico) | 95% |
| favicon | — | png | [link](brands/anthropic.com/logo-1.png) | 95% |
| primary | — | svg | [link](brands/anthropic.com/logo-svg-2.svg) | 90% |
| primary | — | svg | [link](brands/anthropic.com/logo-svg-3.svg) | 90% |
| primary | — | svg | [link](brands/anthropic.com/logo-svg-4.svg) | 90% |
| primary | — | svg | [link](brands/anthropic.com/logo-svg-5.svg) | 90% |
| primary | — | svg | [link](brands/anthropic.com/logo-svg-6.svg) | 90% |
| primary | — | svg | [link](brands/anthropic.com/logo-svg-7.svg) | 90% |
| primary | — | svg | [link](brands/anthropic.com/logo-svg-8.svg) | 90% |

## Sources

- Official brand guidelines — https://brandfetch.com/anthropic.com
- Live brand page — https://extractvibe.com/brand/anthropic.com
- Raw JSON — https://extractvibe.com/api/brand/anthropic.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/anthropic.com/design.md
- Extracted — 2026-04-26T13:05:03.356Z
- Generator — ExtractVibe vv1
- Quality score — 100/100

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md