# Anthropic / Claude.ai — Product App Design Spec

> Source: claude.ai/new (live DOM, computed styles + CDS design-token custom properties), 2026-07-08, logged-in session, dark mode at desktop 1512px. Light mode: not captured.

## 1. Visual Theme & Atmosphere

A warm, dim writing room rather than a tech console: the dark theme is built on warm near-black grays (60° hue tint, never blue-black), with a serif greeting in the center and a soft raised composer card as the single focal point. Chrome is quiet — a flat sidebar with plain text rows, hairline separations at half-pixel weight, and one clay/terracotta accent reserved for the brand mark and key actions. Typography mixes Anthropic Sans for UI with Anthropic Serif at light weight for moments of address. Feels: warm, calm, literary, focused.

## 2. Color Palette & Roles

### Dark-mode surfaces (warm gray ladder, 60° hue)
| Token | Value | Role / usage |
|---|---|---|
| bg-100 | `#1f1f1e` (hsl 60 2% 12%) | Page + sidebar canvas |
| bg-000 (raised) | `#2c2c2a` (hsl 60 2% 17%) | Composer card, raised surfaces |
| bg-200 | hsl(60 2% 9%) ≈ `#171716` | Recessed wells |
| bg-300/400 | 7% / 4% lightness | Deep overlays, scrims |
| border | `rgba(228,228,215,.15)` at **0.5px** | Sidebar hairline |

### Text
| Token | Hex | Role / usage |
|---|---|---|
| text-000/100 | `#f8f8f6` | Primary text |
| greeting | `#c3c2b7` | Serif greeting (muted warm) |
| text-200/300 | hsl(55 9% 74%) ≈ `#c2c0b6` | Secondary, recents list |
| text-400/500 | hsl(48 5% 57%) ≈ `#97958a` | Placeholder, meta, section labels |

### Brand & accents (CDS tokens)
| Token | Hex | Role / usage |
|---|---|---|
| clay (accent-brand) | `#d97757` | Brand starburst, New-chat icon, primary actions |
| clay-emphasized | `#c6613f` | Hover/pressed |
| plum (accent-pro) | `#827dbd` | Pro/plan accents |
| mineral | `#629987` · cactus `#bcd1ca` · heather `#cbcadb` | Pictogram highlight hues |
| danger | hsl(0 73% 59%) | Destructive |

Rule: the shell is warm-gray monochrome; clay is the only action color. Pictogram pastels appear only in illustrations/icons, never as chrome.

## 3. Typography Rules

- UI: `"Anthropic Sans", system-ui, "Segoe UI", Roboto, sans-serif` — body 16px/400.
- Address moments: `"Anthropic Serif"` light — greeting 40px / 60px / **300**, color `#c3c2b7`.
- Mono: `"Anthropic Mono", ui-monospace` for code. Weights: 400/500/600/700 (CDS scale).

| Role | Size/Line | Family/Weight |
|---|---|---|
| Greeting | 40 / 60 | Serif 300 |
| Composer placeholder | 16 | Sans 400, text-400 |
| Sidebar rows | 14–15 / 20 | Sans 400–500 |
| Section labels ("Products", "Recents") | 12–13 | Sans 500, text-400 |
| Model chip / meta | 14 | Sans 400–500 |

## 4. Component Stylings

### Composer (signature)
- Raised card bg `#2c2c2a`, radius 20, no shadow (flat raise via lightness step); placeholder 16px text-400; bottom row: + icon button left; model chip ("Sonnet 4.6" white 14px + "Medium ▾" muted), mic + waveform icon buttons right. Send action fills clay when active.

### Sidebar (288px)
- bg same as canvas `#1f1f1e`, separated by 0.5px `rgba(228,228,215,.15)` hairline.
- Top: wordmark "Claude" (serif logotype), search + collapse icon buttons.
- Rows: icon + 14–15px label, h~33, radius ~8 hover fill (subtle white alpha); "New chat" row carries a clay circular + icon.
- Sections: "Products" (Code, Cowork, Design), "Recents" list in text-200 with truncation, 12–13px section labels in text-400.
- Footer: avatar + name + plan ("Max plan"), install + switcher icon buttons.

### Buttons / chips
- Icon buttons: transparent, radius ~8, hover subtle alpha fill. Chips (Create): dark fill `#2c2c2a`-family, radius ~10, muted text. CDS base radius 0.25rem scale; shadows defined (`sm/md/lg` soft black) but barely used in dark shell.

### Greeting block
- Clay starburst glyph + serif 40/300 greeting, centered above composer.

## 5. Layout Principles

