# Claude — Design System
> An AI assistant platform by Anthropic for problem solvers, featuring chat and collaborative coding capabilities.
- **Canonical:** https://uiuxskills.com/library/claude
- **Source:** https://claude.ai
- **Category:** AI & LLM Platforms
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:16:26.841Z

---

---
version: alpha
name: Claude
description: >-
  An AI assistant platform by Anthropic for problem solvers, featuring chat and collaborative coding
  capabilities.
tone: Professional, calm, intelligent, and direct.
color-scheme: light
colors:
  primary: "#1A73E8"
  secondary: "#5C6370"
  surface: "#F8F8F6"
  surface-container: "#FAF9F5"
  on-surface: "#141413"
  outline: "#D7D7D5"
  error: "#FF0000"
  link: "#ABB2BF"
  focus-ring: "#1A73E8"
  on-primary: "#FFFFFF"
typography:
  display-lg:
    fontFamily: Anthropic Sans
    fontSize: 56px
    fontWeight: 700
  headline-lg:
    fontFamily: Anthropic Sans
    fontSize: 32px
    fontWeight: 600
  headline-md:
    fontFamily: Anthropic Sans
    fontSize: 24px
    fontWeight: 600
  body-md:
    fontFamily: Roboto
    fontSize: 16px
    fontWeight: 400
  body-sm:
    fontFamily: Roboto
    fontSize: 14px
    fontWeight: 400
  label-md:
    fontFamily: Roboto
    fontSize: 14px
    fontWeight: 500
  label-sm:
    fontFamily: Roboto
    fontSize: 12px
    fontWeight: 400
rounded:
  sm: 4px
  md: 8px
  lg: 9.6px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "#141413"
    textColor: "#FFFFFF"
    typography: "{typography.label-md}"
    width: 100%
  button-primary-hover:
    backgroundColor: "#333333"
    textColor: "#FFFFFF"
  button-secondary:
    backgroundColor: transparent
    textColor: "#141413"
    typography: "{typography.label-md}"
    borderColor: "#B7B7B5"
  card:
    backgroundColor: "#FFFFFF"
    rounded: "{rounded.lg}"
    borderColor: "#D7D7D5"
  card-elevated:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
  input-field:
    backgroundColor: "#FFFFFF"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#0056b3"
  badge:
    backgroundColor: "#F0F0F0"
    textColor: "{colors.secondary}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FFE5E5"
    textColor: "{colors.error}"
  card-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-link:
    backgroundColor: "{colors.link}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-on-primary:
    backgroundColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 200ms
  duration-medium: 300ms
  easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1)
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.1)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Claude's visual identity is defined by a clean, academic, and minimalist aesthetic. It prioritizes readability and focus, using a warm, neutral color palette that feels approachable yet professional, suitable for deep work and complex problem-solving.

## Colors

The color strategy relies on a warm, neutral foundation to minimize visual noise, allowing the content to remain the primary focus.

