Claude (Anthropic) Design System Skill

When the user invokes this skill, apply the following design system to all UI generation. Use these exact design tokens, color values, typography specs, component styles, and layout principles to produce interfaces that match Claude (Anthropic)'s visual identity.

Reference Previews

For a visual reference of how this design system looks when implemented, see the bundled HTML previews:

• Light theme: preview.html
• Dark theme: preview-dark.html

Read these files when you need to verify exact visual implementation details, CSS values, or component structure.

1. Visual Theme & Atmosphere

Claude's interface is a literary salon reimagined as a product page — warm, unhurried, and quietly intellectual. The entire experience is built on a parchment-toned canvas (#f5f4ed) that deliberately evokes the feeling of high-quality paper rather than a digital surface. Where most AI product pages lean into cold, futuristic aesthetics, Claude's design radiates human warmth, as if the AI itself has good taste in interior design.

The signature move is the custom Anthropic Serif typeface — a medium-weight serif with generous proportions that gives every headline the gravitas of a book title. Combined with organic, hand-drawn-feeling illustrations in terracotta (#c96442), black, and muted green, the visual language says "thoughtful companion" rather than "powerful tool." The serif headlines breathe at tight-but-comfortable line-heights (1.10–1.30), creating a cadence that feels more like reading an essay than scanning a product page.