The built-in system copies Claude's marketing website (claude.com): cream "parchment" pages, terracotta buttons and serif headlines. Our copy is the app at claude.ai as it is in October 2026: an almost white page (Claude's "colour version 2"), black main buttons, orange only on the send button and the spark, serif only for Claude's replies, and the real icons. They agree on the warm greys, the coral spark colour and ring-style borders.
Values come from each system's own files; "real" means read from claude.ai's stylesheet (12 Oct 2026). Colour verdicts are measured in OKLab: under 0.012 counts as the same, under 0.05 as close, anything above as different.
4the same
15close
17different
6only in our copy
Which one to use
For the AltLeads CRM (an app), use our copy as the Claude reference: the real app colours and sizes, the composer, messages, artifact panel, settings, 370 icons, and Claude's real dark mode.
Use the built-in for something that should feel like claude.com: a landing page, a deck or an email in Anthropic's marketing style.
Side by side
The same parts, drawn by each system's own CSS, row for row. Left: the built-in. Right: our copy.
Built-inOpen Design's Claude package
Part
Our copyfrom the real claude.ai app
Colours
Swatches show each colour; "Our copy" values are claude.ai's own (real).
| What | Built-in | Our copy (real app) | Verdict | In plain words |
|---|---|---|---|---|
| Page background | #f5f4ed--bg (Parchment) | #fcfcfb--cds-surface-1 (body) | Closedifference 0.026 | The built-in uses the old cream "parchment" of claude.com. The app (colour version 2, Sep 2026) is an almost white #FCFCFB. |
| Deeper page | #f5f4ed--bg | #f9f9f7--cds-surface-0 / page-bg | Closedifference 0.017 | |
| Cards, panels, composer | #faf9f5--surface (Ivory) | #ffffff--cds-surface-2 | Closedifference 0.019 | The app draws panels and the composer pure white. |
| Main text | #141413--fg | #0b0b0b--cds-text-primary | Closedifference 0.041 | Both near-black; the app is a touch darker and more neutral. |
| Secondary text | #5e5d59--muted (Olive Gray) | #52514e--cds-text-secondary | Closedifference 0.043 | |
| Muted text | #87867f--meta (Stone Gray) | #898781--cds-text-muted | Samedifference 0.005 | Almost the same grey. |
| Border | #f0eee6--border (Border Cream) | #e3e3e2--cds-border = 10% black | Closedifference 0.034 | The app draws lines with 10% black, so they are clearly visible; the built-in cream line almost disappears. |
| Main button | #c96442--accent (Terracotta) | #0b0b0b--cds-fill-primary | Differentdifference 0.487 | Biggest difference: in the app the main button is black (white in dark). Orange is only the send button and the spark. |
| Brand orange (send button) | #c96442--accent | #c6613f--cds-fill-brand (clay-emphasized) | Samedifference 0.009 | The built-in terracotta is nearly the real send-button orange. |
| Spark / coral | #d97757Coral Accent | #d97757--cds-clay | Samedifference 0.000 | Exactly the same. |
| Focus / accent blue | #3898ecFocus Blue | #2a78d6--cds-fill-accent | Differentdifference 0.091 | Both use blue only for focus and switches; the app's blue is deeper. |
| Link | #3d3d3a--fg-2 (Dark Warm) | #184f95--cds-text-accent | Differentdifference 0.152 | App links are blue, not dark grey. |
| Danger | #b53333--danger (Error Crimson) | #d03b3b--cds-fill-danger | Differentdifference 0.059 | |
| Success | #17a34a--success | #009300--cds-fill-success | Differentdifference 0.062 | |
| Warning | #eab308--warn | #fab219--cds-fill-warning | Closedifference 0.027 |
| What | Built-in | Our copy (real app) | Verdict | In plain words |
|---|---|---|---|---|
| Page background | #141413Deep Dark (DESIGN.md) | #151515--cds-surface-1 dark | Samedifference 0.005 | Very close. (The built-in dark kit itself uses Open Design's generic cool #0f1115.) |
| Panels | #30302eDark Surface | #1a1a19--cds-surface-2 dark | Differentdifference 0.091 | The app keeps panels only a little lighter than the page. |
| Menus | #30302eDark Surface | #20201f--cds-surface-3 dark | Differentdifference 0.065 | |
| Main text | #faf9f5Ivory on dark | #f0efec--cds-text-primary dark | Closedifference 0.030 | |
| Secondary text | #b0aea5Warm Silver | #c3c2b7--cds-text-secondary dark | Differentdifference 0.062 | |
| Main button | #c96442Terracotta | #ffffff--cds-fill-primary dark | Differentdifference 0.407 | App: white button with black words. |
| Link | #d97757Coral (links on dark) | #6da7ec--cds-text-accent dark | Differentdifference 0.242 | App links stay blue in dark. |
Type
| What | Built-in | Our copy (real app) | Verdict | In plain words |
|---|---|---|---|---|
| Fonts | "Anthropic Serif" / "Anthropic Sans" / "Anthropic Mono" by name (not installed, so Georgia and Arial show) | anthropic-serif / sans / mono (real names in the app); free stand-ins Source Serif 4, Instrument Sans, JetBrains Mono, tuned to the same widths | Close | Same families on paper; only ours ships fonts that actually load. |
| Where the serif goes | All headlines | Claude's replies (16px) and big headings; the interface is sans | Different | In the app the serif is Claude's voice, not just a heading font. |
| Body size | 16px, line 1.6 | 14px interface / 16px chat, line 24px | Close | |
| Biggest heading | 64px hero | 56px sign-in headline (weight 330); 33px greeting | Different | The built-in sizes come from the marketing site. |
| Weights | Serif 500 only | Serif 330 (display) to 400; sans 400 / 500 / 580 / 600; thinner in dark (360) | Different |
Shape and size
| What | Built-in | Our copy (real app) | Verdict | In plain words |
|---|---|---|---|---|
| Button corners | 8px (12px primary) | 8px app / 10px large (login) | Close | |
| Button height | From padding (about 36px) | 28 / 32 / 40px (control sizes) | Close | |
| Composer | None | White, 14px corners, 1px ring + soft lift; send button appears when you type | Only in ours | The heart of the app is missing from the built-in. |
| Cards and panels | 8–16px, cream border | 12px, 10% black ring | Close | |
| Messages | None | Your words: sans in a grey bubble; Claude: serif, no bubble | Only in ours | |
| Menus, tooltips, dialogs | None | Popover 12px with ring + strong shadow; black tooltip; 16px dialogs | Only in ours | |
| Sidebar, artifact panel, settings | None | All rebuilt from claude.ai (words from its own script) | Only in ours |
Depth, focus and motion
| What | Built-in | Our copy (real app) | Verdict | In plain words |
|---|---|---|---|---|
| Shadow style | Rings (0 0 0 1px) and a whisper 0 4px 24px 5% | Rings too: outside in light, inside in dark; popover 0 8px 24px 12% + 0 2px 6px 8% | Close | The built-in got the ring idea right. |
| Focus | 3px blue glow 30% | 1px page gap + 1px blue + 6px soft glow | Close | |
| Motion | 150 / 200ms, one curve | 60 / 120 / 150 / 200 / 300 / 450ms, four curves, a real spring on button press | Different | |
| Dark mode | Generic Open Design dark kit (cool #0f1115) | Claude's own dark set (#151515 page, white primary button, blue links) | Different |
What's included
| What | Built-in | Our copy (real app) | Verdict | In plain words |
|---|---|---|---|---|
| Icons | None (one emoji-style icon) | 370 real Anthropicons | Only in ours | |
| Logo | Text "Claude" | Real spark + wordmark SVG | Only in ours | |
| Screens | Landing, deck, email, form templates | 6 app screens, 4 scored against real pictures (91–97%) | Different | |
| Sources | Curated description, no file references | claude.ai stylesheet, icon font, script words, Sep 2026 videos, help centre | Different |
Built-in pages
Open Design's package, copied unchanged into builtin/claude/.
Our copy
The full study: Claude design system · six rebuilt screens (home 97.4%, chat 92.8%, settings 91.0%, sign-in 96.1% left half).