Claude

Overview

Claude.com is the warmest, most editorial interface in the AI-product category. The base atmosphere is a **tinted cream canvas** (`{colors.canvas}` — #faf9f5) — distinctly warm, deliberately not the cool gray-white that every other AI brand uses. Headlines run a **slab-serif display** ("Copernicus" / Tiempos Headline) at weight 400 with negative letter-spacing, paired with **StyreneB / Inter** body sans. The combination feels like a literary publication, not a SaaS marketing page.

Brand voltage comes from the **cream + coral pairing** — coral (`{colors.primary}` — #cc785c) is the signature Anthropic accent, used on every primary CTA, on the brand wordmark, and on full-bleed callout cards. The coral is warm, slightly muted, never cyan/blue — a deliberate counter-positioning against OpenAI's cool slate, Google's saturated blue, and Microsoft's corporate cyan.

The system has three surface modes that alternate page-by-page:

1. **Cream canvas** (`{colors.canvas}`) — default body floor

2. **Light cream cards** (`{colors.surface-card}`) — feature card backgrounds

3. **Dark navy product surfaces** (`{colors.surface-dark}`) — code editor mockups, model showcase cards, pre-footer CTAs, footer itself

The dark surfaces are where Claude shows its product chrome — code blocks, terminal output, model comparison tables, agentic-flow diagrams. The cream-to-dark contrast is the page's pacing rhythm.

**Key Characteristics:**

• Warm cream canvas (`{colors.canvas}` — #faf9f5) with dark warm-ink text (`{colors.ink}` — #141413). The brand's defining color choice.
• Coral primary CTA (`{colors.primary}` — #cc785c). Used scarcely on individual buttons, generously on full-bleed coral callout cards.
• Slab-serif display headlines via Copernicus / Tiempos Headline at weight 400 with negative letter-spacing. Pairs with humanist sans body for a literary editorial voice.
• Dark navy product mockup cards (`{colors.surface-dark}` — #181715) carrying code blocks, terminal panels, model comparison data — the brand shows the product chrome at scale rather than abstract marketing illustrations.
• Light cream feature cards (`{colors.surface-card}` — #efe9de) — slightly darker than canvas, used for content-driven feature explanations.
• Anthropic radial-spike mark — a small black asterisk-like glyph (4-spoke radial) — appears as the brand wordmark prefix and as a content marker.
• Border radius is hierarchical: `{rounded.md}` (8px) for buttons + inputs, `{rounded.lg}` (12px) for content + product cards, `{rounded.xl}` (16px) for the hero illustration container, `{rounded.pill}` for badges.
• Section rhythm `{spacing.section}` (96px) — modern-SaaS standard. Internal card padding stays generous at `{spacing.xl}` (32px).

Colors

Brand & Accent

• **Coral / Primary** (`{colors.primary}` — #cc785c): The signature Anthropic warm coral. Used on every primary CTA background, on full-bleed coral callout cards, on the brand wordmark accent. The most-recognized Anthropic color outside of the spike-mark logo.
• **Coral Active** (`{colors.primary-active}` — #a9583e): The press / hover-darker variant.
• **Coral Disabled** (`{colors.primary-disabled}` — #e6dfd8): A desaturated cream-tinted disabled state.
• **Accent Teal** (`{colors.accent-teal}` — #5db8a6): Used sparingly on secondary product surfaces (terminal status indicators, "active connection" dots in connectors page).
• **Accent Amber** (`{colors.accent-amber}` — #e8a55a): A small companion warm-tone used on category badges and inline highlights.

Surface

• **Canvas** (`{colors.canvas}` — #faf9f5): The default page floor. Tinted cream — warm, deliberately not pure white.
• **Surface Soft** (`{colors.surface-soft}` — #f5f0e8): Section dividers, very-soft band backgrounds.
• **Surface Card** (`{colors.surface-card}` — #efe9de): Feature cards, content cards. One step darker than canvas.
• **Surface Cream Strong** (`{colors.surface-cream-strong}` — #e8e0d2): A strongest-cream variant used on selected category tabs and emphasized section bands.
• **Surface Dark** (`{colors.surface-dark}` — #181715): Code editor mockups, model showcase cards, footer. The dominant dark surface.
• **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #252320): Elevated cards inside dark bands (settings panels in mockups).
• **Surface Dark Soft** (`{colors.surface-dark-soft}` — #1f1e1b): Slightly lighter dark, used for code block backgrounds inside larger dark cards.
• **Hairline** (`{colors.hairline}` — #e6dfd8): The 1px border tone on cream surfaces. Same hex as `{colors.primary-disabled}` — borders feel like one elevation step rather than ink lines.
• **Hairline Soft** (`{colors.hairline-soft}` — #ebe6df): Barely-visible divider used inside the same band.

Text

• **Ink** (`{colors.ink}` — #141413): All headlines and primary text. Warm dark, slightly off-pure-black.
• **Body Strong** (`{colors.body-strong}` — #252523): Emphasized paragraphs, lead text.
• **Body** (`{colors.body}` — #3d3d3a): Default running-text color.
• **Muted** (`{colors.muted}` — #6c6a64): Sub-headings, breadcrumbs, footer-adjacent secondary text.
• **Muted Soft** (`{colors.muted-soft}` — #8e8b82): Captions, fine-print, copyright lines.
• **On Primary** (`{colors.on-primary}` — #ffffff): Text on coral buttons.
• **On Dark** (`{colors.on-dark}` — #faf9f5): Cream-tinted white used on dark surfaces (echoes the canvas tone).
• **On Dark Soft** (`{colors.on-dark-soft}` — #a09d96): Footer body text, secondary labels in dark mockups.

Semantic

• **Success** (`{colors.success}` — #5db872): Green status dots, "available" indicators.
• **Warning** (`{colors.warning}` — #d4a017): Warning callouts (rare on marketing surfaces).
• **Error** (`{colors.error}` — #c64545): Validation errors.

Typography

Font Family

The system runs **Copernicus** (or **Tiempos Headline** as substitute) as the slab-serif display face for headlines, and **StyreneB** (or **Inter** as substitute) as the humanist sans for body, navigation, and UI labels. **JetBrains Mono** handles code blocks. The fallback stack walks `Tiempos Headline, Garamond, "Times New Roman", serif` for display and `Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif` for body.

The display/body split is editorial:

• Copernicus serif (weight 400, negative tracking) → h1, h2, h3, hero display
• StyreneB sans (weight 400-500) → body, navigation, buttons, captions, labels
• JetBrains Mono → all code blocks and terminal text

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-xl}` | 64px | 400 | 1.05 | -1.5px | Homepage h1 ("Meet your thinking partner") — Copernicus serif |

| `{typography.display-lg}` | 48px | 400 | 1.1 | -1px | Section heads — Copernicus |

| `{typography.display-md}` | 36px | 400 | 1.15 | -0.5px | Sub-section heads, model names — Copernicus |

| `{typography.display-sm}` | 28px | 400 | 1.2 | -0.3px | Pricing tier names, callout headlines — Copernicus |

| `{typography.title-lg}` | 22px | 500 | 1.3 | 0 | Pricing plan size labels — StyreneB |

| `{typography.title-md}` | 18px | 500 | 1.4 | 0 | Feature card titles, intro paragraphs |

| `{typography.title-sm}` | 16px | 500 | 1.4 | 0 | Connector tile titles, list labels |

| `{typography.body-md}` | 16px | 400 | 1.55 | 0 | Default running-text — StyreneB |

| `{typography.body-sm}` | 14px | 400 | 1.55 | 0 | Footer body, fine-print |

| `{typography.caption}` | 13px | 500 | 1.4 | 0 | Badge labels, captions |

| `{typography.caption-uppercase}` | 12px | 500 | 1.4 | 1.5px | Category tags, "NEW" badges |

| `{typography.code}` | 14px | 400 | 1.6 | 0 | Code blocks — JetBrains Mono |

| `{typography.button}` | 14px | 500 | 1.0 | 0 | Standard button labels |

| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top-nav menu items |

Principles

Display sizes use weight 400 (regular), never bold. Negative letter-spacing (-0.3 to -1.5px) is essential — Copernicus without it reads as off-brand. The serif character is what gives Anthropic its literary, considered voice; switching to a sans-serif display would make Claude feel like every other AI tool.

Body type stays at weight 400 for paragraphs, weight 500 for labels and emphasized phrases. The sans body is humanist (StyreneB) — never geometric. Inter is an acceptable substitute because of its similar humanist proportions; Helvetica or Arial would be too neutral and break the warm-editorial feel.

Note on Font Substitutes

If Copernicus / Tiempos Headline is unavailable, **Cormorant Garamond** at weight 500 with -0.02em letter-spacing is the closest open-source approximation. **EB Garamond** is a fallback. For StyreneB, **Inter** is the closest match — both are humanist sans designed for screen reading. **Söhne** is another close alternative if licensed.

Layout

Spacing System

• **Base unit:** 4px.
• **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
• **Section padding:** `{spacing.section}` (96px) — modern-SaaS rhythm.
• **Card internal padding:** `{spacing.xl}` (32px) for feature cards, pricing tier cards, model comparison cards; `{spacing.lg}` (24px) for code-window cards and connector tiles.
• **Callout / CTA bands:** `{spacing.xxl}` (48px) inside coral callout cards; 64px inside the larger dark CTA band.

Grid & Container

• **Max content width:** ~1200px centered.
• **Editorial body:** Single 12-column grid; hero often uses 6/6 split (h1 left, illustration right).
• **Feature card grids:** 3-up at desktop, 2-up at tablet, 1-up at mobile.
• **Connector tile grids:** 4-up or 6-up at desktop, 2-up at tablet, 1-up at mobile.
• **Pricing grid:** 3-up at desktop (Free / Pro / Team / Enterprise often), 1-up at mobile.

Whitespace Philosophy

The cream canvas + serif display + generous internal padding create an editorial pacing — Claude reads like a long-form magazine column rather than a marketing template. Whitespace between bands stays uniform at 96px; whitespace inside cards is generous (32px), letting type breathe.

Elevation & Depth

| Level | Treatment | Use |

|---|---|---|

| Flat | No shadow, no border | Body sections, top nav, hero bands |

| Soft hairline | 1px `{colors.hairline}` border | Inputs, sub-nav, occasionally on cards |

| Cream card | `{colors.surface-card}` background — no shadow | Feature cards, content cards |

| Dark surface card | `{colors.surface-dark}` background — no shadow | Code editor mockups, model showcase cards |

| Subtle drop shadow | Faint shadow at low alpha | Hover-elevated states (the system uses `0 1px 3px rgba(20,20,19,0.08)` rarely) |

The elevation philosophy is **color-block first, shadow rare**. Most depth comes from the cream-vs-dark surface contrast. Shadows are minimal. The dark surface mockups have their own internal product chrome (code editor scrollbars, line numbers, syntax highlighting) which adds detail without needing external shadows.

Decorative Depth

• The Anthropic spike-mark glyph (4-spoke radial asterisk) appears as a small black mark in the brand wordmark and inline as a content marker.
• Code editor mockups carry their own internal depth: syntax-highlighted text in muted blues / oranges / grays, line numbers in `{colors.muted-soft}`, status bars at the bottom in `{colors.surface-dark-elevated}`.
• Some hero illustrations use simple line-art with coral and dark-navy strokes on cream — minimal, hand-drawn-feeling, never photorealistic.

Shapes

Border Radius Scale

| Token | Value | Use |

|---|---|---|

| `{rounded.xs}` | 4px | Reserved for badge accents and tiny dropdowns |

| `{rounded.sm}` | 6px | Small inline buttons, dropdown items |

| `{rounded.md}` | 8px | Standard CTA buttons, text inputs, category tabs |

| `{rounded.lg}` | 12px | Content cards (feature, pricing, code-window, model-comparison) |

| `{rounded.xl}` | 16px | Hero illustration container, the larger marquee components |

| `{rounded.pill}` | 9999px | Badge pills, "NEW" tags |

| `{rounded.full}` | 9999px / 50% | Avatar substitutes, icon buttons |

Photography & Illustrations

Claude's hero rarely uses photography. Instead it uses:

• Simple line-art illustrations with coral + dark-navy strokes on the cream canvas
• Code editor mockups (the dominant "hero" treatment on developer-focused pages)
• Terminal output mockups with monospace text on dark
• Model comparison cards (Opus / Sonnet / Haiku) with abstract geometric thumbnails

When photography is used (rare — mostly testimonials), avatars crop to perfect circles at 40px diameter.

Components

Top Navigation

**`top-nav`** — Cream nav bar pinned to the top of every page. 64px tall, `{colors.canvas}` background. Carries the Anthropic spike-mark + "Claude" wordmark at left, primary horizontal menu (Product, Solutions, Use Cases, Pricing, Research, Company) center-left, right-side cluster with "Sign in" text-link, "Try Claude" `{component.button-primary}` (coral). Menu items in `{typography.nav-link}` (StyreneB 14px / 500).

Buttons

**`button-primary`** — The signature coral CTA. Background `{colors.primary}` (#cc785c), text `{colors.on-primary}` (white), type `{typography.button}` (StyreneB 14px / 500), padding 12px × 20px, height 40px, rounded `{rounded.md}` (8px). Active state `button-primary-active` darkens to `{colors.primary-active}` (#a9583e).

**`button-secondary`** — Cream button with hairline outline. Background `{colors.canvas}`, text `{colors.ink}`, 1px hairline border, same padding + height + radius as primary.

**`button-secondary-on-dark`** — Used over `{colors.surface-dark}` cards. Background `{colors.surface-dark-elevated}` (#252320), text `{colors.on-dark}`. Stays dark — the system never inverts to a light secondary on dark surfaces.

**`button-text-link`** — Inline text button, no background. Used for "Sign in" in the top nav and inline CTA links.

**`button-icon-circular`** — 36px circular icon button. Background `{colors.canvas}`, hairline border, ink-color icon. Used for carousel arrows, share, "view more".

**`text-link`** — Inline body links in `{colors.primary}` (the coral). Underlined on press; the coral inline link is one of the system's most distinctive small details.

Cards & Containers

**`hero-band`** — Cream-canvas hero with a 6-6 grid: h1 + sub-headline + button row on the left, hero illustration card or product mockup card on the right. Vertical padding `{spacing.section}` (96px).

**`hero-illustration-card`** — A larger card holding the hero's right-side artifact — sometimes a coral-stroke line illustration on cream background, sometimes a dark code editor mockup. Background `{colors.canvas}` or `{colors.surface-dark}` depending on context, rounded `{rounded.xl}` (16px).

**`feature-card`** — Used in 3-up feature grids. Background `{colors.surface-card}` (#efe9de — slightly darker cream), rounded `{rounded.lg}` (12px), internal padding `{spacing.xl}` (32px). Carries a small icon at top, an `{typography.title-md}` headline, and a body description in `{typography.body-md}`.

**`product-mockup-card-dark`** — Dark navy card showing actual Claude product chrome (chat interface, code editor, agent controls). Background `{colors.surface-dark}`, rounded `{rounded.lg}`, internal padding `{spacing.xl}` (32px). Carries text labels in `{colors.on-dark}` and product UI fragments below.

**`code-window-card`** — A specialized dark card showing a code editor with line numbers, syntax-highlighted code in `{typography.code}` (JetBrains Mono), and sometimes a "Run" button or terminal output panel below. Background `{colors.surface-dark}` with `{colors.surface-dark-soft}` for the inner code block, rounded `{rounded.lg}`, padding `{spacing.lg}` (24px). The signature visual element of Claude Code product pages.

**`model-comparison-card`** — Used on the homepage's "Which problem are you up against?" section comparing Opus / Sonnet / Haiku. Background `{colors.canvas}` with hairline border, rounded `{rounded.lg}`, internal padding `{spacing.xl}` (32px). Carries the model name, a short capability blurb, and a `{component.text-link}` to learn more.

**`pricing-tier-card`** — Standard tier card. Background `{colors.canvas}` with hairline border, rounded `{rounded.lg}`, padding `{spacing.xl}` (32px). Carries the plan name in `{typography.title-lg}` (StyreneB), price in `{typography.display-sm}` (Copernicus serif!), feature checklist in `{typography.body-md}`, and a `{component.button-primary}` at the bottom.

**`pricing-tier-card-featured`** — The featured tier (typically "Pro" or "Team"). Background flips to `{colors.surface-dark}`, text inverts to `{colors.on-dark}`. The dark surface IS the featured-tier signal.

**`callout-card-coral`** — A full-bleed coral card carrying a major call-to-action. Background `{colors.primary}` (#cc785c), text `{colors.on-primary}` (white), rounded `{rounded.lg}`, padding `{spacing.xxl}` (48px). The coral surface IS the voltage; the CTA inside uses an inverted button style (cream/canvas button on coral).

**`connector-tile`** — Used on the connectors page's integration grid. Background `{colors.canvas}` with hairline border, rounded `{rounded.lg}`, padding 20px. Each tile carries a logo at top, a `{typography.title-sm}` connector name, and a short description.

Inputs & Forms

**`text-input`** — Standard text input. Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-md}`, rounded `{rounded.md}` (8px), padding 10px × 14px, height 40px. 1px hairline border in `{colors.hairline}`.

**`text-input-focused`** — Focus state. Border thickens or shifts to `{colors.primary}` (coral) for emphasis. Carries a 3px coral-at-15%-alpha outer ring.

**`cookie-consent-card`** — Bottom-right floating dark cookie banner. Background `{colors.surface-dark}`, text `{colors.on-dark}`, rounded `{rounded.lg}`, padding `{spacing.lg}` (24px). One of the few places dark surface appears at small scale on cream pages.

Tags / Badges

**`badge-pill`** — Small pill label used for category tags. Background `{colors.surface-card}`, text `{colors.ink}`, type `{typography.caption}` (13px / 500), rounded `{rounded.pill}`, padding 4px × 12px.

**`badge-coral`** — Coral-fill badge for "NEW", "BETA", featured highlights. Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.caption-uppercase}` (12px / 500 / 1.5px tracking), rounded `{rounded.pill}`, padding 4px × 12px.

Tab / Filter

**`category-tab`** + **`category-tab-active`** — Used in sub-nav rows on solutions / connectors pages. Inactive: transparent background, `{colors.muted}` text. Active: `{colors.surface-card}` background, `{colors.ink}` text. Padding 8px × 14px, rounded `{rounded.md}`.

CTA / Footer

**`cta-band-coral`** — A pre-footer "Try Claude" CTA card. Full-width coral fill, white type, rounded `{rounded.lg}`, padding 64px. Carries an h2 in `{typography.display-sm}` (still serif!), a sub-line, and a cream-button CTA.

**`cta-band-dark`** — Alternative pre-footer band on developer-focused pages. Background `{colors.surface-dark}`, text `{colors.on-dark}`, rounded `{rounded.lg}`, padding 64px. Often pairs with a code-window card.

**`footer`** — Dark navy footer that closes every page. Background `{colors.surface-dark}` (#181715), text `{colors.on-dark-soft}`. 4-column link list at desktop covering Product / Company / Resources / Legal. Vertical padding 64px. The Anthropic spike-mark + "Anthropic" wordmark sits at the top in `{colors.on-dark}`. The footer never inverts.

Do's and Don'ts

Do

• Anchor every page on the cream canvas. Pure white reads as "any other AI tool"; the warm tint is the brand differentiator.
• Use Copernicus serif for every display headline. Pair with StyreneB sans body. Negative letter-spacing on display sizes is non-negotiable.
• Reserve `{colors.primary}` (coral) for primary CTAs and full-bleed `{component.callout-card-coral}` moments. Don't paint accent moments coral elsewhere.
• Use `{component.product-mockup-card-dark}` and `{component.code-window-card}` to show actual Claude product chrome. Don't paint marketing illustrations of code when you can show real code.
• Pair `{component.feature-card}` (cream) with `{component.product-mockup-card-dark}` (navy) in alternating bands. The cream-to-dark rhythm is the brand's pacing mechanism.
• Use the Anthropic spike-mark glyph as the brand wordmark prefix. Never invert the mark to white-on-dark within the wordmark itself.
• Apply `{spacing.section}` (96px) between major bands.

Don't

• Don't use cool grays or pure white for canvas. Cream is the brand.
• Don't bold serif display weight. Copernicus at 700 reads as bombastic; the system stays at 400.
• Don't use cool blue or saturated cyan as a brand accent. The coral is the brand voltage.
• Don't put coral everywhere. The coral is scarce on individual elements and generous only on full-bleed coral callout cards.
• Don't use Inter for display headlines. The serif character is the brand voice.
• Don't repeat the same surface mode in two consecutive bands. The pacing alternates: cream → cream-card → dark-mockup → cream → coral-callout → dark-footer.
• Don't add hover state styling beyond what the system already encodes — primary darkens on press; nothing else changes.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes |

|---|---|---|

| Mobile | < 768px | Hamburger nav; hero h1 64→32px; hero-illustration-card stacks below content; feature grids 1-up; connector tiles 2-up; pricing 1-up; footer 4 cols → 1 |

| Tablet | 768–1024px | Top nav stays horizontal but tightens; feature cards 2-up; connector tiles 3-up; pricing 2-up |

| Desktop | 1024–1440px | Full top-nav with all menu items; 3-up feature cards; 4-up or 6-up connector tiles; 3-up pricing tiers |

| Wide | > 1440px | Same as desktop with more outer breathing room; max content width caps at 1200px |

Touch Targets

• `{component.button-primary}` at minimum 40 × 40px.
• `{component.button-icon-circular}` at exactly 36 × 36 — slightly under WCAG 44 but visually centered.
• `{component.text-input}` height is 40px.
• Connector tile entire card area is tappable; effective tap area >> 44px.

Collapsing Strategy

• Top nav collapses to hamburger at < 768px; menu opens as a full-screen cream sheet.
• Hero band's 6-6 grid collapses to single-column on mobile — h1 + sub-head + buttons first, then the illustration / mockup card below.
• Feature grids reduce columns rather than scaling cards down.
• Pricing tier cards collapse 4 → 2 → 1; featured-tier dark surface stays visually distinct at every breakpoint.
• Code-window cards retain code legibility at every breakpoint by allowing horizontal scroll within the card rather than wrapping code lines.

Image Behavior

• Code blocks inside dark mockups stay at fixed font-size; horizontal scroll on mobile rather than wrapping.
• Hero illustrations scale proportionally; line-art strokes thin slightly on mobile.
• Avatar photos in testimonials crop to circles at every breakpoint.

Iteration Guide

1. Focus on ONE component at a time. Reference its YAML key (`{component.feature-card}`, `{component.code-window-card}`).

2. Variants of an existing component (`-active`, `-disabled`, `-focused`) live as separate entries in `components:`.

3. Use `{token.refs}` everywhere — never inline hex.

4. Never document hover. Default and Active/Pressed states only.

5. Display headlines stay Copernicus serif 400 with negative tracking. Body stays StyreneB / Inter 400. The split is unbreakable.

6. Cream + coral + dark navy is the trinity. Don't introduce a fourth surface tone (no purple cards, no green sections).

7. When in doubt about emphasis: bigger Copernicus serif before bolder weight.

Known Gaps

• Copernicus and StyreneB are licensed Anthropic typefaces and not available as public web fonts. Substitutes (Tiempos Headline / Cormorant Garamond / EB Garamond for serif; Inter / Söhne for sans) are documented in the typography section.
• The Anthropic radial-spike-mark is a brand glyph rendered as inline SVG; it's not formalized as a system token here. Treat it as a logo asset.
• Animation and transition timings (chat message reveal, code block typewriter effect on the homepage, agentic-flow diagram animations) are not in scope.
• Form validation states beyond `{component.text-input-focused}` are not extracted — error / success states would need a sign-up or feedback flow to confirm.
• The actual Claude product surface (claude.ai chat interface) shares some tokens with the marketing site but adds many product-specific components (chat bubbles, message tools, file upload chips, conversation history sidebar) that are out of scope for this marketing-surface document.
• The "agent" / "computer use" demo cards on certain pages display animated Claude controlling a browser — the static screenshot doesn't fully capture the animation chrome.

개요

Claude.com은 AI 제품 카테고리에서 가장 따뜻하고 편집적인 인터페이스입니다. 기본 분위기는 **틴티드 크림 캔버스**(`{colors.canvas}` — #faf9f5)입니다. 확실히 따뜻하고, 의도적으로 다른 모든 AI 브랜드가 사용하는 시원한 회백색은 아닙니다. 헤드라인은 **StyreneB / Inter** 본문 산세와 쌍을 이루는 음수 문자 간격으로 무게 400에서 **슬랩 세리프 디스플레이**("Copernicus" / Tiempos Headline)를 실행합니다. 이 조합은 SaaS 마케팅 페이지가 아닌 문학 출판물처럼 느껴집니다.

브랜드 전압은 **크림 + 산호 조합**에서 나옵니다. 산호(`{colors.primary}` - #cc785c)는 모든 기본 CTA, 브랜드 워드마크 및 풀 블리드 콜아웃 카드에 사용되는 시그니처 인류적 악센트입니다. 산호는 따뜻하고 약간 조용하며 결코 청록색/파란색이 아닙니다. 이는 OpenAI의 차가운 슬레이트, Google의 포화된 파란색 및 Microsoft의 기업용 청록색에 대한 의도적인 반대 위치입니다.

시스템에는 페이지별로 교대로 표시되는 세 가지 표면 모드가 있습니다.

1. **크림 캔버스** (`{colors.canvas}`) — 기본 본체 바닥

2. **밝은 크림색 카드** (`{colors.surface-card}`) — 기능 카드 배경

3. **다크 네이비 제품 표면**(`{colors.surface-dark}`) — 코드 편집기 모형, 모델 쇼케이스 카드, 바닥글 앞 CTA, 바닥글 자체

어두운 표면은 Claude가 제품 크롬(코드 블록, 터미널 출력, 모델 비교 테이블, 에이전트 흐름 다이어그램)을 보여주는 곳입니다. 크림색과 어두운색의 대비는 페이지의 속도 리듬입니다.

**주요 특징:**

• 따뜻한 크림색 캔버스(`{colors.canvas}` — #faf9f5)와 어두운 따뜻한 잉크 텍스트(`{colors.ink}` — #141413). 브랜드를 정의하는 색상 선택.
• 산호색 기본 CTA(`{colors.primary}` — #cc785c). 개별 버튼에는 거의 사용되지 않으며 풀 블리드 산호 콜아웃 카드에는 넉넉하게 사용됩니다.
• Copernicus/Tiempos 헤드라인을 통해 슬라브 세리프 표시 헤드라인은 음수 간격으로 400으로 표시됩니다. 문학적 편집 목소리를 위해 인본주의적인 신체와 짝을 이룹니다.
• 코드 블록, 터미널 패널, 모델 비교 데이터를 담고 있는 다크 네이비 제품 모형 카드(`{colors.surface-dark}` — #181715) - 브랜드는 추상적인 마케팅 일러스트레이션보다는 제품 크롬을 대규모로 보여줍니다.
• 연한 크림색 기능 카드(`{colors.surface-card}` — #efe9de) — 캔버스보다 약간 어둡고 콘텐츠 중심 기능 설명에 사용됩니다.
• 작은 검정색 별표 모양의 문자 모양(4스포크 방사형)인 인류 방사형 스파이크 마크는 브랜드 워드마크 접두사 및 콘텐츠 표시로 나타납니다.
• 테두리 반경은 계층적입니다. 버튼 + 입력의 경우 `{rounded.md}`(8px), 콘텐츠 + 제품 카드의 경우 `{rounded.lg}`(12px), 히어로 일러스트레이션 컨테이너의 경우 `{rounded.xl}`(16px), 배지의 경우 `{rounded.pill}`.
• 섹션 리듬 `{spacing.section}`(96px) — 최신 SaaS 표준. 내부 카드 패딩은 `{spacing.xl}`(32px)에서 넉넉하게 유지됩니다.

색상

브랜드 및 액센트

• **산호 / 기본** (`{colors.primary}` — #cc785c): 대표적인 인류의 따뜻한 산호초입니다. 모든 기본 CTA 배경, 풀 블리드 산호 콜아웃 카드, 브랜드 워드마크 액센트에 사용됩니다. 스파이크 마크 로고 외부에서 가장 잘 알려진 인류적 색상입니다.
• **Coral Active** (`{colors.primary-active}` — #a9583e): 누르기/호버-더 어두운 변형입니다.
• **산호 비활성화** (`{colors.primary-disabled}` — #e6dfd8): 채도가 낮은 크림색 비활성화 상태입니다.
• **액센트 청록색**(`{colors.accent-teal}` — #5db8a6): 보조 제품 표면(단말기 상태 표시기, 커넥터 페이지의 "활성 연결" 점)에 드물게 사용됩니다.
• **Accent Amber** (`{colors.accent-amber}` — #e8a55a): 카테고리 배지 및 인라인 하이라이트에 사용되는 작은 동반 따뜻한 톤입니다.

표면

• **캔버스** (`{colors.canvas}` — #faf9f5): 기본 페이지 바닥입니다. 틴티드 크림 - 따뜻하고 일부러 순백색은 아닙니다.
• **부드러운 표면** (`{colors.surface-soft}` — #f5f0e8): 섹션 구분선, 매우 부드러운 밴드 배경.
• **Surface 카드**(`{colors.surface-card}` — #efe9de): 기능 카드, 콘텐츠 카드. 캔버스보다 한 단계 더 어둡습니다.
• **Surface Cream Strong** (`{colors.surface-cream-strong}` — #e8e0d2): 선택한 카테고리 탭과 강조된 섹션 밴드에 사용되는 가장 강한 크림 변형입니다.
• **Surface Dark** (`{colors.surface-dark}` — #181715): 코드 편집기 모형, 모델 쇼케이스 카드, 바닥글. 지배적인 어두운 표면.
• **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #252320): 어두운 밴드 내부의 상승된 카드(모형의 설정 패널).
• **Surface Dark Soft** (`{colors.surface-dark-soft}` — #1f1e1b): 약간 더 밝은 어두움, 더 큰 어두운 카드 내부의 코드 블록 배경에 사용됩니다.
• **헤어라인** (`{colors.hairline}` — #e6dfd8): 크림색 표면의 1px 테두리 톤입니다. `{colors.primary-disabled}`와 동일한 16진수 — 테두리는 잉크 선이 아닌 하나의 높이 단계처럼 느껴집니다.
• **Hairline Soft** (`{colors.hairline-soft}` — #ebe6df): 동일한 밴드 내부에 사용되어 거의 눈에 띄지 않는 구분선입니다.

텍스트

• **잉크**(`{colors.ink}` — #141413): 모든 헤드라인 및 기본 텍스트. 따뜻한 어두움, 약간 밋밋한 순수한 검정색.
• **몸매가 강함** (`{

概要

Claude.com は、AI 製品カテゴリの中で最も温かみのある、最も編集性の高いインターフェイスです。基本的な雰囲気は、**着色されたクリーム色のキャンバス** (`{colors.canvas}` — #faf9f5) です。明らかに温かみがあり、他のすべての AI ブランドが使用しているクールな灰白色ではありません。見出しは、**スラブセリフ表示** (「コペルニクス」/ティエンポス見出し) をウェイト 400 で負の文字間隔で実行し、**StyreneB / Inter** ボディサンと組み合わせます。この組み合わせは、SaaS マーケティング ページではなく、文学出版物のように感じられます。

ブランドのボルテージは、**クリーム + コーラルの組み合わせ**から生まれます。コーラル (`{colors.primary}` — #cc785c) は、すべての主要な CTA、ブランドのワードマーク、およびフルブリード コールアウト カードで使用される、特徴的なアンスロピック アクセントです。コーラルは温かみがあり、わずかに落ち着いており、決してシアン/ブルーではありません。これは、OpenAI のクールなスレート、Google の飽和したブルー、および Microsoft の企業シアンに対して意図的に対置されたものです。

システムには、ページごとに切り替わる 3 つのサーフェス モードがあります。

1. **クリーム キャンバス** (`{colors.canvas}`) — デフォルトのボディ フロア

2. **ライト クリーム カード** (`{colors.surface-card}`) — フィーチャー カードの背景

3. **ダーク ネイビーの製品表面** (`{colors.surface-dark}`) — コード エディターのモックアップ、モデル ショーケース カード、プレフッター CTA、フッター自体

暗い表面は、Claude が製品のクロム (コード ブロック、端末出力、モデル比較テーブル、エージェント フロー図) を示している場所です。クリーム色とダーク色のコントラストがページのペースのリズムを表しています。

**主な特徴:**

• 温かみのあるクリーム色のキャンバス (`{colors.canvas}` — #faf9f5) と濃い色の温かみのあるインクのテキスト (`{colors.ink}` — #141413)。ブランドを決定づける色の選択。
• Coral プライマリ CTA (`{colors.primary}` — #cc785c)。個々のボタンにはほとんど使用されず、フルブリード サンゴの吹き出しカードにはたっぷりと使用されます。
• スラブセリフは、Copernicus / Tiempos Headline による見出しを、負の文字間隔でウェイト 400 で表示します。体を持たないヒューマニストと組み合わせて、文学的な編集者の声を表現します。
• ダークネイビーの製品モックアップ カード (`{colors.surface-dark}` — #181715) コード ブロック、端子パネル、モデル比較データが記載されています。このブランドは、抽象的なマーケティング イラストではなく、製品のクロームを大規模に示しています。
• ライトクリーム色のフィーチャーカード (`{colors.surface-card}` — #efe9de) — キャンバスよりわずかに濃い色で、コンテンツ主導型のフィーチャーの説明に使用されます。
• 人為的な放射状スパイク マーク - 小さな黒いアスタリスクのようなグリフ (4 本のスポーク放射状) - ブランドのワードマークのプレフィックスおよびコンテンツ マーカーとして表示されます。
• 境界線の半径は階層的です: ボタン + 入力の場合は `{rounded.md}` (8px)、コンテンツ + 製品カードの場合は `{rounded.lg}` (12px)、ヒーローのイラスト コンテナの場合は `{rounded.xl}` (16px)、バッジの場合は `{rounded.pill}` です。
• セクション リズム `{spacing.section}` (96px) — 最新の SaaS 標準。内部カードのパディングは `{spacing.xl}` (32 ピクセル) で十分なままです。

色

ブランドとアクセント

• **コーラル / プライマリ** (`{colors.primary}` — #cc785c): 代表的な人為的な暖かいサンゴ。すべての主要な CTA 背景、フルブリード コーラルの吹き出しカード、ブランドのワードマーク アクセントに使用されます。スパイクマークのロゴの外側で最もよく知られているアンスロピックカラー。
• **Coral Active** (`{colors.primary-active}` — #a9583e): プレス/ホバーダークのバリアント。
• **Coral Disabled** (`{colors.primary-disabled}` — #e6dfd8): 彩度の低いクリーム色の無効状態。
• **アクセント ティール** (`{colors.accent-teal}` — #5db8a6): 二次製品の表面 (端子ステータス インジケーター、コネクタ ページの「アクティブな接続」ドット) では控えめに使用されます。
• **アクセント アンバー** (`{colors.accent-amber}` — #e8a55a): カテゴリ バッジとインライン ハイライトで使用される小さなコンパニオン ウォーム トーン。

表面

• **キャンバス** (`{colors.canvas}` — #faf9f5): デフォルトのページフロア。色付きのクリーム — 温かみがあり、意図的に真っ白ではありません。
• **Surface Soft** (`{colors.surface-soft}` — #f5f0e8): セクション分割線、非常にソフトなバンドの背景。
• **Surface カード** (`{colors.surface-card}` — #efe9de): フィーチャー カード、コンテンツ カード。キャンバスより一段濃い色。
• **Surface Cream Strong** (`{colors.surface-cream-strong}` — #e8e0d2): 選択されたカテゴリ タブと強調されたセクション バンドで使用される最も強力なクリームのバリアント。
• **Surface Dark** (`{colors.surface-dark}` — #181715): コード エディターのモックアップ、モデル ショーケース カード、フッター。支配的な暗い表面。
• **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #252320): ダーク バンド内の強化されたカード (モックアップの設定パネル)。
• **Surface Dark Soft** (`{colors.surface-dark-soft}` — #1f1e1b): わずかに明るいダークで、大きなダーク カード内のコード ブロックの背景に使用されます。
• **ヘアライン** (`{colors.hairline}` — #e6dfd8): クリーム色の表面上の 1 ピクセルの境界線のトーン。 `{colors.primary-disabled}` と同じ 16 進数 — 境界線はインク ラインではなく 1 つの高度ステップのように感じられます。
• **Hairline Soft** (`{colors.hairline-soft}` — #ebe6df): 同じバンド内で使用されるほとんど見えない分割線。

テキスト

• **インク** (`{colors.ink}` — #141413): すべての見出しと主要なテキスト。温かみのあるダークで、わずかに純粋な黒とは異なります。
• **体は強い** (`{