# Anthropic — Design System
> Anthropic is an AI safety and research company focused on building reliable, interpretable, and steerable AI systems.
- **Canonical:** https://uiuxskills.com/library/anthropic
- **Source:** https://www.anthropic.com/
- **Category:** AI & LLM Platforms
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:17:59.385Z

---

---
version: alpha
name: Anthropic
description: AI safety and research company building reliable, interpretable, and steerable AI systems.
tone: Serious, academic, transparent, and mission-driven.
color-scheme: light
colors:
  primary: "#000000"
  secondary: "#F5F5F5"
  surface: "#FFFFFF"
  surface-dim: "#EAEAEA"
  on-surface: "#000000"
  on-primary: "#FFFFFF"
  outline: "#D1D1D1"
  error: "#D93025"
  success: "#188038"
  focus-ring: "#0055FF"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
  label-sm:
    fontFamily: sans-serif
    fontSize: 0.75rem
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 12px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    width: fit-content
  button-primary-hover:
    backgroundColor: "#333333"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field:
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#555555"
  badge:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FDE7E7"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-secondary:
    backgroundColor: "{colors.secondary}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

Anthropic maintains a highly minimal, academic, and serious visual identity. The brand prioritizes clarity and high-contrast typography over decorative elements, reflecting its focus on safety and research.

## Colors

The color palette is strictly monochromatic, utilizing a high-contrast black-and-white foundation to ensure maximum readability and a professional, research-focused aesthetic.

