platform.claude.com Sample

# Design Thinking
Before coding, understand the context and define a bold aesthetic direction:
- **Purpose**: What problem does this interface solve? Who is using it?
- **Style**: Choose an extreme style: minimalism, maximalism, retro-futurism, organic/natural, luxury/artisanal, playful/toy-like, magazine/editorial, raw/rough, art deco/geometric, soft pastel, industrial/practical, etc. There are many styles to choose from. You can draw inspiration from them, but ensure your design truly aligns with the selected aesthetic direction.
- **Constraints**: Technical requirements (frameworks, performance, accessibility).
- **Differentiation**: What makes it memorable? What one thing will people remember?
**Key**: Choose a clear conceptual direction and execute it precisely. Both bold maximalism and refined minimalism are viable — the key is intention, not intensity.
## Aesthetic Default Settings
- Start with composition, not components.
- Prioritize full-bleed hero images or full-canvas visual anchors.
- Make the brand or product name the most prominent text.
- Keep copy concise for quick scanning.
- Use white space, alignment, scaling, cropping, and contrast before adding borders.
- Default constraint system: no more than two fonts and one accent color.

# Overall Atmosphere
The Claude API Docs site projects a sophisticated, developer-focused aesthetic with a dark-first design philosophy. The interface balances technical authority with approachable elegance through warm accent colors against deep charcoal backgrounds, generous whitespace, and clear typographic hierarchy.

## Design System
### 1. Core Style
Dark mode by default with a near-black canvas (`bg-bg-100`), utilizing subtle elevation through bordered containers rather than heavy shadows. The aesthetic is minimalist and code-editor adjacent, emphasizing readability and technical precision. Interface elements favor restrained elegance over decorative flourishes.

### 2. Color Palette
- **Background**: Deep charcoal/near-black primary surface
- **Accent**: Warm coral-orange for section labels and interactive highlights
- **Text**: White/off-white for primary content, muted gray for secondary descriptions
- **Borders**: Subtle low-contrast borders (`border-border-200/30`) defining card edges and dividers
- **Surface**: Slightly elevated dark gray for cards and interactive containers

### 3. Font Stack
- **Headings**: Elegant serif display typeface (high contrast, editorial feel) for major headings like "Start building with Claude"
- **Body/UI**: Clean sans-serif system for navigation, descriptions, and interface elements
- **Code**: Monospace with syntax highlighting (purple imports, teal strings, orange parameters)

### 4. Texture
- Subtle 1px borders on cards and navigation elements
- No heavy drop shadows; depth achieved through border contrast and background layers
- Clean geometric iconography paired with text

### 5. Motion Design
- Smooth color transitions on interactive elements (`transition-colors`)
- Tab panel switching with active state indicators (coral underline)
- Hover states revealing subtle background shifts

## Component Guidelines
### Button
Ghost-style buttons with icons for primary actions (Quickstart, Get API key), utilizing left-aligned icons and medium weight text. Primary CTA uses solid white background with dark text for maximum contrast.

### Card
Large, spacious containers with generous internal padding (`p-6` to `p-8`), rounded corners (`rounded-lg` to `rounded-xl`), and subtle borders. Cards often feature top-aligned badges or labels in coral accent color.

### Navigation
Fixed header with blurred backdrop, containing mixed navigation pattern: text links for primary sections, dropdown triggers for "Resources" and language selection, and utility actions (Console, Log in) aligned right.

### Input
Large, prominent search input with icon prefix, full-width within constraints, featuring placeholder text and keyboard shortcut hint (⌘K) positioned absolute right.

### Typography
Section labels in uppercase tracking-wider coral text (`PLATFORM`, `MODELS`, `RESOURCES`). Headings use serif font for editorial distinction. Body text maintains comfortable line-height for readability.

## Distinctive Element Few-shot Examples
### 1. Hero with Live Code Editor
**Purpose:**
Primary landing zone that immediately demonstrates the API's developer experience by showing actual implementation code alongside navigation CTAs and search.

