North star · Keep the lavender canvas and restrained, rounded typography calm while letting product-led video and illustrations provide the visual energy.
The page is anchored by a pale lavender canvas (#f5f2ff) that continues across the long page, letting sections feel connected rather than divided into strong bands. Deep violet (#3c315b) carries most headings, navigation, and links, while near-white surfaces and dark panels provide contrast. The Phantom typeface is rounded and clean; large, centered hero text uses regular weight and tight tracking, with smaller labels and body copy remaining understated. A capsule navigation bar and pill-shaped download actions reinforce the friendly, approachable tone. The hero is a wide, rounded video panel; below it, feature sections use horizontally arranged cards with colorful product illustrations and interface imagery. Spacious gaps separate content, while individual cards supply richer color, including lavender, blue, pale yellow, and pink. Most of the page stays visually flat: subtle shadows are reserved for select cards, and strong borders are absent.
Site-wide display, headings, body copy, navigation, captions, and controls.
角色
示例
字号
字重
行高
字距
特大标题
Large centered hero headline.
Phantom
96px
400
1.1
-0.025em
一级标题
Primary hero or major page headline.
Phantom
80px
400
1.1
-0.025em
二级标题
Section headings, including feature group titles.
Phantom
30px
400
1.2
0
三级标题
Feature-card and supporting content headings.
The quick brown fox 敏捷的狐狸
24px
400
1.35
-0.025em
正文
Introductory and explanatory product copy.
The quick brown fox 敏捷的狐狸
20px
350
1.4
0
辅助文字
Small supporting labels and legal or card copy.
The quick brown fox 敏捷的狐狸
15px
400
1.21
0
导航
Top-level navigation and menu labels.
The quick brown fox 敏捷的狐狸
16px
400
1.25
0
间距与布局
基准单位 8px · 密度：适中
48px版块间距
4px元素间距
—卡片内边距
1344px内容最大宽度
4px
8px
10px
12px
16px
20px
24px
32px
48px
96px
128px
A broad, centered page uses a measured maximum content width of 1344px, with the desktop navigation and hero held within generous side margins. The hero headline and CTA are centered; feature content shifts to left-aligned headings and horizontal card rows. Feature groups repeat a spacious vertical rhythm, with substantial open canvas between showcase bands. Cards use multi-column arrangements, while the final footer becomes a denser four-column information area. Overall density is comfortable, not compact.
圆角与层次
按钮 · 9999px
导航 · 9999px
链接 · 24px
sm · link
Most sections sit flat on the continuous canvas, with no prominent borders or heavy drop shadows. Rounded surfaces and contrast between light and dark cards establish hierarchy. Select feature links use only a faint lavender-tinted shadow; the hero video is defined mainly by its rounded edge and distinct imagery.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Capsule navigation
A centered, rounded white navigation surface with Phantom Violet labels, flanked by the brand mark and search and Download controls.
Download button
Pill-shaped primary action with Lilac Signal fill and Phantom Violet text; repeat it where the page asks visitors to get the wallet.
Video hero
Wide rounded video panel with centered eyebrow, large white headline, and a contrasting Download Phantom action.
Feature card
Rounded, media-led card combining short explanatory copy and product imagery; backgrounds vary between dark, pale gray, and brighter illustration colors.
See more action
Compact pale-lavender pill with Phantom Violet text, used to move from a category intro into more feature content.
Newsletter footer
Light, rounded footer area with a prominent email field, sign-up action, and compact multi-column link lists.
Imagery · The hero uses full-bleed video inside a rounded frame, with changing, high-contrast abstract crypto visuals behind centered copy. Feature showcases rely on bright, playful product illustrations, wallet interface mockups, and 3D-like tokens rather than photography. Cards crop media to their own rounded bounds; colors inside artwork can be far more saturated than the restrained page palette.
Use Lavender Haze (#f5f2ff) as the continuous page canvas.
Set headings and navigation in Phantom Violet (#3c315b).
Use Lilac Signal (#ab9ff2) for the main download action.
Keep navigation and buttons pill-shaped and friendly.
Use large, centered hero copy over product-led video.
Let feature illustrations bring brighter colors into selected cards.
✕ 不该做
Don't divide every section with a strong color band.
Don't add heavy borders or prominent shadows.
Don't crowd the page with dense text or tight spacing.
Don't use sharp-cornered controls where rounded pills are established.
Don't treat colors inside product artwork as the core page palette.
Don't make all feature cards visually identical.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new Phantom-style crypto page on a continuous Lavender Haze (#f5f2ff) canvas. Use Phantom Violet (#3c315b) for headings, navigation, and links, with a Phantom-like rounded sans serif and restrained regular weights. Keep the top navigation capsule-shaped and centered, and make the primary download action a Lilac Signal (#ab9ff2) pill with dark violet text. Create a spacious, centered video-led hero, then transition into left-aligned feature groups with rounded cards, concise copy, and colorful wallet UI or playful crypto illustrations. Use Warm Porcelain (#fffdf8), Soft Black (#1c1c1c), and Cloud Gray (#e9e8ea) selectively for card contrast. Maintain large open intervals between groups, minimal borders, and only faint shadows. Keep the footer compact and organized into columns.