*   Primary (#000000): The core brand color used for all primary text, navigation, and high-impact UI elements.
*   Secondary (inferred) (#F5F5F5): A neutral, light gray used for subtle background fills and section containers.
*   Surface (#FFFFFF): The primary background color for the site.
*   Surface-dim (inferred) (#EAEAEA): A muted gray used for dividers and secondary UI elements to provide subtle visual separation.
*   On-surface (#000000): The standard text color applied across white surfaces.
*   On-primary (inferred) (#FFFFFF): The high-contrast text color used for buttons and dark-themed elements.
*   Outline (inferred) (#D1D1D1): The structural border color for cards and input fields.
*   Error (inferred) (#D93025): A semantic color reserved strictly for critical validation states.
*   Success (inferred) (#188038): A semantic color used for positive status indicators.
*   Focus-ring (inferred) (#0055FF): A high-visibility blue used exclusively for accessibility focus states.

## Typography

The typography system relies on a single sans-serif font family to maintain a clean, academic, and cohesive reading experience across all screen sizes.

*   Display-lg (inferred): Used for hero headlines to establish immediate authority.
*   Display-md (inferred): Used for major section headers.
*   Headline-lg (inferred): Used for primary card titles.
*   Headline-md (inferred): Used for sub-headers within content blocks.
*   Body-md (inferred): The standard font size for all long-form research content and descriptive text.
*   Label-sm (inferred): Used for metadata, tags, and small UI labels.

## Layout

The site utilizes a clean, grid-based layout with generous whitespace and a 16px base gutter. The page structure follows a vertical stack: nav, hero, latest-releases, features, and footer. The hero pattern features a centered headline and subhead with a direct mission statement. The interface is mobile-first, with navigation collapsing into a menu on smaller screens to prioritize content focus.

## Elevation & Depth

Elevation is used sparingly, primarily to distinguish cards from the background using subtle, single-layer shadows. The values are inferred based on the brand's minimal aesthetic.

*   Elevation.sm: Used for subtle card lift.
*   Elevation.md: Used for standard card components and popovers.
*   Elevation.lg: Used for modal or drawer overlays.

## Shapes

The brand employs a conservative approach to geometry, favoring subtle rounding on components to maintain a clean, professional look. The radius scale ranges from 2px for small UI elements to 12px for larger containers, avoiding aggressive curvature to keep the aesthetic grounded and serious.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
The button component uses `{colors.primary}` for the background and `{typography.label-sm}` for the label. It is designed to be direct and concise, with a clear hover state using `{button-primary-hover}` to signal interactivity.

### Card
The card component serves as the primary container for research content. It utilizes `{colors.surface}` with a `{colors.outline}` border and `{rounded.md}` corners, providing a clean, structured appearance without excessive elevation.

### Badge
Badges are used for categorization and status. They rely on `{colors.surface-dim}` for a neutral background or semantic colors like `{colors.success}` for positive indicators, ensuring they remain secondary to the main content.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Do not use bright or saturated colors for backgrounds. |
| Apply `{typography.body-md}` for all long-form content. | Avoid using `{typography.display-lg}` for body text. |
| Use `{colors.outline}` for all structural dividers. | Never use `{colors.error}` for non-critical UI elements. |
| Maintain consistent `{spacing.md}` between card elements. | Do not apply heavy shadows to `{components.card}`. |
| Use `{rounded.md}` for all interactive cards. | Avoid using rounded corners larger than `{rounded.xl}`. |
| Ensure all links use `{colors.primary}` for clarity. | Do not mix multiple font families. |
| Use `{components.input-field-focus}` for accessibility. | Do not remove focus rings from interactive elements. |
| Use `{components.badge-success}` for status updates. | Do not use decorative icons that distract from research. |

## Content Style

CTA labels should be direct, action-oriented, and concise. Use standard verbs that clearly describe the outcome of the interaction, such as "Read the story" or "Model details."

Headings should maintain an authoritative, research-focused tone. They should be declarative and clear, avoiding marketing fluff in favor of transparency and mission-driven language.

Copy density should be high, informative, and scannable. Use short paragraphs and clear, logical hierarchies to ensure that research-heavy content remains accessible and easy to digest.

## Imagery & Icons

Imagery is sparse, focusing on clean, high-quality photography and simple, functional icons. The visual language favors a minimal-icon approach, where graphics serve to clarify information rather than decorate the interface. All assets should adhere to the brand's serious, academic tone, avoiding illustrative styles that conflict with the professional identity.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Anthropic, a serious, mission-driven AI safety and research brand. Apply visual design tokens from the spec with strict fidelity to its minimal, high-contrast aesthetic. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.md}` — never hardcode hex values, pixel sizes, or font strings.
2. Use only the components defined under `components:`. Do not invent variants (e.g., a pill button, an outlined card) that the spec does not list.
3. Follow the Layout section for page structure: vertical stack of nav → hero → content sections → footer, mobile-first, collapsing nav at small viewports, one breakpoint at 768px unless the spec states otherwise.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g., adding a saturated background color), surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source such as a theme file or Storybook exists, those values override the spec.

## Output contract

**Must:**
- Use token names for all colors, spacing, radii, typography, and elevation values.
- Include hover, focus, and disabled states for every interactive component the spec defines — especially `{components.input-field-focus}` and `{components.button-primary-hover}`; never remove focus rings.
- Apply `{colors.focus-ring}` exclusively for focus states; do not repurpose it as a decorative color.
- Use `{spacing.md}` as the base gutter; follow the full `{spacing.xs}` – `{spacing.2xl}` scale for all gaps and padding.
- Write CTAs and headings in the direct, declarative tone described in Content Style (e.g., "Read the story", not "Explore now!").

**Must NOT:**
- Introduce colors, font families, radii, or elevation levels absent from the spec.
- Use generic utility defaults when a brand token exists.
- Add decorative icons, illustrative elements, emoji, or marketing copy.
- Apply `{colors.error}` to non-critical UI or use `{typography.display-lg}` for body text.
- Rewrite existing page copy, button labels, or alter navigation structure as a side effect of applying tokens.

## When in doubt
- If the spec does not define a value, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For background roles, default to `{colors.surface}`; for text on light surfaces, use `{colors.on-surface}`; for primary actions, use `{colors.primary}`.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px.
- Elevation is used sparingly: `{elevation.sm}` for subtle card lift only; never apply `{elevation.lg}` to cards.