# Claude by Anthropic — Design System
> Claude is Anthropic's AI, built for problem solvers. Tackle complex challenges, analyze data, write code, and think through your hardest work.
- **Canonical:** https://uiuxskills.com/library/claude-by-anthropic
- **Source:** https://claude.com/product/overview
- **Category:** AI & LLM Platforms
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:16:42.399Z

---

---
version: alpha
name: Claude
description: Anthropic's AI assistant for complex problem solving and collaboration.
tone: Intellectual, helpful, precise, and calm.
color-scheme: light
colors:
  primary: "#141413"
  surface: "#F0EEE6"
  surface-container: "#E8E6DC"
  surface-bright: "#FFFFFF"
  on-surface: "#141413"
  on-primary: "#F0EEE6"
  outline: "#B0AEA5"
  error: "#D93025"
  success: "#188038"
  neutral: "#87867F"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
  body-sm:
    fontFamily: sans-serif
    fontSize: 0.875rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    width: auto
  button-primary-hover:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.surface}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.neutral}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FDE7E7"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.display-lg}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  card-bright:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-on-primary:
    backgroundColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

Claude features a sophisticated, academic, and calm visual identity. It prioritizes clarity and focus, using a warm, paper-like neutral palette that feels grounded and human-centric, distinguishing it from the high-contrast "tech-blue" aesthetic often found in AI products.

## Colors

The color strategy relies on a warm, organic palette that mimics the feel of physical paper, creating a comfortable environment for long-form reading and complex problem solving.

*   Primary (#141413): Used for primary text and high-emphasis UI elements.
*   Surface (#F0EEE6): The base background color, providing a warm, paper-like aesthetic.
*   Surface-container (#E8E6DC): Used for cards and secondary container backgrounds.
*   Surface-bright (inferred) (#FFFFFF): Used for highlights and interactive elements.
*   On-surface (#141413): Primary text color on light surfaces.
*   On-primary (inferred) (#F0EEE6): Text color for dark-mode buttons or primary action blocks.
*   Outline (#B0AEA5): Used for subtle borders and dividers.
*   Error (inferred) (#D93025): Standard semantic error color for form validation.
*   Success (inferred) (#188038): Standard semantic success color.
*   Neutral (#87867F): Secondary text and muted UI elements.

## Typography

Typography is clean and sans-serif, designed to maintain high readability across various screen sizes while supporting an intellectual and precise tone.

*   Display-lg (inferred): Used for hero headlines.
*   Headline-lg (inferred): Used for sub-headlines.
*   Body-md (inferred): Standard paragraph text.
*   Body-sm (inferred): Used for captions and secondary labels.

## Layout

The layout follows a mobile-first responsive strategy, utilizing a grid-based approach with generous whitespace to maintain user focus. The section order is: nav, hero, features, use-cases, download, footer. The hero pattern centers the headline and subhead to emphasize the "thinking partner" value proposition, while content blocks stack vertically on smaller viewports. Spacing is governed by a scale where {spacing.lg} (24px) is the standard gap between major sections.

## Elevation & Depth

Depth is conveyed through subtle, light-touch shadows to maintain a minimal, flat aesthetic. Elevation is applied using three distinct levels: {elevation.sm} for subtle card lift, {elevation.md} for dropdowns or popovers, and {elevation.lg} for modal or drawer overlays. These values were inferred to ensure a consistent, non-intrusive depth hierarchy.

## Shapes

The brand uses a moderate corner radius, favoring soft, approachable shapes over sharp or overly rounded forms. This philosophy is implemented through a scale ranging from {rounded.sm} (4px) for small inputs to {rounded.lg} (12px) for cards, ensuring a consistent, human-centric feel across all UI components.

## 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 action-oriented component featuring a {colors.primary} background and {colors.surface} text. Use this for the main call-to-action on a page to ensure brand recognition and clear hierarchy.

### Card
A container using {colors.surface-container} and {rounded.md}. Use this to group related content or features, maintaining a clean, organized layout.

### Input Field
Features a {colors.surface} background and {rounded.sm} corners. It uses {colors.outline} for the border, transitioning to {colors.primary} on focus to guide user interaction.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for primary CTAs | Use {colors.neutral} for primary buttons |
| Apply {colors.surface} as the page background | Use high-contrast neon colors |
| Use {typography.headline-lg} for hero statements | Use {typography.body-sm} for primary content |
| Ensure {colors.primary} for focus states | Apply heavy, dark shadows |
| Use {rounded.md} for standard cards | Use {rounded.full} on standard cards |
| Maintain {spacing.lg} between sections | Crowd elements without breathing room |
| Use {colors.outline} for subtle dividers | Use high-contrast black borders |
| Reserve {colors.error} for critical validation | Use {colors.error} for decorative elements |

## Content Style

CTA labels are imperative, action-oriented, and concise (e.g., "Ask Claude," "Start importing"). They should be direct and clearly communicate the outcome of the interaction.

Headings are benefit-focused and human-centric. They should be phrased to address the user's needs directly, maintaining an intellectual but accessible tone.

Copy density is designed to be scannable. Use short paragraphs and frequent lists to break up complex information, ensuring the content remains easy to digest for problem solvers.

## Imagery & Icons

Imagery is sparse and functional, focusing on clear, high-quality product screenshots and simple, clean iconography. The treatment is minimal, avoiding decorative clutter to keep the focus on the utility of the AI assistant.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Claude by Anthropic, a minimal, intellectually grounded AI product. Match its calm, precise, paper-like aesthetic. 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}`, `{rounded.md}` — never as a hardcoded hex, pixel value, or font size.
2. Respect only the component variants listed under `components:`. Do not invent new variants (e.g., a `button-tertiary` or `card-outlined`) unless explicitly requested and confirmed against the spec.
3. Follow the Layout narrative: mobile-first, vertical stacking, `{spacing.lg}` as the standard gap between major sections, section order nav → hero → features → use-cases → download → footer.
4. Apply elevation strictly: `{elevation.sm}` for card lift, `{elevation.md}` for dropdowns/popovers, `{elevation.lg}` for modals/drawers. Do not use heavy shadows.
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 token names for all colors, type scales, radii, spacing, and elevation.
- Render hover, focus, and disabled states for every interactive component the spec defines (e.g., `button-primary-hover`, `input-field-focus`, `link-hover`).
- Use `{colors.surface}` as the base page background and `{colors.primary}` for all primary CTAs.
- Write CTA labels as concise imperatives per the Content Style section; match the intellectual, direct tone for any generated headings.

**Must NOT:**
- Invent colors, radii, font sizes, or spacing values outside the spec.
- Substitute generic utility defaults (e.g., `gray-500`, `rounded-md` as a literal string) when a named token exists.
- Add emoji, decorative imagery, or marketing filler copy.
- Rewrite, replace, or invent page copy, headings, button labels, or navigation items.
- Alter page section order or information architecture as a side effect of applying tokens.

## When in doubt
- If a value isn't defined in the spec, ask before inventing one.
- For ambiguous backgrounds, default to `{colors.surface}`; for text on those backgrounds, use `{colors.on-surface}`.
- Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook) exists, it takes precedence.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px.
- Prefer composing existing components over introducing any new token.