North star · Keep the page airy and editorial, using violet for focused product emphasis rather than broad decoration.
The page uses white as its main canvas, alternating with very pale blue-gray bands to distinguish major content areas without heavy decoration. Near-black headings provide strong contrast, while muted blue-gray copy keeps supporting text quieter. Violet is the signature visual accent, most visible in the hero’s route-like platform illustration, product diagrams, and small action elements; it should not be mistaken for a full-page background color. ABC Normal gives display and primary headings a compact, assertive editorial character, supported by Inter for navigation, body copy, and interface details. The layout moves through broad hero storytelling, a three-column use-case grid, customer proof, platform architecture, and article cards before a high-contrast dark demo CTA. Cards remain mostly flat, with fine borders and restrained shadows. Consistent alignment, generous section separation, and concise text make a dense enterprise product story feel organized.
Navigation, body copy, cards, links, and interface text.
Aa 设计
ABC Normal
网络字体 · 字重 500 / 600 · 占比 12%
免费替代：Inter
Display and primary page headings.
角色
示例
字号
字重
行高
字距
特大标题
Large hero and campaign-style display headlines.
Copy.ai
56px
500
1.18
0
一级标题
Primary hero title and strongest page heading.
Copy.ai
48px
600
1
0.005em
二级标题
Section headings and customer-story statements.
The quick brown fox 敏捷的狐狸
26px
400
1.31
0.01em
三级标题
Feature-card and subsection headings.
The quick brown fox 敏捷的狐狸
24px
600
1.33
-0.02em
四级标题
Supporting headings within product or content blocks.
The quick brown fox 敏捷的狐狸
22px
400
1.45
-0.005em
正文
Paragraph copy describing platform capabilities and use cases.
The quick brown fox 敏捷的狐狸
16px
500
1.5
0
辅助文字
Compact labels and secondary supporting details.
The quick brown fox 敏捷的狐狸
12px
400
1.33
0
导航
Top navigation labels and menu items.
The quick brown fox 敏捷的狐狸
16px
500
1.5
0
链接
Small text links such as Learn more.
The quick brown fox 敏捷的狐狸
12px
400
1.33
0
间距与布局
基准单位 4px · 密度：适中
60px版块间距
16px元素间距
30px卡片内边距
1160px内容最大宽度
1px
6px
8px
10px
12px
16px
18px
20px
24px
26px
30px
32px
36px
40px
48px
60px
The page uses a wide, centered content frame measured at a 1160px maximum, with broad section bands and internal multi-column grids. The hero spreads its title, supporting copy, and product visual across a large canvas; later areas use three- and four-column arrangements for use cases, testimonials, and articles. Headings align left in most sections. Measured spacing favors comfortable separation, with a 60px section gap and 16px element gap. The long page alternates white and pale blue-gray surfaces before the dark footer.
圆角与层次
按钮 · 4px
卡片 · 4px
inset · button
hairline · card, other
md · card
lg · card
The interface is mostly flat, relying on pale section bands and thin borders to define structure. Cards have restrained treatment, with measured 4px corners and occasional subtle shadows. Dark testimonial panels and violet product graphics create depth through contrast and layering rather than heavy elevation.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Top navigation
White header with Copy.ai wordmark, compact Inter navigation, login link, and violet Get a Demo button.
Hero platform overview
Pale blue-gray field with oversized black heading, muted explanatory copy, and wide purple workflow illustration.
Use-case cards
Three-column grid of white cards with small violet category labels, concise headings, and understated links.
Customer proof
Portrait-led testimonials combine photography with dark quote panels and contrasting white text.
Platform architecture
Centered violet system diagram presents platform capabilities in a dense but clearly divided interface.
Editorial cards
Article cards use purple thumbnail artwork, dark titles, and brief muted summaries.
Demo CTA
Wide near-black panel with large white heading, supporting copy, and a high-contrast light demo button.
Footer
Multi-column link directory on white followed by a near-black legal and social strip.
Imagery · The hero’s dominant image is a vivid purple, route-like platform diagram, with white nodes and embedded workflow labels. Product architecture graphics and article thumbnails repeat violet as a recognizable motif. Customer testimonial sections use portrait photography framed beside dark quote panels. Imagery is generally contained within the content grid rather than full-bleed; avoid adding decorative lifestyle photography or gradients that are not in the measured palette.
Use white and Mist Wash as the dominant section surfaces.
Set primary headings in a bold, near-black display style.
Reserve Electric Violet for CTAs and product-led emphasis.
Use Slate Copy for quieter explanatory text and links.
Organize capabilities into aligned, modular card grids.
Keep borders and shadows subtle and purposeful.
✕ 不该做
Do not make violet the page-wide background.
Do not add unmeasured colors to the interface palette.
Do not crowd the page with dense, uninterrupted text.
Do not use heavy shadows to separate ordinary cards.
Do not turn every card into a bordered panel.
Do not use decorative imagery that competes with product diagrams.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new enterprise AI product page in Copy.ai’s visual style. Use Gallery White (#ffffff) as the main canvas and Mist Wash (#f6fafb) for alternating section bands. Set headings in an assertive ABC Normal-like sans, with Inter for navigation, body, and interface text; use Carbon Ink (#171717) for primary contrast and Slate Copy (#566b76) for supporting copy. Apply Electric Violet (#693edf) selectively to primary actions and product diagrams, with Lilac Signal (#c1b9f4) and Deep Iris (#3b0d96) confined to accents and visual artwork. Structure the page as a spacious hero, modular capability cards, customer proof, product architecture, editorial content, and a dark CTA. Keep alignment disciplined, section spacing generous, borders fine, and shadows restrained.
