---
name: Anthropic
description: "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."
version: alpha

colors:
  background: "#FAF9F5"
  primary: "#141413"
  neutral: "#B0AEA5"
  bg-soft: "#F0EEE6"
  bg-quiet: "#E3DAC8"
  muted-soft: "#87867F"
  line: "rgba(20, 20, 19, 0.1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 61px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-1px"
  heading:
    fontFamily: transitional-serif
    fontSize: 24px
    lineHeight: 1.4
    fontWeight: 600
    letterSpacing: "-0.24px"
  body:
    fontFamily: transitional-serif
    fontSize: 20px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "-0.08px"
  label:
    fontFamily: transitional-serif
    fontSize: 12px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 8px
  md: 16px
  lg: 24px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 22px
  2xl: 31px
  3xl: 46px

---

## Overview

An AI safety lab website balancing scholarly authority with modern simplicity.

*A modern academic institution meets a clean tech company*

## Colors

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

- **Background (`#FAF9F5`)** — uses `bg` token
- **Primary text (`#141413`)** — uses `ink` token
- **Muted (`#B0AEA5`)** — uses `muted` token
- **Borders (`rgba(20, 20, 19, 0.1)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*Rhythm:* Generous vertical spacing between sections, with tight leading on headlines.

## Elevation & Depth

- 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)

## Shapes

- `sm`: 8px
- `md`: 16px
- `lg`: 24px
- `pill`: 999px

## Components

- **button:** Dark solid button with white text and arrow icon, or outlined button with dark text.
- **card:** Warm beige background card with thin internal dividers and bottom-aligned action button.
- **chip:** N/A
- **input:** N/A
- **hero:** Large bold grotesque headline with serif body text positioned to the right.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```