Claude 登录页以编辑式排版、克制的账号表单和纪实感办公影像，营造平静清晰的品牌体验。页面下方延续这一风格，展示套餐卡片、常见问题和信息丰富的页脚。
North star · Use warm near-white space, editorial serif headlines, precise sans-serif interface text, and restrained borders to make the experience feel calm and trustworthy.
The page is built on a warm near-white canvas (#fcfcfb), with near-black text and quiet gray supporting copy. The only measured text accent is a restrained blue used for links; the muted blue-gray card outline appears on a pricing option rather than defining the overall brand. Anthropic Sans carries navigation, forms, plan details, and footer content, while Anthropic Serif gives the hero and section headings a more editorial voice. A wide desktop composition balances a left-aligned sign-in area with a large rounded workplace photograph on the right. The form sits in a softly outlined, subtly elevated card, while the pricing section uses three white cards and fine borders to distinguish plans. Generous open space separates major sections, contrasting with the compact, information-dense footer. Keep decorative colour and effects secondary to typography, content, and photography.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
强调色
表层色
中性色
功能色
页面底色 · Warm Canvas主文字 · Soft Ink次要文字 · Quiet Graphite弱文字 · Warm Ash描边 · Pale Rule强调 · Link Blue
Navigation, forms, buttons, body copy, pricing details, and footer.
Aa 设计
anthropic-serif
网络字体 · 字重 400 / 330 · 占比 4%
免费替代：Source Serif 4
Hero headline and prominent section headings.
角色
示例
字号
字重
行高
字距
特大标题
Large editorial statement when a page needs a prominent opening headline.
Claude
56px
330
1.15
0
一级标题
Hero headline introducing the sign-in experience.
Claude
30px
400
1.2
0
二级标题
Pricing and FAQ section headings.
The quick brown fox 敏捷的狐狸
24px
580
1.33
0
三级标题
Small icon-led or card-level headings where present.
The quick brown fox 敏捷的狐狸
20px
433
1
0
正文
Supporting descriptions, plan details, and explanatory copy.
The quick brown fox 敏捷的狐狸
16px
400
1.63
0
辅助文字
Fine print, legal notes, and compact secondary labels.
The quick brown fox 敏捷的狐狸
12px
400
1.25
0
按钮
Sign-in, plan, and other action labels.
The quick brown fox 敏捷的狐狸
15px
400
1.33
0
导航
Header navigation links and menu labels.
The quick brown fox 敏捷的狐狸
14px
400
1.43
0
链接
Inline policy and usage-limit links.
The quick brown fox 敏捷的狐狸
14px
400
1.43
0
间距与布局
基准单位 4px · 密度：紧凑
32px版块间距
6px元素间距
32px卡片内边距
1312px内容最大宽度
1px
4px
6px
8px
9px
12px
16px
20px
24px
32px
The desktop hero uses a broad two-column composition: sign-in content on the left and a large rounded photograph on the right. The header spans the page with the Claude mark at one edge and compact navigation and actions at the other. Lower sections stack vertically: centered pricing heading and selector, three plan cards, a narrow FAQ list, then a multi-column footer. The measured layout uses a 1312px maximum width, 32px section gaps and card padding, and a compact overall density, balanced by conspicuous open space around the hero and between major blocks.
圆角与层次
按钮 · 10px
输入框 · 10px
卡片 · 24px
导航 · 8px
链接 · 2px
inset · other, nav
xl · card
inset · input
md · card
The interface is mostly flat, with pale hairline borders defining inputs and cards. The form and pricing surfaces gain only faint, broad shadows rather than pronounced lift. Use rounded card and control edges, reserving the slightly blue-gray outline for the emphasized plan; avoid heavy drop shadows or layered glass effects.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Header navigation
Claude mark sits left; compact Anthropic Sans navigation, a quiet Contact sales control, and a dark Try Claude action align on the right.
Hero sign-in form
A softly elevated, rounded panel groups Google and Apple sign-in, an OR divider, email input, black Continue with email button, and muted legal copy.
Hero media
Large workplace photograph beside the form, cropped into a rounded rectangle with no decorative frame.
Plan selector
Centered section title above a compact two-option Individual and Team and Enterprise selector.
Pricing cards
Three white cards present Free, Pro, and Max plans with icon, price, dark action, and check-list details; Max uses the measured #cfdae7 outline.
FAQ list
Centered heading followed by a narrow list of question rows with understated disclosure indicators.
Footer
A dense multi-column directory of product, solution, resource, and policy links, with brand mark and company details.
Imagery · The hero features a large, rounded documentary-style photograph of a person working at a desk amid notes and papers. Its subdued, cool workplace tones sit quietly against the warm canvas rather than introducing a strong graphic palette. Keep the image substantial and rectangular, with rounded corners and natural photographic detail; do not replace it with a bright illustration or decorative gradient.
Keep form labels and navigation in clean sans-serif.
Make the hero photograph prominent but subdued.
Separate plan cards with thin, quiet outlines.
Reserve blue for inline links and select plan details.
✕ 不该做
Do not introduce saturated colour bands or gradients.
Do not use heavy shadows to separate ordinary surfaces.
Do not crowd the hero with extra decorative elements.
Do not make supporting copy compete with the headline.
Do not turn the pricing cards into brightly coloured tiles.
Do not treat colours inside the photo as interface tokens.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new page in Claude’s restrained editorial interface style. Use Warm Canvas (#fcfcfb) as the dominant background, Soft Ink (#0b0b0b) for primary text and dark actions, Quiet Graphite (#52514e) and Warm Ash (#898781) for supporting copy, and Link Blue (#184f95) only for inline links. Use Anthropic Sans for interface and body text, with an editorial serif such as Source Serif 4 for prominent headings. Favor a wide, balanced desktop composition, clear alignment, generous separation between sections, and compact navigation. Use white cards with fine Pale Rule (#e3e3e2) borders and subtle shadows; reserve Cloud Outline (#cfdae7) for a highlighted surface. Keep photography documentary and naturally toned, controls rounded, and visual decoration minimal. Make hierarchy and readable content do the work.
