North star · Use oversized, tightly tracked black headlines and a single confident color field to make everyday finance feel simple and approachable.
The page leads with a clean white navigation bar above a saturated cyan hero, using black display lettering for a direct, high-contrast first impression. That bright opening gives way to long white stretches where compact copy and large headings sit beside product and lifestyle imagery. A warm off-white surface and occasional pale gray cards break up the canvas without introducing a dense interface. The type system is distinctive: heavy PayPal Pro display faces use tight tracking and compact line spacing, while PayPal Pro Text keeps navigation, body copy, and links legible. Images show everyday shopping and payment moments in rounded rectangular frames; they are treated as content rather than decorative background. The payment options section uses varied card colors, including black, blue, and gray, to distinguish offers. Generous vertical pauses separate sections, while rounded pills make navigation and calls to action feel approachable. Keep the visual hierarchy bold, airy, and unmistakably PayPal.
Oversized hero headline and other dominant promotional display text.
PayPal
222px
900
1
-0.03em
一级标题
Primary page headline, set very large and heavy.
PayPal
181px
900
1
-0.03em
二级标题
Major section headlines, including rewards and payment-choice sections.
PayPal
178px
900
1.1
-0.039em
三级标题
Secondary promotional and feature headings.
PayPal
99.5px
900
1.1
-0.03em
四级标题
Smaller nested headings within feature content.
PayPal
67px
900
1.1
-0.03em
正文
Supporting descriptions and explanatory copy.
The quick brown fox 敏捷的狐狸
14px
400
1.5
-0.015em
辅助文字
Compact legal notes and supporting labels.
The quick brown fox 敏捷的狐狸
12px
700
1.33
-0.015em
导航
Header navigation labels and compact navigation text.
The quick brown fox 敏捷的狐狸
12px
700
1.33
-0.015em
链接
Emphasized inline links and calls to action.
The quick brown fox 敏捷的狐狸
16px
700
1.5
-0.015em
间距与布局
基准单位 2px · 密度：适中
53px版块间距
24px元素间距
—卡片内边距
1080px内容最大宽度
2px
8px
10px
12px
16px
17px
20px
23px
24px
26px
48px
53px
55px
70px
106px
A centered desktop composition uses a measured 1080px maximum page width, with the navigation spanning the top and the hero content centered. Main sections align to a consistent left edge, while the rewards showcase and hero use centered focal points. A comfortable density and measured 53px section gap create substantial pauses between content groups; the measured element gap is 24px. Keep long white stretches intact rather than filling every interval. Cards form a vertical sequence in the payment section, with paired text and image areas; a later full-bleed image section deliberately breaks the constrained content rhythm.
圆角与层次
卡片 · 24px
图片 · 8px
导航 · 9999px
链接 · 9999px
inset · link
lg · card
hairline · card
hairline · other
The overall interface is largely flat, with white space doing more work than borders. Cards use generous rounded corners; measured card radius is 24px, while media radius is 8px. A soft, large card shadow appears in measured styles, but avoid adding shadows to every tile. Rounded pill navigation and links use an inset hairline treatment rather than heavy outlines.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Header navigation
White top bar with PayPal mark, compact dark text links, and pill-shaped Log In and Sign Up actions. The measured nav uses bold 12px text.
Hero and audience switch
Bright cyan hero field with a centered Personal/Business pill selector, oversized black headline, and a central rounded product-media frame.
Rewards showcase
White section with a bold heading, a mosaic of merchant and product imagery, and large centered percentage-back figures with compact supporting copy.
Payment option cards
Vertical set of rounded split cards combining offer copy and lifestyle photography. Use differentiated black, blue, gray, and pale surfaces.
Safety feature
A large section heading, broad rounded lifestyle photograph, concise security statement, and a compact pill-shaped link.
Closing brand band
Full-bleed deep-blue section with oversized white promotional lettering and a strong horizontal brand-color treatment.
Imagery · Use candid, polished lifestyle photography showing people shopping, paying, and using products. Images are presented in rounded rectangular frames or as one side of split cards; keep the imagery vivid and photographic rather than adding decorative illustration. Product and merchant tiles may form a dense mosaic in the rewards area, but the text and reward figures remain easy to scan. The hero also includes a product-style media card; imagery supports the message instead of replacing the bold headline.
Use Signal Cyan (#60cdff) as the distinctive hero color.
Set headline text in PayPal Ink (#000000) with a heavy display face.
Preserve broad white areas between major content groups.
Use rounded image frames and pill-shaped interactive elements.
Pair concise copy with authentic lifestyle photography.
Reserve PayPal Deep Blue (#002991) for strong closing or gradient accents.
✕ 不该做
Do not introduce unmeasured brand colors.
Do not fill generous white section gaps with extra content.
Do not use thin, delicate display typography.
Do not apply heavy borders or shadows to every card.
Do not make product imagery compete with the main headline.
Do not turn the clean layout into a dense dashboard.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new PayPal-style fintech page with a white canvas, a crisp top navigation, and a bold opening color field in Signal Cyan (#60cdff). Use PayPal Pro or a close rounded geometric display substitute for oversized PayPal Ink (#000000) headlines; set supporting copy in a clean sans-serif. Keep content centered within the measured 1080px page width, use measured 53px section rhythm and 24px element gaps, and allow broad white pauses. Present features as rounded image-and-copy cards with restrained soft elevation. Use lifestyle photography in rounded frames, not decorative illustrations. Apply Link Blue (#0066f5) to links and reserve PayPal Deep Blue (#002991) for a strong closing band or gradient accent. Keep interactions pill-shaped, copy concise, and the overall impression open and confident.
