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" }] )
The trinity. Cream canvas as the editorial floor, coral as the brand voltage, dark navy as the product-chrome surface. No fourth surface tone.
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.
Coral CTAs only. Secondary buttons are cream-canvas with hairline outline. Dark surfaces get a slightly elevated dark button.
Claude excels at multi-step reasoning, drawing on long context to think through problems carefully.
From small refactors to large codebase migrations, Claude reads code with the depth of a senior engineer.
Built with constitutional AI training to be helpful, harmless, and honest across diverse use cases.
async def migrate(file): code = """...""" # Claude reads, plans, and rewrites return claude.refactor(code)
Our most intelligent model for complex agentic tasks and long-horizon reasoning.
View capabilities →Balanced speed and capability — the everyday workhorse for production systems.
View capabilities →Free API credits to get started. Production-grade reliability when you scale. Cream-button CTA on the coral surface.
Read, summarize, draft — across all your Drive docs.
Bring Claude into your team conversations.
Search, edit, and reorganize your knowledge base.
Review PRs, run agentic refactors, fix issues.
Triage tickets and draft responses in your team's voice.
Read design specs and translate them to working code.
Pill badges in cream-card or coral fill. Coral-uppercase for "NEW" / "BETA" emphasis.
Color-block first, shadow rare. The cream-vs-dark contrast does most of the elevation work.
Body sections, top nav.
Feature cards, content cards.
Code editors, model cards, footer.
Full-bleed CTA card with cream-button inside.
Cream card with 1px hairline border.
3px coral at 20% alpha around focused inputs.
| 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. |