# Design System Inspiration of Claude

Anthropic's warm-canvas editorial interface. Cream + coral + dark navy as the trinity. Slab-serif display headlines, humanist sans body, and dark code-mockup cards as product chrome.

    # Generate a thoughtful response
    from anthropic import Anthropic

    client = Anthropic()
    message = client.messages.create(
        model="claude-opus-4",
        max_tokens=1024,
        messages=[{
            "role": "user",
            "content": "Hello, Claude"
        }]
    )

01 — Color Palette

## Cream + coral + dark navy

The trinity. Cream canvas as the editorial floor, coral as the brand voltage, dark navy as the product-chrome surface. No fourth surface tone.

### Brand

primary (coral)
#cc785c
All primary CTAs and full-bleed callout cards.
primary-active
#a9583e
Press state on coral buttons.
accent-teal
#5db8a6
Status indicators, "active connection" dots.
accent-amber
#e8a55a
Category badges, inline highlights.

### Surface

canvas (cream)
#faf9f5
Default page floor — tinted cream, deliberately not pure white.
surface-soft
#f5f0e8
Section dividers, soft band backgrounds.
surface-card
#efe9de
Feature cards, content cards.
surface-dark
#181715
Code editor mockups, model cards, footer.
surface-dark-elevated
#252320
Elevated cards inside dark bands.
hairline
#e6dfd8
1px borders on cream surfaces.

### Text

ink
#141413
Headlines and primary text. Warm dark.
body
#3d3d3a
Default running-text.
muted
#6c6a64
Sub-headings, breadcrumbs, footer.
muted-soft
#8e8b82
Captions, fine-print, copyright.
on-dark
#faf9f5
Cream-tinted white on dark surfaces.
on-dark-soft
#a09d96
Footer body — slightly muted on dark.
02 — Typography

## Copernicus serif + StyreneB sans

Slab-serif display for headlines (substituted with EB Garamond), humanist sans for body (Inter). The serif character is the editorial brand voice — switching to sans display would flatten Anthropic into another AI tool.

display-xl64px / 400 / 1.05 / -1.5px
Copernicus serif
Meet your thinking partner
display-lg48px / 400 / 1.1 / -1px
For the curious, the careful, the brilliant
display-md36px / 400 / 1.15 / -0.5px
Build with Claude
display-sm28px / 400 / 1.2 / -0.3px
Pricing for every team
title-lg22px / 500 / 1.3
StyreneB sans
Pro · $20 / month
title-md18px / 500 / 1.4
Code understanding at depth
title-sm16px / 500 / 1.4
Connect Slack workspace
body-md16px / 400 / 1.55
Claude reasons through complex problems with the patience and care of a thoughtful colleague — drawing on context across long conversations and large codebases.
body-sm14px / 400 / 1.55
Footer body, fine-print legal text — same Inter face at smaller size.
caption13px / 500 / 1.4
Limited beta · Available in API
caption-uppercase12px / 500 / 1.5px
NEW · CLAUDE OPUS 4
code14px / 400 / 1.6
JetBrains Mono
claude.messages.create({ model: "opus" })
button14px / 500 / 1.0
Try Claude
nav-link14px / 500 / 1.4
Product · Solutions · Use Cases · Pricing · Research
03 — Button Variants

## Coral primary, cream secondary

Coral CTAs only. Secondary buttons are cream-canvas with hairline outline. Dark surfaces get a slightly elevated dark button.

button-primary
primary coral / on-primary white / md radius
button-primary-active
primary-active darker coral
button-primary-disabled
cream-tinted disabled fill
button-secondary
cream / ink / hairline outline
button-secondary-on-dark
surface-dark-elevated / on-dark
button-text-link
No background; inline link-style
text-link-coral
Read the research →
Inline coral link in body. The signature small detail.
button-icon-circular
36 × 36 / canvas / hairline / full radius
04 — Cards & Containers

## Cream cards + dark mockups + coral callouts

⚡

#### Reason through complexity

Claude excels at multi-step reasoning, drawing on long context to think through problems carefully.

📚

#### Code understanding

From small refactors to large codebase migrations, Claude reads code with the depth of a senior engineer.

🛡️

#### Safe by design

Built with constitutional AI training to be helpful, harmless, and honest across diverse use cases.

refactor.py · agent

    async def migrate(file):
        code = """..."""
        # Claude reads, plans, and rewrites
        return claude.refactor(code)

#### Opus 4

Our most intelligent model for complex agentic tasks and long-horizon reasoning.

View capabilities →

#### Sonnet 4

Balanced speed and capability — the everyday workhorse for production systems.

View capabilities →
05 — Coral Callout Card

### Start building with Claude

Free API credits to get started. Production-grade reliability when you scale. Cream-button CTA on the coral surface.

06 — Connector Tile Grid

## Connect everything Claude needs

G

##### Google Drive

Read, summarize, draft — across all your Drive docs.

S

##### Slack

Bring Claude into your team conversations.

N

##### Notion

Search, edit, and reorganize your knowledge base.

G

##### GitHub

Review PRs, run agentic refactors, fix issues.

L

##### Linear

Triage tickets and draft responses in your team's voice.

F

##### Figma

Read design specs and translate them to working code.

07 — Pricing Tiers

#### Free

$0

- Limited daily messages
- Web access
- Mobile + desktop apps

#### Pro

$20

- 5× more usage
- Project workspaces
- Advanced research

#### Team

$30 / user

- Centralized billing
- Admin console
- Priority bandwidth

#### Enterprise

Custom

- SOC 2 + HIPAA
- SSO + IDP
- Custom integrations

08 — Form Elements
Email address
Email (focused)
Use case
Tell us more
09 — Badges

Pill badges in cream-card or coral fill. Coral-uppercase for "NEW" / "BETA" emphasis.

Featured Limited beta NEW BETA CLAUDE 4
10 — Spacing Scale
xxs · 4px
xs · 8px
sm · 12px
md · 16px
lg · 24px
xl · 32px
xxl · 48px
section · 96px
11 — Border Radius Scale
4 · xs
6 · sm
8 · md
12 · lg
16 · xl
pill
full
12 — Elevation & Depth

Color-block first, shadow rare. The cream-vs-dark contrast does most of the elevation work.

##### Flat / Canvas

Body sections, top nav.

##### Cream card

Feature cards, content cards.

##### Dark mockup card

Code editors, model cards, footer.

##### Coral callout

Full-bleed CTA card with cream-button inside.

##### Card with hairline

Cream card with 1px hairline border.

##### Coral focus ring

3px coral at 20% alpha around focused inputs.

13 — Responsive Behavior

Name | Width | Key Changes
--- | --- | ---
Mobile | < 768px | Hamburger nav; hero h1 64→32px; hero-art stacks below; feature grids 1-up; pricing 1-up.
Tablet | 768–1024px | Top nav tightens; feature cards 2-up; connector tiles 3-up; pricing 2-up.
Desktop | 1024–1440px | Full top-nav; 3-up feature cards; 4-6 up connector tiles; 4-up pricing.
Wide | > 1440px | Same as desktop with more breathing room; max content 1200px.

375
mobile
600
small phone
768
tablet
1024
laptop
1280
desktop
1440
wide

#### Touch Targets

- Primary CTA at min 40 × 40px.
- Icon button at 36 × 36 — slightly under 44, visually centered.
- Text input height 40px.

#### Collapsing Strategy

- Top nav collapses to hamburger at < 768px; menu opens as full-screen cream sheet.
- Hero 6-6 grid → single-column on mobile.
- Feature grids reduce columns rather than scaling.
- Code blocks retain font-size; horizontal scroll inside the card on mobile.
- Pricing tier cards collapse 4 → 2 → 1; featured stays distinct.