- Shell: 288px flat sidebar + centered content column; composer ~660px wide centered at upper third; everything vertically generous.
- The empty state is deliberately sparse: greeting + composer + one suggestion chip. No cards, no dashboards.
- Density is comfortable (33px rows) rather than compact; 4px grid.

## 6. Depth & Elevation

- Elevation by lightness step (bg-100 → bg-000 raised), not shadow: the composer has no box-shadow in dark mode.
- Hairlines at 0.5px, 15% warm-white alpha.
- Radii: 8 (rows, icon buttons), 10–12 (chips), 20 (composer), full (avatar, + icon).
- CDS shadow tokens exist (`0 1px 2px #0000000d` sm → `0 10px 15px -3px #0000001a` lg) for menus/light mode.

## 7. Motion

- Ease: CDS `--cds-ease-out: cubic-bezier(0,0,.2,1)`; micro-transitions ~100–200ms on color/bg/opacity.
- Status dots tokenized (`--dot-ready` blue, `--dot-awaiting` yellow) for async task states.
- Quiet shell: no entrance theatrics observed on the new-chat screen; motion lives in streaming responses. No motion library detected.

## 8. Backgrounds, Effects & WebGL

- Flat warm-gray surfaces only — no gradients, glass, noise, or canvas/WebGL in the shell.
- Atmosphere comes from the warm hue of the gray ladder (60° tint) and the serif/clay accents, not effects.

## 9. Do's and Don'ts

### Do
- Build dark UI on the warm gray ladder (`#1f1f1e` canvas, `#2c2c2a` raised, hsl-60° tints) — never blue-gray or pure black.
- Raise surfaces by lightness step instead of shadows; keep hairlines 0.5px at ~15% warm-white alpha.
- Reserve clay `#d97757` for the brand mark and primary actions (`#c6613f` hover); keep everything else monochrome.
- Use Anthropic Serif at light weight (300) for address moments (greetings) in muted `#c3c2b7`; Sans 16px for everything functional.
- Keep the composer the visual center: radius 20 raised card with quiet icon buttons and a small model chip.
- Keep sidebar rows plain: icon + 14–15px text, subtle hover fill, 12–13px muted section labels.
- Use plum `#827dbd` only for plan/Pro accents; pastels (mineral/cactus/heather) only in pictograms.

### Don't
- Don't use pure black, blue-tinted grays, or high-contrast borders.
- Don't put shadows under dark-mode surfaces; don't exceed 0.5–1px hairlines.
- Don't spread clay into fills, banners, or large areas.
- Don't set the greeting bold or white — it's serif, light, and muted.
- Don't densify the shell into a dashboard; the empty state stays sparse.

## 10. Responsive Behavior

Not captured (desktop web app at 1512px; sidebar collapses via toggle — collapsed state not captured).

## 11. Agent Prompt Guide

- Canvas `#1f1f1e` · Raised `#2c2c2a` · Text `#f8f8f6` · Secondary `#c2c0b6` · Muted `#97958a` · Hairline `rgba(228,228,215,.15)` 0.5px · Accent clay `#d97757` (hover `#c6613f`)
- Fonts: `"Anthropic Sans", system-ui` 16px UI · `"Anthropic Serif"` 40/300 greeting `#c3c2b7` · Radius: 8 rows / 20 composer · Sidebar 288px
- Ease: `cubic-bezier(0,0,.2,1)` ~150ms

<anthropic-app_design_language>
Use the Claude.ai app design language: a warm, dim writing room. Dark canvas #1f1f1e and raised surfaces #2c2c2a from a warm 60°-hue gray ladder — never blue-black or pure black; elevation comes from lightness steps, not shadows; hairlines are 0.5px rgba(228,228,215,.15). Text #f8f8f6 primary, #c2c0b6 secondary, #97958a muted, all in Anthropic Sans (16px UI, 14–15px sidebar rows, 12–13px muted section labels); the greeting is Anthropic Serif 40px weight 300 in muted #c3c2b7 beside a clay starburst. Clay #d97757 (hover #c6613f) is the only action color — brand mark, new-chat icon, send; plum #827dbd only for Pro/plan accents. The composer is the focal point: centered raised card, radius 20, quiet icon buttons, small model chip (14px). Sidebar is 288px, flat, plain icon+text rows with subtle alpha hover, radius 8. Motion is quiet: ~150ms ease-out (cubic-bezier(0,0,.2,1)). Feels: warm, calm, literary, focused. Avoid: blue-gray or pure-black surfaces, shadows in dark mode, clay as a fill color, bold/white greetings, dashboard-like density.
</anthropic-app_design_language>