CURATED · OPEN · FREE

Anthropic

An AI safety lab website balancing scholarly authority with modern simplicity.

aiminimal

↓ Download design system (7 MB)Open in OpenDesign

Visit: https://www.anthropic.com

📦 Browse pack contents →

Identity DNA

researchsafetypublic benefitfrontiercorporation

A modern academic institution meets a clean tech company

Color

#141413Ink

#FAF9F5BG

#F0EEE6BG soft

#E3DAC8BG quiet

#B0AEA5Muted

rgba(20, 20, 19, 0.1)Line

Warm, low-contrast neutrals create a calm, readable canvas that feels human and sophisticated.

Typography

grotesque-sans · transitional-serif · monospace

display61px · 700
heading24px · 600
body20px · 400
label12px · 400

Use grotesque-sans for display and UI elements. · Use transitional-serif for long-form body text. · Headlines should be tight and bold. · Use uppercase for metadata labels.

Spacing

4px

8px

12px

16px

22px

31px

46px

64px

Generous vertical spacing between sections, with tight leading on headlines.

Surfaces

sm · 8px

md · 16px

lg · 24px

pill · 999px

1px solid rgba(20, 20, 19, 0.1)

rgba(0, 0, 0, 0.01) 0px 2px 2px 0px · rgba(0, 0, 0, 0.02) 0px 4px 4px 0px · rgba(0, 0, 0, 0.04) 0px 16px 24px 0px

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Asymmetric two-column hero followed by a grid of cards and a list-based content section.

Motion & Interaction

100msmicro

200mssmall

400msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Color transitions on hover · Opacity changes on interactive states

Subtle color transitions on links and buttons · Immediate feedback

Components

button Dark solid button with white text and arrow icon, or outlined button with dark text.
card Warm beige background card with thin internal dividers and bottom-aligned action button.
chip N/A
input N/A
hero Large bold grotesque headline with serif body text positioned to the right.

Voice & Don'ts

Tone Authoritative yet accessible, focused on safety and human benefit.
Headlines Bold, clear, and slightly academic.
CTAs Direct and action-oriented, often with an arrow.

Don't use high-saturation accent colors — screenshot shows a neutral, warm-toned palette.
Don't use playful or rounded fonts — screenshot shows sharp, grotesque and transitional serif fonts.
Don't use heavy drop shadows — screenshot shows very subtle, low-opacity shadows.
Don't use dense, cramped layouts — screenshot shows generous vertical and horizontal spacing.
Don't use all-caps for body text — screenshot shows all-caps only for small metadata labels.
Don't use bright white backgrounds — screenshot shows a warm, off-white cream background.
Avoid: Jargon-heavy or overly technical language.
Avoid: Aggressive or hype-driven marketing copy.
Avoid: Vague promises without a focus on safety.

Inside the pack — real screenshots

Anthropic — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

This is the website for Anthropic, an AI safety research lab. The design DNA is characterized by a calm, academic, and highly refined aesthetic. The primary background is a warm off-white (#FAF9F5) with dark charcoal text (#141413) and muted gray accents (#B0AEA5). The typography pairs a bold grotesque-sans for headlines with a readable transitional-serif for body copy, creating a scholarly yet modern feel. The layout is clean and spacious, utilizing a multi-column grid and asymmetric arrangements for the hero section. Key critical don'ts: do not use high-chroma or neon accent colors, as the palette is strictly neutral and warm; do not use rounded or playful typefaces, as the design relies on sharp, professional font categories; and do not crowd the layout with dense content, as the site prioritizes generous white space and a calm reading experience.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko