CleanShot X 以宽阔留白、鲜明蓝色按钮和精致的产品画面，展示这款 Mac 截图与录屏工具。页面从居中的首屏展开丰富功能演示，最后以用户评价和深色转化页脚收尾。
North star · Keep the page chrome quiet and spacious so vivid, rounded product demonstrations and blue actions provide the focus.
The page uses white as its dominant canvas, with near-black typography and saturated blue reserved for primary actions and occasional emphasis in headings. A faint cool-blue atmospheric wash appears behind the hero, while richer blue and violet gradients mostly live inside product artwork rather than defining the page chrome. Google Sans Flex gives the page a unified, modern voice: large centered headlines are compact and bold, while explanatory copy remains open and readable. The hero pairs a centered promise and CTA row with a large media-and-testimonial composition below. Subsequent features alternate text-and-image splits with tightly assembled cards, letting colorful screenshots carry visual variety without cluttering the surrounding layout. Generous white intervals separate these sections. Rounded media and testimonial cards, subtle hairline-like edges, and restrained layered shadows create a polished, tactile feel. Near-black sections are reserved for the bottom conversion and footer, making the close feel distinct from the bright product tour.
Unified display, heading, body, caption, link, and interface typography.
角色
示例
字号
字重
行高
字距
特大标题
Oversized centered hero headline and major statement headings.
CleanShot X
60px
600
1.1
-0.033em
一级标题
Primary section headings and prominent feature titles.
CleanShot X
40px
600
1.2
-0.05em
正文
Feature descriptions, testimonials, and explanatory copy.
The quick brown fox 敏捷的狐狸
18px
450
1.67
0.056em
辅助文字
Compact labels, metadata, and supporting interface details.
The quick brown fox 敏捷的狐狸
15px
450
1.6
0.067em
链接
Navigation, secondary actions, and inline feature links.
The quick brown fox 敏捷的狐狸
14px
450
1.43
0.071em
间距与布局
基准单位 4px · 密度：适中
48px版块间距
12px元素间距
32px卡片内边距
1192px内容最大宽度
6px
8px
12px
16px
20px
24px
30px
32px
35px
36px
40px
64px
80px
Center content within the measured 1192px maximum page width, using broad margins and comfortable section spacing. The hero is centered, with a headline, supporting copy, CTA pair, and media/testimonial row. Below it, alternate two-column feature splits with full-width product demonstrations and multi-card grids. Keep card groupings visually compact but let large white gaps separate major stories. The testimonials section aligns its heading to the left, then presents a horizontally arranged review-card row. Reserve a full-width dark band for the final CTA and footer.
圆角与层次
按钮 · 14px
输入框 · 16px
卡片 · 20px
图片 · 50%
徽标 · 9999px
链接 · 20px
xl · card
inset · button
sm · button, badge, other
md · other
Most of the page stays visually flat against white. Rounded cards and media receive soft, layered shadows rather than heavy outlines; restrained edges distinguish surfaces without adding strong dividers. Blue CTA buttons use a more noticeable inset highlight and shadow. Dark footer content forms a solid contrasting band, not a floating card.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Primary CTA
Use #0d44e8 fill and white text, with a 14px radius and a compact soft blue-highlighted shadow. Labels include “Get CleanShot for Mac” and “Buy now.”
Hero headline
Center a bold, tightly tracked statement over short supporting copy; selectively use blue emphasis while keeping most lettering near-black.
Feature card grid
Combine screenshot-led cards of varied proportions, rounded media, brief titles, and concise descriptions; let each interface image supply its own palette.
Feature split
Pair a short heading and supporting text with a large rounded product preview, alternating the text and media sides across feature stories.
Testimonial card
Show compact reviewer identity and readable quote in a rounded white card with subtle layered shadowing and no prominent border.
Dark closing section
Use a #0f0f12 full-width footer area, with a centered conversion message above newsletter controls and grouped footer links.
Imagery · Product screenshots and video are the primary imagery, framed as rounded panels and cards with softly blended blue or violet backgrounds. Feature grids combine interface captures with small explanatory labels. The hero includes a dark media preview beside a testimonial card; avoid unrelated stock photography. Gradients and colorful detail belong mainly to the product mockups, keeping page chrome calm.
Reserve saturated blue for primary actions and selected emphasis.
Keep headings bold, centered in the hero, and tightly tracked.
Alternate feature splits with screenshot-rich card grids.
Give product media rounded framing and restrained shadows.
Preserve generous white space between major feature stories.
✕ 不该做
Do not turn colorful mockup palettes into global page chrome.
Do not fill every section with cards or decorative borders.
Do not use heavy shadows on ordinary text and light surfaces.
Do not make every headline or link blue.
Do not crowd the hero CTAs or supporting copy.
Do not carry the bright white treatment into the dark closing band.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new CleanShot X-style SaaS page with a quiet, spacious white canvas (#ffffff), True Ink (#000000) headings, and Quiet Graphite (#6a6a6b) supporting copy. Use Action Blue (#0d44e8) for the main CTA and reserve Gradient Blue (#174ef2) for restrained emphasis. Set the page in Google Sans Flex or a close sans-serif substitute, with bold tightly tracked headlines and readable body copy. Center the hero, then alternate feature splits with rounded, screenshot-led card grids. Use product UI imagery as the source of visual color; do not spread mockup gradients across the interface. Keep shadows soft and surfaces mostly flat, with generous section intervals. Finish with a solid Footer Black (#0f0f12) conversion and footer band.
