North star · Keep the interface nearly black and spacious, letting crisp white copy, a single orange action, and authentic photography carry the page.
Build around a nearly uninterrupted black canvas (#000000), using white (#ffffff) for the main headline and quiet gray (#808080) for supporting copy and subdued navigation. The orange (#e2572c) is a focused signal: highlight a short phrase in the headline, a demo link, and the primary call to action rather than spreading it across the page. Set copy in the measured Suisse-style sans serif with regular weights and clean, unembellished forms. The opening screen uses a broad two-part composition: headline, description, and CTA occupy the left, while a large, edge-clean photograph anchors the right. Keep generous negative space between navigation and hero content, and preserve clear separation between text and image. The overall treatment is flat and restrained: no decorative gradients or visible shadows. Image colors may be vivid, but they belong to the photograph, not the core interface palette.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
强调色
表层色
中性色
页面底色 · Deep Canvas主文字 · Clean White次要文字 · Quiet Gray弱文字 · Deep Canvas描边 · Deep Canvas强调 · Signal Orange
文字
背景
对比度
WCAG
#ffffff Clean White
#000000 Deep Canvas
21:1
AAA
#808080 Quiet Gray
#000000 Deep Canvas
5.32:1
AA
#e2572c Signal Orange
#000000 Deep Canvas
5.63:1
AA
字体
字号阶梯：Custom（比例约 2.286，正文 14px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
__suisseFont_3f347b
网络字体 · 字重 400 · 占比 100%
免费替代：Inter
Headings, body copy, navigation, buttons, and links
角色
示例
字号
字重
行高
字距
一级标题
Hero headline, with the opening brand phrase highlighted in orange.
Pipe
32px
400
1.25
0.006em
正文
Supporting hero description and explanatory page copy.
The quick brown fox 敏捷的狐狸
14px
400
1.42
0
辅助文字
Small secondary labels and compact supporting details.
The quick brown fox 敏捷的狐狸
12px
400
1.5
0
按钮
Primary demo CTA and compact navigation buttons.
The quick brown fox 敏捷的狐狸
12px
400
1.5
0
链接
Navigation items and inline demo or resource links.
The quick brown fox 敏捷的狐狸
13px
400
1.4
0
间距与布局
基准单位 8px · 密度：宽松
48px版块间距
48px元素间距
—卡片内边距
1344px内容最大宽度
12px
24px
35px
48px
72px
96px
Use a spacious, wide page frame with a measured maximum width of 1344px and left-aligned content. The opening hero is a split composition: text and CTA on the left, large full-bleed-style photography on the right. Keep the navigation on a single horizontal line above the hero, with generous open space separating it from the main content. The measured layout is spacious, with a 48px section gap and 8px base spacing unit; avoid dense stacks and decorative cards.
圆角与层次
按钮 · 8px
链接 · 9999px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
Keep surfaces flat against the black canvas; measured data reports no shadows or gradients. The screenshot shows no card framing or visible hairlines. Create hierarchy through spacing, contrast, and the difference between text and photography, rather than layered panels or ornamental effects.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Top navigation
A compact horizontal row on the black canvas; white logo and links are balanced by muted secondary navigation and a restrained orange Demo link.
Hero headline
A regular-weight white headline aligned to the left, with the short opening phrase colored #e2572c.
Supporting copy
Short, subdued gray text beneath the headline, set in the same regular sans serif.
Primary demo CTA
Orange #e2572c button with black text, an 8px radius, and horizontal padding measured at 12px.
Hero photograph
Large, clean-edged documentary photograph occupying the right side of the split hero.
Imagery · Use large, natural documentary-style photography featuring people in real working environments. In the hero, frame the subject and surroundings as an immersive rectangular image beside the text, without a decorative border or overlay. The photograph can contribute strong blues and warm tones, but keep those colors confined to the image rather than extending them into interface chrome.
Reserve #e2572c for focused emphasis and the main CTA.
Keep supporting copy and secondary navigation subdued.
Pair concise left-aligned copy with a large authentic photograph.
Preserve generous negative space.
✕ 不该做
Do not introduce gradients or decorative shadows.
Do not scatter orange across large areas.
Do not add card borders absent from the reference.
Do not crowd the hero with extra copy.
Do not treat photograph colors as brand palette colors.
Do not use heavy or all-caps typography.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Create a new Pipe-style fintech page with a spacious, nearly black #000000 canvas and flat surfaces. Use a clean regular-weight sans serif, such as Inter, with crisp #ffffff headlines and subdued #808080 supporting text. Treat #e2572c as a scarce signal for the primary action and a small amount of key text; use black text on the orange CTA. Build a clear horizontal navigation and a broad, left-aligned split hero: concise copy and action on one side, large documentary-style human photography on the other. Use generous negative space and the measured 8px spacing unit, keeping section rhythm open. Favor hierarchy from contrast, alignment, and image scale—not cards, gradients, shadows, or ornamental borders. Keep photograph colors inside the image, not as new interface colors.
