name: claude-design
version: alpha
description: >
  Anthropic's warm, literary canvas for Claude: a signature cream page
  (#faf9f5) rather than stark white, headlines set in Anthropic Serif at a
  notably LIGHT weight (~330) paired with Anthropic Sans for everything else.
  The one brand voltage is "Clay" #d97757 — a terracotta orange used almost
  only for the asterisk logomark and the rare accent. Actions are solid black
  pill buttons; the footer flips to true black. Geometry is gently rounded
  (small 4px tokens, pill buttons, ~24px cards) and elevation is whisper-soft.
  Signature moves: serif-display-over-cream calm, and the 8-spoke asterisk mark.
colors:
  # Brand
  primary: '#000000'          # solid-black action surface ("Try Claude")
  on-primary: '#ffffff'
  brand-clay: '#d97757'       # terracotta — the logomark + rare accent
  brand-clay-emphasized: '#c6613f'
  # Text / ink (warm near-blacks, never pure)
  on-surface: '#141413'       # headings / titles
  on-surface-strong: '#1f1e1d' # primary text
  on-surface-secondary: '#3d3d3a' # body copy
  on-surface-muted: '#73726c'  # captions/footnotes (approx)
  # Surface
  surface: '#faf9f5'          # the signature warm cream page
  surface-card: '#ffffff'     # plan cards lift slightly off the cream
  surface-subtle: '#f0efe6'   # segmented control track (approx)
  # Hairlines
  hairline: '#e7e6e1'         # cds-gray-80
  border-field: 'rgba(31,30,29,0.15)'
  # Inverse (footer is true black)
  surface-inverse: '#000000'
  on-inverse: '#ffffff'
  on-inverse-muted: 'rgba(248,248,247,0.75)'  # cds-oncolor-200/300
  # Anthropic secondary palette (illustration / pictogram accents, used sparingly)
  heather: '#cbcadb'
  plum: '#827dbd'
  cactus: '#bcd1ca'
  mineral: '#629987'
  peach: '#ebc9b7'
typography:
  font-serif: '"Anthropic Serif", Georgia, "Times New Roman", serif'  # closest OSS: Tiempos / Lora
  font-sans: '"Anthropic Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'  # closest OSS: Inter / Styrene-like
  font-mono: '"Anthropic Mono", ui-monospace, monospace'  # closest OSS: JetBrains Mono / IBM Plex Mono
  display:                  # hero "Think fast, build faster" — SERIF, light
    fontFamily: '{typography.font-serif}'
    fontSize: 72px
    fontWeight: 330
    lineHeight: 1.1
  heading-section:          # "Explore plans", "Frequently asked questions" (serif)
    fontFamily: '{typography.font-serif}'
    fontSize: 56px          # h2 computed 56px
    fontWeight: 330
    lineHeight: 67px
  heading-card:             # "Free" / "Pro" / "Max" (serif)
    fontFamily: '{typography.font-serif}'
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.2
  body-lg:
    fontFamily: '{typography.font-sans}'
    fontSize: 17px
    fontWeight: 400
    lineHeight: 25.5px
  body:
    fontFamily: '{typography.font-sans}'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  label:
    fontFamily: '{typography.font-sans}'
    fontSize: 15px
    fontWeight: 400
    lineHeight: 22.5px
  caption:
    fontFamily: '{typography.font-sans}'
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
rounded:
  base: 4px                 # --cds-radius (0.25rem)
  field: 10px               # input ~9.6px
  card: 24px                # plan cards (approx)
  full: 9999px              # pill buttons + segmented control
spacing:
  base: 8px
  scale: [4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px]
shadow:
  sm: '0 1px 2px 0 rgba(0,0,0,0.05)'                              # --cds-shadow-sm
  md: '0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10)'  # --cds-shadow-md
  lg: '0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10)' # --cds-shadow-lg
components:
  button-primary:           # "Try Claude" / "Continue with email"
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label}'
    rounded: '{rounded.full}'
    padding: '12px 24px'
  button-secondary:         # "Continue with Google" / "Download desktop"
    backgroundColor: '{colors.surface-card}'
    textColor: '{colors.on-surface-strong}'
    borderWidth: 1px
    borderColor: '{colors.hairline}'
    rounded: '{rounded.full}'
  input:
    backgroundColor: '{colors.surface-card}'
    textColor: '{colors.on-surface}'
    borderWidth: 1px
    borderColor: '{colors.border-field}'
    rounded: '{rounded.field}'
    padding: '0 12px'
  card-plan:                # Free / Pro / Max
    backgroundColor: '{colors.surface-card}'
    textColor: '{colors.on-surface}'
    rounded: '{rounded.card}'
    shadow: '{shadow.sm}'
  segmented-control:        # "Individual / Team and Enterprise"
    trackColor: '{colors.surface-subtle}'
    thumbColor: '{colors.surface-card}'
    rounded: '{rounded.full}'
  accordion-faq:
    iconColor: '{colors.on-surface}'   # "+" toggle, serif question text
