AI Assistants / iOS / Android / Web

Claude

Claude reads like a well set page rather than a console: warm paper, a literary serif for headlines and one clay accent kept small.

Download
  • #D97757
  • #141413
  • #FAF9F5
  • #F0EEE6
  • #5E5D59
  • #6A9BCC

Color

Every color token in the file, grouped by role.

Brand

  • primary#141413
  • on primary#FAF9F5
  • brand#D97757
  • brand hover#C6613F
  • ink secondary#5E5D59
  • dark ink secondary#C2C0B6

Surfaces

  • canvas#FAF9F5
  • surface#FFFFFF
  • surface warm#F5F4ED
  • surface sunk#F0EEE6
  • dark canvas#141413
  • dark surface#1F1E1D

Text

  • ink#141413
  • ink body#30302E
  • ink faint#87867F
  • dark ink#FAF9F5

Lines

  • focus#C46849
  • border#D1CFC5
  • border soft#E8E6DC
  • dark border#30302E

Status

  • error#BF4D43

More

  • switch on#2C84DB
  • sky#6A9BCC
  • plum#827DBD
  • mineral#629987

Typography

Each style is set with the file's own family, size, weight and spacing.

  • anthropicSerifanthropicSerif is private and not available in open fonts. Shown in Source Serif 4, the closest open match.
  • anthropicSansanthropicSans is private and not available in open fonts. Shown in DM Sans, the closest open match.
  • display56px / 400 / 64.4px

    Claude

  • headline52px / 500 / 62.4px

    Claude

  • title32px / 500 / 35.2px

    Claude

  • lead18px / 400 / 24.75px

    The quick brown fox jumps over the lazy dog

  • body15px / 400 / 22.5px

    The quick brown fox jumps over the lazy dog

  • button15px / 500 / 24px

    Continue to checkout

  • button large17px / 500 / 25.5px

    Continue to checkout

  • caption12px / 400 / 18px

    Continue to checkout

Shape

Corner radius tokens.

  • radius 44px
  • radius 88px
  • radius button9.6px
  • radius 1212px
  • radius 1616px
  • radius 2424px

Spacing

The spacing scale, drawn to size.

  • space 44px
  • space 88px
  • space 1212px
  • space 1616px
  • space 2424px
  • space 3232px
  • space 4848px
  • space 6464px
  • space 9696px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button signin
    button-signin
  • button outline
    button-outline
  • menu panel
    menu-panel
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 126 lines
version: alpha
name: Claude-design-analysis
description: "An AI assistant drawn in warm paper neutrals: off-white #faf9f5, near-black #141413, Anthropic Serif headlines at regular weight over Anthropic Sans, and a small clay accent (#d97757) that never takes over."
status: Draft
appVersion: "measured in a browser from claude.com and anthropic.com, plus the color and space tokens the live site ships, 2026-11-01"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#141413"
  on-primary: "#faf9f5"
  brand: "#d97757"
  brand-hover: "#c6613f"
  focus: "#c46849"
  canvas: "#faf9f5"
  surface: "#ffffff"
  surface-warm: "#f5f4ed"
  surface-sunk: "#f0eee6"
  ink: "#141413"
  ink-body: "#30302e"
  ink-secondary: "#5e5d59"
  ink-faint: "#87867f"
  border: "#d1cfc5"
  border-soft: "#e8e6dc"
  error: "#bf4d43"
  switch-on: "#2c84db"
  sky: "#6a9bcc"
  plum: "#827dbd"
  mineral: "#629987"
  dark-canvas: "#141413"
  dark-surface: "#1f1e1d"
  dark-ink: "#faf9f5"
  dark-ink-secondary: "#c2c0b6"
  dark-border: "#30302e"

typography:
  # Font note: "anthropicSans" is a private font and is not available in open fonts. Closest open alternative: "DM Sans".
  # Font note: "anthropicSerif" is a private font and is not available in open fonts. Closest open alternative: "Source Serif 4".
  display:
    fontFamily: "anthropicSerif, Georgia, serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 64.4px
  headline:
    fontFamily: "anthropicSerif, Georgia, serif"
    fontSize: 52px
    fontWeight: 500
    lineHeight: 62.4px
  title:
    fontFamily: "anthropicSerif, Georgia, serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 35.2px
  lead:
    fontFamily: "anthropicSerif, Georgia, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 24.75px
  body:
    fontFamily: "anthropicSans, system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 22.5px
  button:
    fontFamily: "anthropicSans, system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 24px
  button-large:
    fontFamily: "anthropicSans, system-ui, sans-serif"
    fontSize: 17px
    fontWeight: 500
    lineHeight: 25.5px
  caption:
    fontFamily: "anthropicSans, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 18px

rounded:
  radius-4: 4px
  radius-8: 8px
  radius-button: 9.6px
  radius-12: 12px
  radius-16: 16px
  radius-24: 24px

spacing:
  space-4: 4px
  space-8: 8px
  space-12: 12px
  space-16: 16px
  space-24: 24px
  space-32: 32px
  space-48: 48px
  space-64: 64px
  space-96: 96px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.radius-8}"
    height: 36px
  button-signin:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-large}"
    rounded: "{rounded.radius-button}"
    height: 44px
    padding: 8px 20px
  button-outline:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-large}"
    rounded: "{rounded.radius-button}"
    height: 44px
    padding: 8px 20px
  menu-panel:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.radius-12}"
    width: 200px

Overview

Claude is an AI assistant from Anthropic, available in the browser and in iOS and Android apps. Its public pages are drawn from a warm neutral ramp the live site ships as named tokens. Every gray leans warm, headlines are serif at regular weight, and clay is a small accent rather than a fill. [Measured]