**Evidence:**
Section with class `px-5 pt-16 pb-12 max-w-[1200px] mx-auto` containing split layout: left side features serif heading "Start building with Claude", search input with "What do you want to build?" placeholder and ⌘K shortcut, and three CTA buttons (Quickstart, Get API key, API reference). Right side contains code block with language selector tabs (Python, TypeScript, Go, Java, Ruby, PHP, C#, cURL, CLI) and syntax-highlighted Python code showing Anthropic client initialization.

**Visual Rules:**
- Layout: Two-column asymmetric grid (text left ~45%, code right ~55%) on large screens, stacking on mobile
- Color: Dark background with white serif headings; code block uses elevated dark surface with purple/blue/orange syntax highlighting
- Typography: Large serif display font (approx 48-56px) for headline; sans-serif for description and CTAs
- Spacing: Generous vertical padding (`pt-16 pb-12`), large gap between columns
- Radius / border / shadow: Code container features rounded corners and subtle border; language tabs have minimal separation
- Motion: Tab switching between programming languages with active state highlighting

**Recreation Prompt:**
Create a hero section with a sophisticated dark theme. Left side: Large serif headline "Start building with Claude", subtitle text, a wide search input with magnifying glass icon and ⌘K keyboard hint, and three pill-shaped buttons with leading icons (play, key, brackets). Right side: A code editor window with rounded corners containing a horizontal tab bar for language selection (Python active by default) and a syntax-highlighted code block showing API initialization. Use a deep charcoal background, white text, and coral accents for active states.

**Structure Sketch:**
```html
<section class="max-w-[1200px] mx-auto px-5 pt-16 pb-12">
  <div class="grid lg:grid-cols-2 gap-12">
    <div>
      <span class="text-coral uppercase tracking-wider text-sm">Claude Platform</span>
      <h1 class="serif text-5xl text-white mt-4">Start building with Claude</h1>
      <p class="text-gray-400 mt-4 text-lg">Everything you need to integrate Claude...</p>
      
      <div class="relative mt-8">
        <input type="text" placeholder="What do you want to build?" class="w-full bg-dark-elevated border border-gray-700 rounded-lg py-3 pl-12 pr-16 text-white"/>
        <span class="absolute right-4 top-3 text-gray-500">⌘K</span>
      </div>
      
      <div class="flex gap-3 mt-6">
        <button class="flex items-center gap-2 px-4 py-2 border border-gray-700 rounded-lg text-white hover:bg-gray-800">
          <play-icon/> Quickstart
        </button>
        <!-- Additional CTAs -->
      </div>
    </div>
    
    <div class="bg-dark-elevated rounded-xl border border-gray-800 overflow-hidden">
      <div class="flex border-b border-gray-800">
        <button class="px-4 py-2 text-sm text-white bg-black">Python</button>
        <button class="px-4 py-2 text-sm text-gray-400 hover:text-white">TypeScript</button>
        <!-- More tabs -->
      </div>
      <pre class="p-6 text-sm font-mono">
        <code><!-- Syntax highlighted code --></code>
      </pre>
    </div>
  </div>
</section>
```

### 2. Developer Journey Timeline
**Purpose:**
Visualizes the development lifecycle from onboarding to production, organizing documentation into a navigable, step-based progression with categorized resource grids.

**Evidence:**
Section with heading "From idea to production", featuring a tab interface (`role="tablist"`) switching between "Messages" and "Managed Agents". Below, a vertical numbered timeline using an ordered list (`ol`) with list items containing large step numbers (1, 2, 3, 4) and corresponding grid layouts of linked resource cards. Steps include "Get started", "Build", "Evaluate & ship", and "Operate". Each step contains 4-8 cards in a responsive grid (`grid-cols-1 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fill,minmax(280px,1fr))]`).

**Visual Rules:**
- Layout: Vertical timeline with numbered circular badges (1, 2, 3, 4) connected by subtle left border line; each step contains a heading and grid of cards
- Color: Coral accent for active tab underline and section label ("DEVELOPER JOURNEY"); white text for step headings; cards have subtle borders
- Typography: Sans-serif for step titles ("Get started", "Build"); uppercase tracking for section label
- Spacing: Consistent vertical rhythm between steps (`space-y-0 ml-3.5 my-8` on list); generous padding within cards
- Radius / border / shadow: Cards feature rounded corners and 1px borders; timeline connector uses left border
- Motion: Tab switching between Messages/Managed Agents journey paths; hover states on resource cards

**Recreation Prompt:**
Create a documentation hub section titled "From idea to production" with a coral section label. Include two tabs at the top ("Messages" active, "Managed Agents" inactive) with an animated underline indicator. Below, implement a vertical timeline with four numbered steps (1-4). Each step has a large bold number in a circle, a step title ("Get started", "Build", etc.), and a grid of 4-6 rectangular cards with icons and labels like "Quickstart", "Get API key", "Messages API", "Extended thinking". Cards should have subtle borders, rounded corners, and hover lift effects. Use a dark background with white text and gray secondary text.

**Structure Sketch:**
```html
<section class="max-w-[1200px] mx-auto px-5 pt-8 pb-12">
  <span class="text-coral uppercase tracking-wider text-sm">Developer journey</span>
  <h2 class="serif text-4xl text-white mt-2">From idea to production</h2>
  
  <div class="flex gap-6 border-b border-gray-800 mt-8 mb-8" role="tablist">
    <button class="pb-3 text-white border-b-2 border-coral">Messages</button>
    <button class="pb-3 text-gray-400 hover:text-white">Managed Agents</button>
  </div>
  
  <ol class="relative space-y-0 ml-4 border-l border-gray-800">
    <li class="relative pl-8 pb-8">
      <span class="absolute -left-3 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 text-white text-sm">1</span>
      <h3 class="text-white font-semibold mb-4">Get started</h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
        <a href="#" class="flex items-center gap-3 p-4 rounded-lg border border-gray-800 hover:border-gray-600 bg-dark-surface">
          <play-icon class="text-gray-400"/>
          <span class="text-white">Quickstart</span>
        </a>
        <!-- More cards -->
      </div>
    </li>
    <!-- Additional steps 2-4 -->
  </ol>
</section>
```

### 3. Model Comparison Cards
**Purpose:**
Presents Claude's model tiers (Opus, Sonnet, Haiku) in a scannable, comparison-friendly format emphasizing capability tiers and use cases.

**Evidence:**
Grid container (`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4`) within section "The Claude model family". Three prominent cards featuring:
- Top label in uppercase tracking ("MOST CAPABLE", "BEST BALANCE", "FASTEST") in coral/muted color
- Large serif model name ("Opus 4.7", "Sonnet 4.6", "Haiku 4.5")
- Copy-able model ID (`claude-opus-4-7` with copy icon button)
- Description text explaining ideal use cases

**Visual Rules:**
- Layout: Three-column grid on desktop, collapsing to single column on mobile; equal-height cards
- Color: Dark card surfaces with subtle borders; coral accent for capability labels; white serif typography for model names
- Typography: Uppercase sans-serif tracking-wider for tier labels; large serif display for model names; monospace for model IDs
- Spacing: Generous internal padding (`p-6` or `p-8`); consistent gap between cards (`gap-4`)
- Radius / border / shadow: Rounded corners (`rounded-xl` or similar); subtle border; no heavy shadow
- Motion: Copy button interaction; potential hover lift on cards

**Recreation Prompt:**
Create a model selection section with three large cards arranged in a grid. Each card represents an AI model tier: "Opus 4.7" (Most capable), "Sonnet 4.6" (Best balance), and "Haiku 4.5" (Fastest). Cards should have dark backgrounds, rounded corners, and subtle borders. At the top of each card, display an uppercase label in coral color ("MOST CAPABLE"). Below, use a large elegant serif font for the model name. Include the model ID in monospace with a copy button. Finish with a description of the model's ideal use case in muted gray text. The cards should feel substantial and premium, with hover states indicating interactivity.

**Structure Sketch:**
```html
<section class="max-w-[1200px] mx-auto px-5 pt-8 pb-12">
  <span class="text-coral uppercase tracking-wider text-sm">Models</span>
  <h2 class="serif text-4xl text-white mt-2">The Claude model family</h2>
  <p class="text-gray-400 mt-2">Choose the right model for your use case.</p>
  
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-8">
    <div class="p-6 rounded-xl border border-gray-800 bg-dark-surface hover:border-gray-700 transition-colors">
      <span class="text-coral text-xs font-medium uppercase tracking-wider">Most capable</span>
      <h3 class="serif text-3xl text-white mt-2">Opus 4.7</h3>
      <div class="flex items-center gap-2 mt-1">
        <code class="text-gray-400 text-sm">claude-opus-4-7</code>
        <button class="text-gray-500 hover:text-white">
          <copy-icon class="w-4 h-4"/>
        </button>
      </div>
      <p class="text-gray-400 mt-4 text-sm leading-relaxed">
        Best for complex analysis, coding, and creative tasks requiring deep reasoning.
      </p>
    </div>
    <!-- Sonnet and Haiku cards following same pattern -->
  </div>
</section>
```

### 4. Platform Selection Grid
**Purpose:**
Helps developers choose between different integration approaches (Direct API vs Managed Agents) through large, descriptive cards with clear action links.

**Evidence:**
Section titled "Choose how you build" containing a two-column grid (`grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6`). Each card features:
- Large icon or illustration at top
- Heading ("Messages" or "Managed Agents")
- Descriptive paragraph explaining the approach
- Multiple action links (Quickstart, API reference, Client SDKs, etc.)

**Visual Rules:**
- Layout: Two-column grid with substantial gap (`gap-6`); cards are tall and spacious
- Color: Dark card backgrounds matching page; white headings; gray descriptions
- Typography: Large sans-serif or serif headings; comfortable line-height for descriptions
- Spacing: Large internal padding; generous space between icon, title, description, and links
- Radius / border / shadow: Prominent rounded corners; subtle border definition
- Motion: Hover states on action links and cards

**Recreation Prompt:**
Create a platform selection section with two large side-by-side cards on a dark background. Left card: "Messages" with description "Direct model access. You construct every turn, manage conversation state, and write your own tool loop." Include three text links below: "Quickstart", "API reference", "Client SDKs". Right card: "Managed Agents" with description "Fully managed agent infrastructure. Deploy and manage autonomous agents..." Include links "Quickstart", "API reference", "Define your agent". Cards should have subtle borders, rounded corners, and hover effects. Use icons above each title to distinguish the concepts visually.

**Structure Sketch:**
```html
<section class="max-w-[1200px] mx-auto px-5 pt-8 pb-12">
  <span class="text-coral uppercase tracking-wider text-sm">Platform</span>
  <h2 class="serif text-4xl text-white mt-2">Choose how you build</h2>
  <p class="text-gray-400 mt-2 max-w-2xl">Pick the developer surface that matches your approach...</p>
  
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8">
    <div class="p-8 rounded-xl border border-gray-800 bg-dark-surface">
      <div class="w-12 h-12 bg-gray-800 rounded-lg mb-6 flex items-center justify-center">
        <messages-icon class="text-gray-400"/>
      </div>
      <h3 class="text-2xl text-white font-semibold">Messages</h3>
      <p class="text-gray-400 mt-3 leading-relaxed">
        Direct model access. You construct every turn, manage conversation state, and write your own tool loop.
      </p>
      <div class="flex flex-wrap gap-4 mt-6">
        <a href="#" class="text-white hover:text-coral flex items-center gap-1">
          Quickstart <arrow-icon/>
        </a>
        <a href="#" class="text-white hover:text-coral flex items-center gap-1">
          API reference <arrow-icon/>
        </a>
        <a href="#" class="text-white hover:text-coral flex items-center gap-1">
          Client SDKs <arrow-icon/>
        </a>
      </div>
    </div>
    <!-- Managed Agents card -->
  </div>
</section>
```

### 5. Fixed Header with Mixed Navigation
**Purpose:**
Persistent navigation providing access to main documentation sections, language switching, and console/login actions while maintaining visual hierarchy through background blur.

**Evidence:**
Fixed header (`fixed top-0 left-0 right-0 z-30`) containing:
- Left: Claude API Docs logo (starburst icon + wordmark)
- Center: Primary navigation links ("Messages", "Managed Agents", "Admin", "Resources" dropdown, "API reference")
- Right: Language selector ("English" dropdown), Console link, "Log in" button (solid white)
- Visual treatment: Blurred backdrop, border-bottom on scroll

**Visual Rules:**
- Layout: Flexbox with justify-between; left logo, center nav, right actions
- Color: Transparent/blurred background initially; white text for nav items; solid white button for primary CTA; coral starburst in logo
- Typography: Medium weight sans-serif for navigation; consistent sizing across items
- Spacing: Compact but breathable (`gap-1` between items); generous horizontal padding
- Radius / border / shadow: Bottom border for separation; no heavy shadow; `rounded-lg` on Log in button
- Motion: Background blur intensifies on scroll; dropdown menus for Resources and Language

**Recreation Prompt:**
Create a fixed navigation header for a developer documentation site. Left side: A logo consisting of a coral starburst icon followed by "Claude API Docs" in white serif text. Center: Navigation links "Messages", "Managed Agents", "Admin", "Resources" (with dropdown chevron), and a bracketed "API reference". Right side: A globe icon with "English" language selector, a monitor icon with "Console" link, and a solid white "Log in" button with black text. The header should have a blurred transparent background, border-bottom, and remain fixed at the top. Use dark theme with white text and subtle hover states.

**Structure Sketch:**
```html
<header class="fixed top-0 left-0 right-0 z-30 border-b border-gray-800/30 backdrop-blur-md bg-black/50">
  <div class="max-w-[1200px] mx-auto px-5 h-16 flex items-center justify-between">
    <a href="#" class="flex items-center gap-2">
      <starburst-icon class="text-coral"/>
      <span class="serif text-xl text-white">Claude API Docs</span>
    </a>
    
    <nav class="hidden lg:flex items-center gap-6">
      <a href="#" class="text-gray-300 hover:text-white">Messages</a>
      <a href="#" class="text-gray-300 hover:text-white">Managed Agents</a>
      <a href="#" class="text-gray-300 hover:text-white">Admin</a>
      <button class="flex items-center gap-1 text-gray-300 hover:text-white">
        Resources <chevron-down class="w-4 h-4"/>
      </button>
      <a href="#" class="flex items-center gap-1 text-gray-300 hover:text-white">
        <brackets-icon class="w-4 h-4"/> API reference
      </a>
    </nav>
    
    <div class="flex items-center gap-4">
      <button class="flex items-center gap-1 text-gray-300 hover:text-white">
        <globe-icon class="w-4 h-4"/> English <chevron-down class="w-4 h-4"/>
      </button>
      <a href="#" class="flex items-center gap-1 text-gray-300 hover:text-white">
        <monitor-icon class="w-4 h-4"/> Console
      </a>
      <a href="#" class="px-4 py-2 bg-white text-black rounded-lg font-medium hover:bg-gray-100">
        Log in
      </a>
    </div>
  </div>
</header>
```

## Engineering CSS Evidence

Compressed from live DOM computed styles. This section keeps high-frequency tokens and intent, not raw CSS dumps.

### Compressed Design Tokens

**Mode:** dark

#### Color Roles
- **color.text.primary:** #faf9f5 (147)
- **color.text.secondary:** #faf9f5 (46)
- **color.surface.base:** #30302e (6)
- **color.accent:** #dedcd1 (107)
- **color.border.default:** #dedcd1 (191)
- **color.focus.ring:** #2c84db (85)

#### Typography Roles
- **font.family.primary:** anthropicSans (182)
- **font.family.secondary:** anthropicSerif (11)
- **font.size.display:** 52px (11)
- **font.size.body:** 16px (45)
- **font.size.label:** 11px (3)
- **ratio:** display is 3.25x body

#### Spacing Rhythm
- **base unit:** 4px
- **space.1:** 12px (117)
- **space.2:** 4px (102)
- **space.3:** 16px (101)
- **space.4:** 8px (52)
- **space.5:** 10px (39)

#### Radius Roles
- **radius.medium:** 9.6px (27)
- **radius.pill:** 9999px (4)

#### Shadow Intent
- **level:** none
- **usage:** 0
- **note:** flat surfaces dominate

#### Motion Intent
- **level:** moderate
- **range:** 100-300ms
- **common durations:** 150ms (56), 200ms (41), 300ms (4)
- **easing style:** cubic-bezier(0.4, 0, 0.2, 1) (97), cubic-bezier(0.165, 0.85, 0.45, 1) (5)

### Distinctive Implementation Signals

- Frequent pill radius (9999px) creates a soft/capsule interaction language.
- Flat surfaces are preferred over decorative depth.
- Motion is moderate, centered around 100-300ms.
- Type hierarchy is ratio-driven: display is 3.25x body.

### Extraction Diagnostics

- Sampled 199 visible elements from 897 total DOM elements.
- Confidence: high.
- No extraction warnings.

## Core Principles
1. Firmly Refuse (Negative Constraints):
- Prohibit using purple/blue gradients on white backgrounds
- Prohibit using common fonts (Inter, Roboto, Arial, system-ui)
- Prohibit using predictable hero-CTA-feature-review templates
- Prohibit using common geometric shapes or abstract spots
- Prohibit using visual effects that look like stock images or clichés
## Performance Optimization
- Ensure pages load quickly, avoid unnecessary large resources
- Use modern image formats (WebP) and appropriate compression
- Implement lazy loading techniques for long page content
**Important Note**: The implementation complexity should match the aesthetic vision. Maximalist designs require complex code as well as a lot of animations and effects. Minimalist or refined designs require restraint, precision, and attention to spacing, typography, and subtle details. Elegance comes from a perfect interpretation of the vision.