motion:
  easing-out: 'cubic-bezier(0, 0, 0.2, 1)'   # --cds-ease-out
  # Calm, short, functional fades/expands. No bounce, no parallax.
icons:
  style: outline
  stroke: ~1.5px
  sizes: { sm: 16px, md: 20px, lg: 24px }
  color-rules: 'Monoline, inherit ink. The 8-spoke asterisk logomark renders in Clay #d97757.'

Claude

claude-design — version alpha

Surfaces studied via Playwright (claude.ai marketing/login + pricing): computed styles + :root custom properties. Anthropic exposes a deep --cds-* ("Claude Design System") token layer — fonts, the clay brand color, radius, shadow ladder and an HSL gray/semantic ramp — so brand values here are high-confidence extractions. The cream page background #faf9f5 is reported as well-known Anthropic brand knowledge (marked approximate to the nearest hex).

Overview

Claude's surface is deliberately warm and literary, not the default SaaS white. The page sits on a cream {colors.surface} (~#faf9f5) and headlines are set in Anthropic Serif at a light weight (~330) — "Think fast, build faster" reads like a book title, calm and confident — while Anthropic Sans carries all UI, body and labels. The brand's one chromatic signature is "Clay" {colors.brand-clay} #d97757, a terracotta orange that appears almost exclusively as the 8-spoke asterisk logomark and the occasional accent; it is not the button color. Actions are instead solid black pill buttons ({rounded.full}), which keeps the warm palette uncluttered and lets the serif + cream do the brand work. Geometry is gently rounded (a 4px base token, ~10px fields, ~24px cards, full-pill buttons) and elevation is whisper-soft (a restrained sm/md/lg shadow ladder). The footer flips to true black for a grounded close. Signature moves: serif-display-on-cream serenity and the asterisk mark in clay.

Colors

