Claude design skill for AI agents

Overview

Claude is an editorial, research-journal-inspired design system skill file that instructs AI coding assistants to generate interfaces that feel calm, authoritative, precise, and almost achromatic. Its visual language is built around warm ivory parchment, near-black slate typography, restrained spacing, hard-edged surfaces, and a deliberately tiny chromatic budget.

Where many modern systems rely on gradients, shadows, glass effects, rounded cards, or saturated accent palettes, Claude removes almost all decorative noise. The interface should feel like a carefully typeset research paper, an archival journal, or a serious editorial product printed on warm stone. It is minimal, but not generic. It is quiet, but not weak. Its authority comes from typography, contrast, spacing, and rhythm rather than color or ornament.

When you feed this skill file to an AI assistant, every generated component — buttons, cards, navigation, forms, modals, dashboards, documentation pages — should adopt the Claude visual posture: warm parchment backgrounds, crisp slate ink, flat geometric surfaces, sharp contrast, reserved accents, and interaction states that are clear without becoming flashy.

The result is a UI system that feels trustworthy, literary, analytical, and deeply intentional.

Design Tokens

Color Palette

Claude is intentionally restrained. The palette is almost achromatic, with near-black slate and warm ivory carrying most of the interface. Color is not used for decoration. It is used only for meaning, state, or rare emphasis.

The most important relationship is between warm ivory and near-black slate. Claude should never feel like a sterile white SaaS dashboard. Full-page surfaces should prefer #FAF9F6, while #FFFFFF should be reserved for constrained utility surfaces when additional contrast is required.

The primary color #141413 functions as both ink and architecture. It can be used for text, borders, filled buttons, dark feature panels, headers, and inverted sections. This creates a disciplined visual system where hierarchy is built through density and contrast rather than hue.

The system allows semantic success, warning, and danger colors, but they should remain functional. They are not decorative accents. A validation error may use danger red, but a marketing card should not use red simply to feel energetic.

Accent Color Philosophy

Claude’s chromatic budget is intentionally tiny. The brand description reserves room for a single earthy clay accent, but that accent should be used sparingly and never allowed to dominate the interface.

Use accent color for:

• Rare emphasis moments
• Small editorial marks
• Selected states that need additional distinction
• Links or underlines when monochrome treatment is insufficient
• Small data highlights where semantic colors are not appropriate

Do not use accent color for:

• Large decorative gradients
• Multiple competing callouts
• Background washes
• Glow effects
• Random icon colors
• Color-coded hierarchy that should be handled through typography

Claude should feel as though most of the interface could be printed in black ink on warm paper and still retain its structure.

Typography

Claude’s typography is the center of the system. The interface should feel typeset, not merely arranged.

Font Families

The main interface uses Anthropic Sans: compact, clean, controlled, and slightly severe. It should make the product feel precise and technical without becoming cold.

Anthropic Serif should be used rarely. Its role is not to decorate ordinary headings, but to introduce editorial contrast in special moments, especially on dark inverted cards or feature panels. This keeps the serif treatment memorable instead of routine.

JetBrains Mono should be used for code, command snippets, timestamps, model IDs, API keys, version strings, and technical metadata.

Type Scale

Claude uses a restrained type scale:

This scale keeps the system compact and editorial. It avoids oversized marketing typography unless the layout specifically calls for a large display moment.

Weight

Available font weights range from 100 through 900, but Claude should not overuse the extremes. The default system should rely primarily on:

• 400 for body text
• 500 for labels, buttons, and navigation
• 600 for section headings
• 700 for major headings or strong emphasis

Very light weights can become fragile against parchment backgrounds, while very heavy weights can make the interface feel less literary and more promotional. Use them with restraint.

Spacing

Claude uses a simple 4px-based spacing scale:

Spacing in Claude should feel deliberate and measured. Unlike highly expressive design systems, Claude does not use spacing to create playful rhythm. It uses spacing to create editorial clarity.

Layouts should avoid both cramped density and airy luxury. The ideal rhythm is similar to a well-composed journal page: compact enough to feel serious, but open enough to read comfortably.

The Claude Look

Claude has a distinct visual identity beyond its tokens. The system is defined by a few strict principles.

Warm Parchment, Never Sterile White

The page should live on warm ivory, not pure white. #FAF9F6 is the preferred base. This gives the interface a printed, archival quality and prevents the coldness common in white SaaS dashboards.

Pure white may appear in constrained areas, but it should not become the dominant visual field.

Near-Black Slate as Ink

The dominant color is near-black slate, not bright black. #141413 gives text and structural elements authority without the harshness of absolute black.

Use it for:

• Primary text
• Filled primary controls
• Key borders
• Inverted surfaces
• Editorial dividers
• High-emphasis icons

Almost Achromatic Interface

Claude should feel almost monochrome. Most screens should be visually complete using only ivory, slate, and subtle neutral variation.

Color should not carry the system’s personality. Typography, spacing, underlines, contrast, and composition should.

Hard-Edged Contrast

