# Anthropic · Design system migration spec

> Source: https://www.anthropic.com  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of how to build a premium, authoritative brand for a deep-tech company using restraint, typography, and a refined warm-neutral palette.

## 1. Identity DNA

The design system for Anthropic's digital presence functions like a modern academic institution filtered through the lens of a clean technology company. It is built to project both scholarly authority and the refined simplicity expected of a forward-looking research organization. The visual language is one of calm, considered restraint.

**One-liner:** An AI safety lab website balancing scholarly authority with modern simplicity.
**Keywords:** research · safety · public benefit · frontier · corporation
**Analogy:** A modern academic institution meets a clean tech company

## 2. Color

A warm, low-contrast neutral palette creates a calm, readable canvas. The colors are intentionally subdued, feeling human and sophisticated rather than clinical.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FAF9F5` | main background |
| `--bg-soft` | `#F0EEE6` | card background |
| `--bg-quiet` | `#E3DAC8` | quiet area |
| `--ink` | `#141413` | body text |
| `--muted` | `#B0AEA5` | placeholder |
| `--muted-soft` | `#87867F` | weak hint |
| `--line` | `rgba(20, 20, 19, 0.1)` | divider |

**Color principle:** Warm, low-contrast neutrals create a calm, readable canvas that feels human and sophisticated.

The principle is to maintain a warm, off-white ground that supports long-form reading and serious discourse.

## 3. Typography

Typography pairs a sharp, **grotesque-sans** for headlines and interface elements with a **transitional-serif** for body text, establishing a voice that is both authoritative and readable. Headlines are set tight and bold, while metadata uses uppercase for clear hierarchy.

- **Display:** grotesque-sans
- **Body:** transitional-serif
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 61px | 1.1 | 700 | -1px | Primary headline and hero statement |
| heading | 24px | 1.4 | 600 | -0.24px | Section headings and subheadlines |
| body | 20px | 1.4 | 400 | -0.08px | Main body copy and descriptive paragraphs |
| label | 12px | 1.4 | 400 | 0px | Metadata, navigation, and uppercase labels |

**Type rules:**
- Use grotesque-sans for display and UI elements.
- Use transitional-serif for long-form body text.
- Headlines should be tight and bold.
- Use uppercase for metadata labels.

## 4. Spacing

Generous vertical spacing establishes a clear rhythm between sections, allowing content to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 22 / 31 / 46 / 64 px
- **Rhythm:** Generous vertical spacing between sections, with tight leading on headlines.

## 5. Surfaces

Depth is conveyed through exceptionally subtle shadow layers and thin, low-opacity borders. The goal is definition, not decoration.

- **Radius:** sm 8px · md 16px · lg 24px · pill 999px
- **Shadows:**
  - 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
- **Borders:** 1px solid rgba(20, 20, 19, 0.1)

## 6. Layout

The layout skeleton begins with an asymmetric two-column hero, establishing a strong editorial stance. This gives way to a structured grid of content cards and a more list-based section for detailed information.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Asymmetric two-column hero followed by a grid of cards and a list-based content section.

## 7. Motion & Interaction

Motion is minimal and purposeful, used only to confirm interaction and guide focus. Fast micro-interactions like color transitions on hover maintain a sense of stability and calm.

- **Durations:** micro 100ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Color transitions on hover
  - Opacity changes on interactive states

- **Hover:** Subtle color transitions on links and buttons
- **Click:** Immediate feedback
- **Transition:** color 0.2s, background-color 0.2s
- **Keyboard:** Standard focus states

## 8. Voice & Don'ts

The editorial voice is authoritative yet accessible, focused on safety and human benefit. It avoids jargon and aggressive marketing language in favor of clear, slightly academic statements.

- **Tone:** Authoritative yet accessible, focused on safety and human benefit.
- **Headline style:** Bold, clear, and slightly academic.
- **CTA style:** Direct and action-oriented, often with an arrow.
- **Avoid:** Jargon-heavy or overly technical language. / Aggressive or hype-driven marketing copy. / Vague promises without a focus on safety.

### Don'ts
- ❌ Don't use high-saturation accent colors — screenshot shows a neutral, warm-toned palette.
- ❌ Don't use playful or rounded fonts — screenshot shows sharp, grotesque and transitional serif fonts.
- ❌ Don't use heavy drop shadows — screenshot shows very subtle, low-opacity shadows.
- ❌ Don't use dense, cramped layouts — screenshot shows generous vertical and horizontal spacing.
- ❌ Don't use all-caps for body text — screenshot shows all-caps only for small metadata labels.
- ❌ Don't use bright white backgrounds — screenshot shows a warm, off-white cream background.

The system deliberately avoids high-saturation colors, playful typography, and dense layouts to maintain its calm, scholarly integrity.

## System Prompt (paste into AI tool)

```
This is the website for Anthropic, an AI safety research lab. The design DNA is characterized by a calm, academic, and highly refined aesthetic. The primary background is a warm off-white (#FAF9F5) with dark charcoal text (#141413) and muted gray accents (#B0AEA5). The typography pairs a bold grotesque-sans for headlines with a readable transitional-serif for body copy, creating a scholarly yet modern feel. The layout is clean and spacious, utilizing a multi-column grid and asymmetric arrangements for the hero section. Key critical don'ts: do not use high-chroma or neon accent colors, as the palette is strictly neutral and warm; do not use rounded or playful typefaces, as the design relies on sharp, professional font categories; and do not crowd the layout with dense content, as the site prioritizes generous white space and a calm reading experience.
```