Anthropic 首页以温润克制的编辑式视觉呈现研究成果与 AI 产品，搭配醒目的标题和清晰的内容入口。大幅产品展示卡片与新品列表承接使命内容，最后以高对比度页脚收纳丰富的导航链接。
North star · Use warm paper-like surfaces, purposeful serif-and-sans contrast, and generous whitespace to make complex AI work feel clear and considered.
The page is defined by a quiet warm-neutral palette: a pale beige canvas carries most sections, with near-black text and a soft off-white product feature panel creating contrast without introducing bright accent colours. The compact black navigation CTA is the strongest control accent; fine gray dividers organize release metadata and link lists. Typography is editorial but disciplined: large, heavy sans-serif hero lettering sits alongside readable serif body copy and oversized serif product-feature type. The layout places the hero headline and explanatory paragraph in separate columns, then gives the featured model a broad, rounded panel. Three release cards and a two-column mission-and-links block provide a denser middle rhythm. Imagery is sparse in the measured view; the product showcase relies mainly on typography and a restrained arc graphic rather than a photographic campaign. The dark footer creates a distinct closing band, with small, tightly organized link groups.
Bold hero and page headings, navigation controls, links, captions, and compact interface text.
Aa 设计
Anthropic Serif
网络字体 · 字重 400 / 465 · 占比 20%
免费替代：Source Serif 4
Display title in the featured model panel, hero supporting paragraph, and editorial body copy.
Aa 设计
Anthropic Mono
网络字体 · 字重 400 · 占比 2%
免费替代：IBM Plex Mono
Uppercase code-style labels and compact metadata when a technical marker is needed.
角色
示例
字号
字重
行高
字距
特大标题
Oversized serif model-feature title and editorial display moments.
Anthropic
79.5px
465
1.16
-0.015em
一级标题
Bold sans-serif primary hero headline.
Anthropic
61px
700
1.1
0
二级标题
Section headings such as Latest releases.
The quick brown fox 敏捷的狐狸
24px
600
1.3
0
三级标题
Serif subheadings and editorial feature titles.
The quick brown fox 敏捷的狐狸
22.5px
400
1.4
0
正文
Serif explanatory paragraphs and supporting editorial copy.
The quick brown fox 敏捷的狐狸
18px
400
1.4
0
辅助文字
Small sans-serif captions and footer utility text.
The quick brown fox 敏捷的狐狸
12px
400
1.4
-0.02em
导航
Primary navigation and menu-level labels.
Anthropic
61px
700
1.1
0
链接
Inline links, release details, and announcement actions.
The quick brown fox 敏捷的狐狸
16px
400
1.4
0
代码
Uppercase mono labels for technical or metadata markers.
const style = 1;
16px
400
1.4
0
间距与布局
基准单位 4px · 密度：适中
61px版块间距
8px元素间距
—卡片内边距
1285px内容最大宽度
4px
8px
12px
16px
22px
31px
46px
The measured content max width is 1285px, with comfortable density and a 4px-based spacing system. The hero aligns a large left headline with a right supporting paragraph; the feature below spans broadly, then release content moves into three columns. A two-column mission and link-list section precedes a full-width dark footer with four link columns. Maintain generous section pauses and use fine rules to structure dense lists.
圆角与层次
导航 · 8px
链接 · 8px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The page reads as mostly flat: no measured shadows or gradients define its hierarchy. Separate sections with changes in surface tone and use fine hairlines for card metadata and long link lists. Rounded corners appear on the feature panel and compact controls, but avoid stacking cards or adding pronounced depth.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Top navigation
Compact horizontal header on the warm canvas, with Anthropic wordmark, serif-influenced navigation, and a near-black Try Claude dropdown control.
Hero introduction
Left-aligned bold sans-serif headline paired with a serif explanatory paragraph in a two-column composition.
Model feature panel
Broad off-white rounded panel centered around an oversized serif model title, curved line motif, short description, and dark read-more action.
Release cards
Three-column announcement cards with a brief title and summary, fine-rule metadata rows, and compact dark announcement links.
Mission and content links
Mission statement sits beside a vertically arranged list of editorial topics, separated by subtle horizontal rules.
Footer directory
Full-width near-black band with a light logo, four dense link columns, muted utility text, and social links.
Imagery · The first viewport and scaled full-page screenshot show little reliance on photography. The featured model panel is primarily typographic, with an understated curved line framing its display title; release cards are text-led. Measured image and SVG counts are limited, so keep any supporting illustration quiet and secondary rather than turning the page into a visual gallery.
Pair bold sans-serif headings with literary serif copy.
Give the hero headline and supporting paragraph distinct columns.
Organize dense release metadata with fine horizontal rules.
Reserve the darkest full-width surface for the footer.
✕ 不该做
Do not introduce bright accent colours absent from the measured palette.
Do not add prominent shadows or decorative gradients.
Do not turn the editorial layout into a dense dashboard.
Do not make supporting illustrations compete with the headline.
Do not use sans-serif for every text role.
Do not apply heavy borders to every card and section.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new Anthropic-style page with a calm editorial hierarchy and comfortable whitespace. Use Warm Canvas (#f0eee6) for the main page, Soft Ink (#141413) for headings and controls, and Gallery White (#faf9f5) for a featured surface. Pair bold Anthropic Sans-like headings with Anthropic Serif-like paragraphs and display titles; keep mono styling limited to compact metadata. Establish a clear hero with a large headline beside supporting copy, followed by a broad feature panel and structured content cards. Use fine gray rules instead of heavy boxes or shadows. Keep calls to action compact and high contrast. Close with a full-width Soft Ink footer, light text, and neatly grouped navigation links. Avoid bright accents, gradients, and decorative clutter.