Surfaces should be crisp. Claude does not use soft shadows, blurred elevation, glossy overlays, or floating glass panels. Containers are defined through background contrast, borders, inversion, and spacing.

Avoid:

• Soft box shadows
• Drop-shadowed cards
• Blurred backdrops as a primary style
• Glassmorphism
• Decorative gradients
• Glowing focus rings
• Excessive border radii

Flat Geometry

Most components use flat, rectangular geometry. Buttons are flat and typically have 0px corner radius.

The primary CTA has the system’s most distinctive shape: an asymmetric form with a flat top and rounded bottom. This should be used selectively so it remains a recognizable signature rather than a generic decorative flourish.

Editorial Emphasis

Claude does not shout with color. It emphasizes through:

• Weight
• Scale
• Underlines
• Inversion
• Position
• Negative space
• Strong typographic contrast

Links and inline emphasis should often use underlines rather than bright color. A heading can be emphasized through type size and spacing rather than a saturated accent.

Component Coverage

The Claude skill file is intended to guide full interface generation, not just isolated styling. Components should share the same editorial discipline across the entire product.

Buttons

Buttons are flat, crisp, and text-forward.

Primary buttons should use near-black fills with light text. Secondary buttons should use transparent or ivory fills with slate borders or text. Destructive buttons should use the danger token only when the action is truly destructive.

Button rules:

• Use 0px radius by default
• Avoid shadows
• Avoid gradients
• Use clear label text
• Preserve visible hover, active, disabled, loading, and focus-visible states
• Reserve the asymmetric CTA shape for primary, high-value actions

A Claude button should feel like a deliberate printed control, not a glossy app element.

Cards

Cards should behave like editorial blocks. They may be bordered, inverted, or separated by spacing, but they should not float with shadows.

Common card treatments:

• Ivory card on near-black page section
• Near-black feature card on ivory page
• Bordered parchment card
• Flat grouped panel with strong typographic hierarchy

Dark feature cards are an appropriate place to use Anthropic Serif at display scale, especially when the goal is to create a memorable editorial moment.

Forms

Forms should be quiet and highly legible. Inputs should have clear boundaries, readable labels, explicit helper text, and strong validation states.

Form rules:

• Labels must be visible, not placeholder-only
• Inputs should use tokenized spacing and typography
• Error text must be programmatically associated with the field
• Focus-visible states must be obvious
• Disabled fields must remain readable while clearly inactive
• Long labels and helper text must wrap cleanly

The form experience should feel precise and calm, not visually busy.

Navigation

Navigation should be compact, typographic, and restrained. Avoid large colorful nav treatments unless the page is intentionally using a dark inverted layout.

Navigation patterns should use:

• Clear active states
• Underlines or weight changes for emphasis
• Minimal icon color
• Strong keyboard support
• Predictable spacing

Claude navigation should feel like the table of contents of a serious publication: structured, readable, and unobtrusive.

Tables and Data

Claude is especially well suited to dense, research-oriented interfaces. Tables, metrics, logs, and dashboards should feel organized and editorial rather than decorative.

Data display rules:

• Use tabular alignment where appropriate
• Prefer JetBrains Mono for technical values
• Keep grid lines subtle but visible
• Use semantic colors only for actual status meaning
• Do not turn every metric into a colorful card
• Preserve strong contrast for small text

Charts should use restrained color. Avoid rainbow palettes unless the data genuinely requires many categories.

Overlays and Feedback

Modals, drawers, popovers, alerts, and toasts should follow the same flat-surface logic as the rest of the system.

Overlay rules:

• No soft floating shadows as the primary elevation method
• Use borders, backdrop contrast, and surface contrast instead
• Keep motion minimal and functional
• Make dismiss behavior explicit
• Preserve keyboard trap and escape behavior for modals
• Ensure focus returns to the triggering element after close

Feedback components should be clear but not theatrical. A warning banner can use the warning token, but it should still feel like part of the editorial system.

Accessibility

Claude enforces WCAG 2.2 AA as a baseline. Its restrained palette and high-contrast structure can be very accessible, but only if the system avoids overly subtle states.

Core Accessibility Requirements

• Text must meet WCAG AA contrast against its background
• Interactive elements must have visible focus-visible states
• Keyboard users must be able to reach and operate every interactive component
• Form errors must be communicated visually and programmatically
• Disabled states must not be confused with active controls
• Color must never be the only indicator of state
• Touch targets should remain large enough for comfortable interaction
• Motion should be minimal and respect reduced-motion preferences

Focus States

Focus states should be visible and consistent. Claude should not use faint glows or thin low-contrast outlines.

Preferred focus treatments include:

• A high-contrast outline
• A clear underline shift
• A border-weight change
• An inverted state when appropriate

Focus should feel like a precise editorial mark, not a neon effect.

Color and Meaning

Because Claude uses color sparingly, semantic colors are easier to notice when they appear. However, every semantic state must also include text, iconography, border treatment, or structural change.

For example:

• Error fields should include red text, an error message, and an associated field state
• Warning banners should include a label or icon, not only amber color
• Success states should include confirmation language, not only green styling

When aesthetics and accessibility conflict, accessibility wins.

Content and Tone

Claude’s writing tone is concise, confident, and helpful. It should sound calm and exact, not enthusiastic or sales-heavy.

Voice Principles

Claude copy should be:

• Direct
• Specific
• Useful
• Calm
• Unambiguous
• Respectful of the user’s time

Avoid copy that is overly playful, vague, inflated, or emotionally exaggerated.

Good Examples

Avoid

Claude copy should reduce uncertainty. Labels should describe the action or object clearly.

How to Use with AI Tools

Cursor and Claude Code

Add the Claude skill file to your project so the assistant can use it as design-system context while generating UI code.

npx typeui.sh claude

The skill file should be saved as SKILL.md or another project-level instruction file. Once present, ask the assistant to generate components, pages, flows, or refactors using the Claude design system.

Example prompts:

Create a settings page using the Claude design system.

Refactor this dashboard to follow the Claude editorial parchment aesthetic.

Build a modal component with Claude-style tokens, states, accessibility behavior, and QA notes.

Claude

Use the design skill directly in Claude by adding the markdown file as project knowledge or pasting it into the start of a conversation.

Then ask for implementation-specific output:

Generate a React button component that follows this design system.

Create design-system rules for cards, forms, and navigation using this skill.

Audit this UI against the Claude design rules and list required changes.

ChatGPT, Windsurf, Copilot, v0, and Other AI Tools

The file is standard markdown, so it can be used with any AI assistant that accepts project context or prompt instructions.

Useful workflows include:

• Paste the skill into the chat before asking for UI code
• Add it to a repository-level instruction file
• Use it as context for component generation
• Use it as a QA checklist during code review
• Ask the assistant to migrate existing UI into the Claude aesthetic

The more explicit the implementation request, the better the output. Ask for tokens, component states, accessibility criteria, and responsive behavior rather than only asking for a “Claude-style UI.”

Design Philosophy

Claude is governed by a few core ideas.

1. Authority Through Restraint

Claude does not rely on bright colors, animations, or decorative effects to create impact. It earns attention through clarity, contrast, and composition. The interface should feel confident enough not to shout.

2. Typography Is the Primary Interface Material

Text is not just content in Claude. It is structure. Scale, weight, underlines, spacing, and alignment create hierarchy. Color is secondary.

3. Warmth Without Softness

The ivory background gives the system warmth, but the geometry remains crisp. This balance prevents the interface from becoming either sterile or overly cozy.

4. Flat Does Not Mean Plain

Claude avoids shadows and gradients, but it should not feel unfinished. Borders, inversion, spacing, and editorial layout choices provide enough structure to make the interface feel complete.

5. Accessibility Over Aesthetic Purity

If a subtle typographic treatment, low-contrast surface, or reserved color choice harms usability, the implementation must change. Claude’s restraint should support clarity, not undermine it.

Anti-Patterns

Avoid these implementations when generating Claude-style interfaces:

• Pure white full-page backgrounds
• Bright multi-color accent systems
• Gradients, glows, or glassmorphism
• Soft drop shadows on cards
• Excessive border radius
• Placeholder-only form labels
• Low-contrast gray text on ivory
• Color-only error or success states
• Decorative icons in many colors
• Oversized marketing-style hero typography everywhere
• Ambiguous button labels like Submit, Continue, or Click here
• One-off spacing values outside the defined scale
• Components that lack hover, active, disabled, loading, and focus-visible states

A Claude interface should look quiet, but it should never be vague.

QA Checklist

Use this checklist when reviewing generated UI against the Claude design skill.

Visual System

• Page background uses warm ivory rather than pure white
• Near-black slate is the dominant ink color
• Accent color is used sparingly
• No unnecessary gradients, glows, or soft shadows are present
• Borders and surfaces feel crisp and intentional
• Button corners follow the flat geometry rules
• Primary CTA shape is used selectively, not everywhere

Typography

• Type sizes come from the defined scale
• Body copy is readable at default sizes
• Headings use weight and spacing for hierarchy
• Serif display usage is rare and intentional
• Monospace text is reserved for technical content
• Labels and helper text remain legible

Components

• Each interactive component includes default, hover, focus-visible, active, disabled, loading, and error states where relevant
• Forms use visible labels
• Cards do not rely on shadows for structure
• Navigation has clear active states
• Tables preserve alignment and readability
• Empty, loading, and error states are explicitly designed

Accessibility

• Text contrast meets WCAG 2.2 AA
• Keyboard navigation works across all controls
• Focus-visible states are obvious
• Error messages are linked to their fields
• Semantic HTML is used wherever possible
• ARIA is added only where needed
• Color is never the only state indicator
• Motion respects reduced-motion preferences

Content

• Labels are specific and action-oriented
• Error messages explain how to fix the issue
• Empty states explain what happened and what to do next
• Destructive actions clearly state consequences
• Tone remains concise, confident, and helpful

Claude is a disciplined design system for interfaces that should feel serious, readable, and trustworthy. Its strength is not decoration. Its strength is editorial control.