Design system — Claude (iOS app)

Verify each token against the source screenshots. Inferred from images, confirmed in interview. Copernicus/Styrene aren't web-available — specimens fall back to a serif/sans, so judge weight & role, not exact letterforms.

Colors · semantic roles, not raw values

accent

#D97757

burst logo, responding spark — the only chroma

ink

#131313

text, wordmark, dark buttons

text-muted

#7B7974

captions, section headers, chevrons

background

#F9F9F7

base canvas, every screen

surface-sunken

#F0EFEC

settings rows, file cards, model pill

surface-raised

#FFFFFF

input bar, elevated cards

surface-drawer

#F3F3F0

slide-out nav drawer

Typography · Copernicus (serif) + Styrene (sans)

Claudedisplay · Copernicus · 34 / 600

Welcome, Kaitlyntitle · Copernicus · 28 / 600

A line of assistant message text at body size.body · Copernicus · 17 / 400

Settings · New chatlabel · Styrene · 17 / 500

BY ANTHROPIC · Recents · Code · HTMLcaption · Styrene · 13 / 400

Spacing · base unit 8, used as multiples

space-1 · 4 (½×)

space-2 · 8 (1×)

space-4 · 16 (2×)

space-6 · 24 (3×)

space-8 · 32 (4×)

Radii

card · 16

sheet · 24

pill · 999

circle

Elevation

raised

floating

Components · grouped by type, built from the tokens above

Buttons & pills

Opus 4.8 High

Input bar

+ Chat with Claude 🎙 ●

Cards

</>

proof-sheet-templateCode · HTML

▤

SKILLDocument · MD

List rows

Account

◔Profile›

$BillingMax plan›

▦Usage›

Message bubble (user)

Can you make sure the use is asked about anything we put in the open / low confidence section.

Open / low-confidence

resolvedFonts confirmed: Copernicus (serif) + Styrene (sans).
resolvedAll four warm surfaces kept as distinct tokens.
resolvedBase spacing unit = 8pt.
excludedThe iOS-blue toggle (#3968B9, one appearance) is the native system control tint — intentionally not a brand token.

Source

IMG_2453 · splash

IMG_2454 · welcome

IMG_2456 · chat