• Clay — {colors.brand-clay} #d97757 (emphasized #c6613f). The terracotta brand hue. Discipline rule: it is reserved for the logomark and rare accents (an occasional link/illustration touch). It is deliberately not used for primary buttons — Anthropic keeps action neutral-black so the warm hue stays special.
• Action black — {colors.primary} #000. All primary CTAs ("Try Claude", "Continue with email") are solid black pills with white text.
• Ink, all warm near-blacks (never pure): titles/headings {colors.on-surface} #141413, primary text {colors.on-surface-strong} #1f1e1d, body copy {colors.on-surface-secondary} #3d3d3a, muted captions ~#73726c. The whole ink ramp is faintly warm to sit on cream.
• Surfaces: cream page {colors.surface}; white {colors.surface-card} for plan cards that lift slightly off the cream; a subtle warm fill for the segmented-control track. Hairlines {colors.hairline} #e7e6e1.
• Inverse: the footer is true black {colors.surface-inverse} with white text and cds-oncolor translucent whites (#f8f8f7 at 75%/50%) for secondary labels.
• Anthropic secondary palette — heather #cbcadb, plum #827dbd, cactus #bcd1ca, mineral #629987, peach #ebc9b7. These are pictogram/illustration accents (used in the plan-card sprouting-plant glyphs), never as UI fills.

Typography

• Anthropic Serif (fallback Georgia/Times) — display & section headings. Closest open-source substitute: Tiempos Text or Lora. The defining choice is its light weight (~330) at large sizes.
• Anthropic Sans (fallback system-ui/Inter-like) — body, labels, buttons, nav. Closest OSS: Inter (or a Styrene-like grotesque).
• Anthropic Mono — code. Closest OSS: JetBrains Mono / IBM Plex Mono.

Token	Family	Size	Weight	Line-height	Usage
display	serif	72px	330	1.1	Hero ("Think fast, build faster")
heading-section	serif	56px	330	67px	"Explore plans", "Frequently asked questions"
heading-card	serif	36px	400	1.2	Plan names (Free/Pro/Max)
body-lg	sans	17px	400	25.5px	Lead paragraphs
body	sans	16px	400	24px	Base body, inputs
label	sans	15px	400	22.5px	Buttons, list items
caption	sans	14px	400	21px	Links, footnotes

Layout

Base rhythm is 8px. Content is centered and column-constrained with very generous vertical whitespace — sections breathe. The hero is a single centered serif headline + sub-line + auth card. The pricing block is a 3-up equal-width card grid (Free / Pro / Max) above a centered FAQ accordion. The footer is a wide multi-column link directory (Products / Solutions / Resources / Help / Company) on black. The whitespace philosophy is editorial calm, not density.

Elevation & Depth

A soft, shallow ladder: {shadow.sm} for resting cards, {shadow.md}/{shadow.lg} for popovers/menus — all low-opacity (≤10%) black. Cards rely more on the white-on-cream contrast than on shadow. No gradients, no glassmorphism.

Shapes

Rounded but controlled: a 4px base ({rounded.base}, --cds-radius), ~10px form fields, ~24px content cards, and full pills ({rounded.full}) for buttons and the segmented control. The result is friendly and modern without being bubbly.

Components

• Primary button {components.button-primary} — solid black pill, white label, ~12px×24px padding.
• Secondary button {components.button-secondary} — white pill with a #e7e6e1 hairline ("Continue with Google", "Download desktop").
• Input {components.input} — white, 1px translucent-ink border (rgba(31,30,29,0.15)), ~10px radius.
• Plan card {components.card-plan} — white, ~24px radius, soft sm shadow; serif plan name, big price, black "Try Claude" CTA, checkmark feature list.
• Segmented control {components.segmented-control} — pill track in warm subtle fill with a white moving thumb ("Individual / Team and Enterprise").
• FAQ accordion {components.accordion-faq} — serif questions with a thin "+" toggle on the right.

Motion

Calm and functional: {motion.easing-out} (cubic-bezier(0,0,0.2,1)) for short fades and accordion expands. No bounce/spring, no parallax, no fade-up cascades — motion never competes with the editorial stillness.

Iconography

Thin outline monoline icons (checkmarks in feature lists, "+" accordion toggles, social glyphs, the apple/Google marks). The hero logomark is an 8-spoke asterisk rendered in Clay #d97757 — the one place the brand hue is guaranteed to appear. Sizes 16/20/24px, ink-inherited otherwise.

Do's and Don'ts

• Do keep the page on warm cream {colors.surface}, not white.
• Do set display/section headings in Anthropic Serif at a light weight (~330).
• Do make primary actions solid black pills; keep the palette neutral so clay stays rare.
• Do reserve Clay #d97757 for the logomark and the occasional accent only.
• Do use warm near-black inks (#141413 / #1f1e1d / #3d3d3a), never pure #000 for text.
• Don't turn buttons clay/orange — action is black.
• Don't set body or UI in the serif; serif is for display/headings.
• Don't add heavy shadows or gradients; keep elevation shallow.
• Don't use the secondary palette (heather/plum/cactus/mineral/peach) as UI fills — they are illustration accents.

Known Gaps

• The cream page hex (#faf9f5) and muted-ink (#73726c) are nearest-hex approximations; the live --cds-page-bg/text vars resolve through an HSL ramp that was partly truncated in extraction.
• Exact card radius (≈24px) and segmented-track fill are inferred from rendering, not a named token.