Design system · study copy · claude.ai web app · October 2026

Claude

A calm, warm, reading-first chat app. One box to type in, Claude's answers set in a book-like serif, almost no colour except a small orange spark. Since September 2026 chat, Cowork and the new Docs, Slides and Design outputs live in one place.

This page is built from claude.ai's own stylesheet (loaded by the public sign-in page on 12 Oct 2026), the real icon font (370 Anthropicons), the real logo, and pictures from Anthropic's own September 2026 launch videos, claude.com and the Claude help centre. We never signed in. Every value is tagged real (from claude.ai's files), measured (from real pictures) or est. (our guess).

What you notice first

1. Two voices. Your words are sans-serif in a soft grey bubble; Claude's words are serif with no bubble at all. It reads like a letter, not a chat.
2. Almost no colour. Warm greys from #FCFCFB to #0B0B0B. The only brand colour is clay orange (#D97757) on the spark and #C6613F on the send button.
3. One big box. The new-chat page is a greeting ("Good morning, Robin"), the composer, and three small pickers under it: Project or folder, Output, model.
4. Work opens beside the chat. Artifacts (docs, slides, designs, apps) open in a panel on the right, with their own toolbars, while the chat stays on the left.
5. Quiet motion. Text streams in word by word, the spark spins while Claude works, and a grey line shimmers with what it is doing.

Study use only. Claude, the spark, the Anthropicons icons and Anthropic's fonts belong to Anthropic. All names, companies and messages in our copies are made up.

Product screens

Six screens rebuilt only from this design system. Four are checked pixel by pixel against a real picture (share of pixels within 24/255, and the stricter "edges only" score on text and lines). Fonts are stand-ins and all text is made up, which keeps the edge scores near 45%. Dark switch at the top also switches the copies. All screens with notes.

Colours

Read live from claude/claude-tokens.css in both modes. The names in the last column are Claude's own (--cds-*).

The grey ramp (real: --cds-gray-*)

Every grey leans very slightly warm (yellow-green). Light mode uses the top of the ramp, dark mode the bottom.

Accent ramps (real)

Type

Three families: sans for the interface and your messages, serif for Claude's replies and big headings, mono for code. Sizes below are claude.ai's own at "comfortable" density real. Our stand-ins are tuned so lines are the same length: the sans gets +0.015em spacing, the serif uses optical size 12 ours.

Icons

The real set: every named glyph of Anthropicons, the variable icon font claude.ai loads, drawn as SVG at its default weight. Names are Claude's own. Click an icon to copy its SVG. real

Shape & space

Soft corners that grow with the size of the thing: 7–10px on controls, 12px on cards, menus and panels, 14px on the composer, 32px on the sign-in card. real

Heights and spacing

Shadows

Depth is a 1px ring plus a very soft shadow. In light mode the ring sits outside the box; in dark mode it moves inside real. Popovers get the only strong shadow.

Components

Every part is live: point, click, tab to it. Each has a Copy for Figma button (paste into Figma with Ctrl+V for real layers).

Buttons

Copy for Figma

PrimarySecondaryGhostBrandDeleteOutlineDisabled

Continue with emailContinue with GoogleSmall

Press and hold any button: it squishes to 97.5% in 60ms and springs back in 450ms real. Secondary = 10% white fill + 1px ring + tiny drop shadow (light); filled grey with no ring (dark).

Try it

A small working Claude: type a question and press Enter. The answer streams in; Stop works; the menus under the box open; the sidebar button shows the sidebar (Ctrl+.). Everything here is made up and nothing leaves your computer.

States & motion

Motion (press Play)

Dark mode

Claude's dark mode is near-black and almost neutral: page #151515, panels #1A1A19, menus #20201F, text #F0EFEC. Rings move inside boxes, the primary button turns white with black words, links turn light blue (#6DA7EC) and text gets thinner (weight 360). All dark colours are real (from the stylesheet). The only real dark picture is the sign-in page; every other dark screen is our build from those colours.

The help centre (Mar 2026) shows three colour modes: Light, Match system and Dark; and three chat fonts: Default (serif), Match system and Dyslexic friendly (OpenDyslexic, which the stylesheet also loads).

Do & don't

UX principles

Contrast & accessibility

Measured live from the tokens in both modes (WCAG 2.2: 4.5 for small text, 3 for large text and parts).

Accessibility checklist

• Keyboard: Enter sends, Shift+Enter new line, Ctrl+. sidebar, Ctrl+K search; menus open with Enter and move with arrow keys; Esc closes (our copies do the same).
• Focus is visible: a blue ring with a page-coloured gap on every control (real token).
• Dyslexia-friendly font and Atkinson Hyperlegible are loaded by the real stylesheet; chat text has small / medium / large sizes.
• Artifacts with a keyboard or screen reader have their own help article (Oct 2026).
• Muted text (#898781 on #FCFCFB) is about 3.5:1: fine for large text, too light for small grey labels. Use the secondary grey for anything people must read.
• Small icon buttons (28–32px) are below the 44px touch size on phones.
• Reduced motion: we stop the spin, shimmer and spring when the computer asks for less motion; we could not check the real app.

Laws of UX scorecard

All 29 laws from lawsofux.com, judged honestly from what we could see without signing in. Click a square to jump to a law.

Lessons for AltLeads

AltLeads is a sales-calling CRM: callers read a lead, call, write notes and plan the next step. Three places where Claude is a good teacher: an AI assistant panel, writing help, and a calm reading layout.

Copy & use

Link the two files, add class="cl-root" to the body (and cl-dark on html for dark), then use the parts.

Copy<link rel="stylesheet" href="claude/claude-tokens.css">
<link rel="stylesheet" href="claude/claude.css">
<script src="claude/claude-icons.js"></script>
<script src="claude/claude-kit.js"></script>
<body class="cl-root"> … <script>CLAUDE_KIT.icons()</script>

Copy<div class="cl-composer">
  <textarea rows="1" placeholder="How can I help you today?"></textarea>
  <div class="cl-composer-bar">
    <button class="cl-icon-btn" aria-label="Add files"><svg data-i="Add"></svg></button>
    <span class="grow"></span>
    <button class="cl-send" aria-label="Send"><svg data-i="ArrowUp"></svg></button>
  </div>
</div>

Copy<div class="cl-msg-user">your words</div>
<div class="cl-msg-claude"><p>Claude's words, in the serif</p></div>
<button class="cl-btn cl-btn--primary">Primary</button> <button class="cl-btn cl-btn--secondary">Secondary</button>
<button class="cl-switch" role="switch" aria-checked="true"><span></span></button>

Sources & gaps

Honest gaps

• No 2026 picture of the open sidebar, the Projects page or the model menu. Their words are real; their layout is our estimate.
• The launch videos may show colours from just before the "v2" greys (the page reads #FAF8F4 there; the live stylesheet says #FCFCFB). We follow the live stylesheet.
• Video screens are zoomed; we removed the zoom by matching text sizes (1.33x home, 1.44x chat, 2.29x settings). Small errors of 1–2px are possible.
• No real dark picture of the app itself; only the sign-in page. App dark screens use the real dark colours on our layouts.
• Mobile apps were not studied beyond the App Store pictures.

Full list of sources with sizes and dates: inspiration/claude/NOTES.md. Comparison with Open Design's built-in Claude system: built-in vs ours vs real.