*   Primary (#1A73E8): Used for primary actions and brand-aligned interactive elements.
*   Secondary (#5C6370): Used for secondary text and supporting UI elements.
*   Surface (#F8F8F6): The primary background color for the application, providing a warm, low-contrast base.
*   Surface-container (#FAF9F5): Used for card backgrounds and elevated containers.
*   On-surface (#141413): Primary text color for high-contrast readability against the surface.
*   Outline (#D7D7D5): Border color for input fields and structural dividers.
*   Error (inferred) (#FF0000): Semantic color for error states and validation messages.
*   Link (#ABB2BF): Color for secondary links and non-primary navigation.
*   Focus-ring (inferred) (#1A73E8): Used to indicate active keyboard focus states.
*   On-primary (#FFFFFF): Text color for buttons with primary background.

## Typography

Typography is centered on a clean, legible pairing of Anthropic Sans for headings and Roboto for functional UI and body text.

*   Display-lg (inferred) (Anthropic Sans): Used for hero headlines.
*   Headline-lg (inferred) (Anthropic Sans): Used for section headers.
*   Headline-md (inferred) (Anthropic Sans): Used for sub-headers.
*   Body-md (Roboto): Standard body text for paragraphs.
*   Body-sm (inferred) (Roboto): Used for secondary descriptions and labels.
*   Label-md (inferred) (Roboto): Used for button labels.
*   Label-sm (Roboto): Used for small UI captions.

## Layout

The layout follows a centered, container-based approach with a max-width constraint to maintain readability. The design utilizes a 4px grid system, with spacing increments (xs: 4px, sm: 8px, md: 16px, lg: 24px, xl: 32px, 2xl: 48px) ensuring consistent vertical rhythm. The page pattern follows a logical flow: nav, hero, auth-form, pricing-plans, faq, and footer. The design is mobile-first, stacking vertically on smaller screens and centering content on larger viewports.

## Elevation & Depth

The brand uses minimal elevation, relying on subtle borders and color contrast to define surfaces. Shadows are inferred to be soft and diffuse to maintain the clean, modern aesthetic.

*   elevation.sm — subtle lift for small UI elements.
*   elevation.md — standard lift for cards or dropdowns.
*   elevation.lg — pronounced lift for modal overlays or drawers.

## Shapes

A consistent border-radius philosophy is applied across the interface to maintain an approachable, soft feel. The `rounded.lg` (9.6px) token is the standard for cards and inputs, providing a modern, rounded aesthetic that avoids harsh, sharp corners while remaining professional.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button Primary
An imperative, high-contrast action element using a dark background and white text. Use this for the main call-to-action on a page to drive user conversion.

### Card
A container using `{rounded.lg}` and `{colors.outline}` borders. Use this to group related information or pricing tiers to maintain a clean, organized visual hierarchy.

### Input Field
A standard text entry component featuring a `{colors.outline}` border that transitions to `{colors.primary}` on focus. Use this for authentication forms or user input tasks.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary action buttons. | Use `{colors.error}` for non-destructive actions. |
| Apply `{rounded.lg}` to all input fields and cards. | Use sharp 0px corners on buttons or inputs. |
| Maintain `{spacing.md}` between form elements. | Mix font families outside Anthropic Sans and Roboto. |
| Use `{typography.body-md}` for primary paragraphs. | Use `{typography.display-lg}` for body text. |
| Ensure all interactive elements have a `{colors.focus-ring}`. | Use low-contrast text colors on `{colors.surface}`. |
| Use `{colors.surface}` as the base background. | Use excessive shadows; keep elevation minimal. |
| Use `{typography.label-md}` for button labels. | Use decorative or heavy drop shadows. |
| Use `{colors.outline}` for structural dividers. | Use high-contrast black borders on light surfaces. |

## Content Style

CTA labels should use imperative verbs, sentence case, and remain direct and concise (e.g., "Continue with email").

Headings are benefit-oriented, clear, and punchy, designed to communicate value immediately.

Copy density is optimized for high readability, utilizing short paragraphs and scannable lists to keep the user focused on the task at hand.

## Imagery & Icons

The visual language is minimal, utilizing simple, geometric icons with thin strokes. Imagery is used sparingly, focusing instead on clean typography and functional UI to maintain the platform's professional, academic tone.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Claude by Anthropic, a minimal, accessible AI platform with a professional and calm tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.body-md}`, `{spacing.md}` — never hardcode hex values, pixel sizes, or font names.
2. Respect the components block exactly. `button-primary`, `card`, `card-elevated`, `input-field`, and other listed variants are the only valid shapes; do not invent variants the spec does not define.
3. Apply `{rounded.lg}` to all cards and input fields. Use `{rounded.full}` only for pill-shaped elements explicitly requiring it. Sharp (0px) corners are prohibited.
4. Follow the Layout section: centered container, 4px grid, mobile-first, one breakpoint at 768px. Page section order — nav, hero, auth-form, pricing-plans, faq, footer — is set by the product team.
5. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict before proceeding.

## Output contract

**Must:**
- Use all tokens by name on every generated component.
- Include hover, focus, and disabled states for interactive elements when defined (`button-primary-hover`, `input-field-focus`, `{colors.focus-ring}`).
- Apply `{spacing.md}` between form elements and follow the spacing scale `{spacing.xs}` through `{spacing.2xl}` for all padding and gaps.
- Render button labels in `{typography.label-md}` with sentence-case imperative verbs per the Content Style section.
- Keep elevation minimal; prefer `{elevation.sm}` or subtle borders over heavy shadows.

**Must NOT:**
- Invent colors, font families, radii, or spacing values absent from the spec.
- Use generic system defaults when a brand token exists.
- Add emoji, decorative imagery, or filler copy.
- Reference any specific framework or toolchain.
- Rewrite, replace, or invent page copy, headings, button labels, or navigation items.
- Alter information architecture as a side effect of applying design tokens.

## When in doubt
- If the spec does not define a value, ask the user before inventing one.
- Tokens marked "(inferred)" are visual approximations; if an authoritative source exists, it takes precedence.
- For ambiguous backgrounds, default to `{colors.surface}`; for text on those backgrounds, use `{colors.on-surface}`.
- For unspecified breakpoints, apply mobile-first layout with one breakpoint at 768px.
- Prefer composing existing components over introducing new tokens.