What defines the look:

  1. A warm gray ramp. Named steps from #faf9f5 to #141413, with no cool neutral. [Measured]
  2. Serif headlines at regular weight. Anthropic Serif at 400 and 500, never bold. [Measured]
  3. Clay stays small. #d97757 and its hover #c6613f appear on very little of the page, and focus rings use #c46849. [Measured]
  4. Near-black for the main action. Buttons fill #141413 with off-white text instead of using the brand color. [Measured]
  5. A matching dark theme. The same ramp inverts, with #141413 as the page. [Measured]

Source for this file: the claude.com home and pricing pages and the anthropic.com home page, measured in a browser at 1440 and 390 wide on 2026-11-01 with a dark color scheme pass, plus the tokens the live site declares on its root element. The signed-in chat product was not reached. No app captures were used. See Known Gaps.

Core

Colors

RoleValueToken name in the shipped set
Main button and ink#141413gray 950 [Measured]
Page#faf9f5gray 050 [Measured]
Warm surfaces#f5f4ed, #f0eee6, #e8e6dcgray 100, 150, 200 [Measured]
Text steps#30302e, #5e5d59, #87867fgray 750, 600, 500 [Measured]
Borders#d1cfc5, #dedcd1, #e8e6dc, #f0eee6gray 300 to 150 [Measured]
Brand clay#d97757, hover #c6613f, focus #c46849clay, clay hover, clay dark [Measured]
Statuserror #bf4d43, switch on #2c84dberror, switch on [Measured]
Extrassky #6a9bcc, plum #827dbd, mineral #629987, cactus #bcd1ca, heather #cbcadb, peach #ebc9b7named brand colors [Measured]
Darkpage #141413, surfaces #1f1e1d, #1a1918, #262624, text #faf9f5, #c2c0b6, #87867f, borders #30302e, #3d3d3asame ramp [Measured]

Typography

RoleDesktopMobileFace and weight
Display56 on 64.451.2 on 58.9Anthropic Serif 400 [Measured]
Pricing title64 on 70.437.75 on 41.5Anthropic Serif 500 [Measured]
Headline52 on 62.435.1 on 42.2Anthropic Serif 500 [Measured]
Title32 on 35.223.6 on 25.9Anthropic Serif 500 [Measured]
Lead18 on 24.7516 on 22Anthropic Serif 400 [Measured]
Body15 on 22.5sameAnthropic Sans 400 [Measured]
Price24 on 38.422.1 on 35.4Anthropic Sans 600 [Measured]
Button15 on 24, 17 on 25.517Anthropic Sans 500 [Measured]
Small12 on 18sameAnthropic Sans 400 [Measured]

Shape and spacing

Radius tokens are 2, 4, 6, 8, 12 and 16. In use: small buttons 8, sign-in buttons 9.6, segmented tabs and white dropdown menus 12. Radii of 24 and 32 also appear on larger elements that were not identified. [Measured] Space tokens run 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 80, 96, 128 and 200. [Measured]

Iconography and motion

Not measured. [Inferred]

Themes

Light and dark on the web. The dark pass follows the system setting and keeps the same warm ramp. [Measured]

Platform: iOS

How the Claude app looks and behaves was not captured. Tokens a website ships are evidence for the web only, so every item below is inferred. No device capture was done.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Not measured. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

Not measured. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

Not measured. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-11-01 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share the warm neutral ramp, the clay accent and the serif and sans pairing with the web. [Inferred]

Platform: Android

How the Claude app looks and behaves was not captured. Tokens a website ships are evidence for the web only, so every item below is inferred. No device capture was done.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Not measured. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

Not measured. [Inferred]

Main action

Expected on Android: Floating action button.

Not measured. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-11-01 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share the warm neutral ramp, the clay accent and the serif and sans pairing with the web. [Inferred]

Platform: Web

The claude.com home and pricing pages and the anthropic.com home page, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A top bar of plain text menus, 15px at weight 400 in #30302e on 40 high targets, with Login and a near-black Try Claude button. [Measured]

Main action

Expected on Web: Page-level button.

A near-black #141413 button with off-white 15px medium text, 8 radius and 36 high. Sign-in stacks full width buttons 44 high at 9.6 radius, the filled one for email and outlined ones with a 1px #d1cfc5 border for Google and SSO. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Plan tabs are 40 high at 12 radius with 12px text, and the selected tab sits on white. [Measured]

Text sizing

Expected on Web: Browser zoom.

Headline sizes scale fluidly between the desktop and mobile widths. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Sign-in buttons are 44 high and nav items 40. The Try Claude button is 36 on desktop and 40 at the mobile width. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Sign-in offers Google, email and SSO on the public page. Other rules were not checked. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

A responsive site that keeps its warm ramp and serif headlines at every width, and follows the system dark setting. [Measured]

Cross-platform consistency

Consistent across platforms: the warm neutral ramp, the clay accent and the serif and sans pairing. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Use warm grays only, from #faf9f5 to #141413.
  • Set headlines in the serif at 400 or 500.
  • Fill the main button with near-black.
  • Keep clay to small accents and focus states.

Don't

  • Don't use cool grays or pure black text.
  • Don't set headlines bold.
  • Don't fill large areas with clay.
  • Don't use full pills on the main buttons. Corners stay at 8 to 12.

Known Gaps

  • The signed-in chat, including the message list and composer, was not measured. This file covers public pages only.
  • The iOS and Android apps were not captured, so every mobile topic is inferred.
  • Icons, motion and dialogs were not measured.
  • anthropicSans and anthropicSerif are private. DM Sans is within 1 percent at 40px and has similar round forms. Source Serif 4 is 2 percent wider at 56px and was chosen over Bitter, which matched width more closely but looks more slab-like. Noto Sans matched sans width equally well but its forms are less geometric.
  • Account deletion and store sign-in rules were not verified.