--- 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 | Role | Value | Token name in the shipped set | |------|-------|-------------------------------| | Main button and ink | `#141413` | gray 950 [Measured] | | Page | `#faf9f5` | gray 050 [Measured] | | Warm surfaces | `#f5f4ed`, `#f0eee6`, `#e8e6dc` | gray 100, 150, 200 [Measured] | | Text steps | `#30302e`, `#5e5d59`, `#87867f` | gray 750, 600, 500 [Measured] | | Borders | `#d1cfc5`, `#dedcd1`, `#e8e6dc`, `#f0eee6` | gray 300 to 150 [Measured] | | Brand clay | `#d97757`, hover `#c6613f`, focus `#c46849` | clay, clay hover, clay dark [Measured] | | Status | error `#bf4d43`, switch on `#2c84db` | error, switch on [Measured] | | Extras | sky `#6a9bcc`, plum `#827dbd`, mineral `#629987`, cactus `#bcd1ca`, heather `#cbcadb`, peach `#ebc9b7` | named brand colors [Measured] | | Dark | page `#141413`, surfaces `#1f1e1d`, `#1a1918`, `#262624`, text `#faf9f5`, `#c2c0b6`, `#87867f`, borders `#30302e`, `#3d3d3a` | same ramp [Measured] | ### Typography | Role | Desktop | Mobile | Face and weight | |------|---------|--------|-----------------| | Display | 56 on 64.4 | 51.2 on 58.9 | Anthropic Serif 400 [Measured] | | Pricing title | 64 on 70.4 | 37.75 on 41.5 | Anthropic Serif 500 [Measured] | | Headline | 52 on 62.4 | 35.1 on 42.2 | Anthropic Serif 500 [Measured] | | Title | 32 on 35.2 | 23.6 on 25.9 | Anthropic Serif 500 [Measured] | | Lead | 18 on 24.75 | 16 on 22 | Anthropic Serif 400 [Measured] | | Body | 15 on 22.5 | same | Anthropic Sans 400 [Measured] | | Price | 24 on 38.4 | 22.1 on 35.4 | Anthropic Sans 600 [Measured] | | Button | 15 on 24, 17 on 25.5 | 17 | Anthropic Sans 500 [Measured] | | Small | 12 on 18 | same | Anthropic 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.