Vana 以开阔、清晰的首页呈现开放数据基础设施，首屏用薰衣草紫视频背景搭配醒目的黑色大字。暖白内容区、紧凑的等宽字体标签和克制的亮蓝操作按钮，让技术主题显得亲近易懂。
North star · Let a single expressive media hero lead, then make every supporting section quieter, clearer, and more usable.
The page pairs a warm near-white canvas with a lavender full-width video hero, creating a calm but distinctive first impression. Black Onest display text sits directly over the hero, while muted gray supporting copy keeps the message readable without competing with it. The electric blue CTA is the sharpest interface accent; softer lavender and pastel surfaces distinguish the four audience links below. Onest carries the expressive headline, navigation, and body copy, while JetBrains Mono gives captions, labels, and actions a technical, data-oriented character. Content is organized in broad horizontal bands with generous open space: a media-led hero, a pastel category strip, a compact news-card row, and a quiet footer. The hero's human-shaped, code-like video texture is atmospheric rather than a literal interface illustration. Cards stay mostly flat, with thin gray dividers and subtle shadows reserved for clickable content.
Display headlines, navigation, body copy, and card text.
Aa 设计
JetBrains Mono
网络字体 · 字重 400 · 占比 25%
免费替代：IBM Plex Mono
Eyebrows, dates, captions, compact links, and button labels.
角色
示例
字号
字重
行高
字距
特大标题
Oversized hero headline, tightly set over the video background.
Vana
108px
500
0.88
-0.05em
一级标题
Section-level primary headings and prominent page titles.
The quick brown fox 敏捷的狐狸
25px
600
1.2
-0.015em
正文
Supporting paragraphs and descriptive card copy.
The quick brown fox 敏捷的狐狸
15px
400
1.43
0
辅助文字
Compact dates and metadata on news cards.
The quick brown fox 敏捷的狐狸
13px
400
1.2
0.02em
按钮
Short action labels, especially the primary app CTA.
The quick brown fox 敏捷的狐狸
13px
400
1.2
0.02em
导航
Top navigation and footer navigation links.
The quick brown fox 敏捷的狐狸
15px
400
1.43
0
链接
Small utility links and card calls to action.
The quick brown fox 敏捷的狐狸
13px
400
1.2
0.02em
眉题
Uppercase section labels and compact category markers.
The quick brown fox 敏捷的狐狸
12px
400
1
0.05em
代码
Technical-style compact labels or data references.
const style = 1;
13px
400
1.2
0.02em
间距与布局
基准单位 4px · 密度：适中
80px版块间距
6px元素间距
—卡片内边距
1180px内容最大宽度
2px
4px
6px
8px
10px
11px
12px
14px
16px
18px
20px
24px
36px
80px
96px
Use a centered content frame capped at the measured 1180px maximum width, with broad full-width color and media bands. The top navigation is a simple horizontal row; the hero aligns its text left over edge-to-edge video. Below it, arrange four pastel audience links in a row, followed by three editorial news cards and a multi-column footer. Keep comfortable density and generous section breathing room; the measured section rhythm uses an 80px gap.
圆角与层次
按钮 · 4px
输入框 · 4px
卡片 · 8px
导航 · 4px
链接 · 8px
sm · link
The interface is predominantly flat: rely on open space, pastel section fills, and fine gray borders instead of pronounced shadows. Clickable news cards may receive a very subtle shadow, while the audience links use distinct background colors as their main separation. Keep layering limited to text over the hero video.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Top navigation
Place the Vana wordmark at left and compact Onest navigation links at right, ending with a rounded-corner Signal Blue Launch App button.
Video hero
Use a full-width lavender media field with a large, left-aligned black headline and muted supporting copy layered over the video.
Audience category links
Present four adjacent pastel cards for distinct audiences, each with a small JetBrains Mono label and number above concise Onest copy.
News cards
Show a compact three-card editorial row with thumbnail, mono date, headline, short summary, and small mono read-more link.
Newsletter form
Keep the footer signup minimal: a short description, a single email field, and a small directional submit affordance.
Footer navigation
Group links into compact columns for Use, Read, and Find Us, with a separate low-key legal and support row.
Imagery · The first view is dominated by a full-bleed video with a human-shaped field of fine, code-like marks over a lavender gradient. Treat this as atmospheric motion imagery, not a product screenshot. Below the audience cards, use small editorial news thumbnails, including people in discussion and a dark data visualization. Keep imagery contained within its card and let generous surrounding space preserve clarity.
Keep hero headlines bold, black, and left aligned over the media.
Reserve Signal Blue #4141fc for the primary action.
Use JetBrains Mono for small labels, dates, and utility links.
Separate audience cards with soft, distinct pastel fills.
Give each major horizontal band generous breathing room.
✕ 不该做
Do not turn the full page into a saturated gradient.
Do not use bright blue for long passages of text.
Do not crowd the hero with multiple competing actions.
Do not add heavy shadows or thick card borders.
Do not use mono typography for the main headline.
Do not treat video artwork colors as universal UI colors.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new page in Vana’s visual language: calm, human-centered, and editorial, with a spacious Warm Canvas #fcfcfa ground. Pair Deep Ink #111111 Onest headlines with Soft Graphite #6b6b6b supporting copy, and use JetBrains Mono for compact labels, dates, and utility links. Give the opening section one strong media focal point, using lavender tones such as Lavender Field #ece9fb; keep any human or data-inspired motion artwork atmospheric. Make Signal Blue #4141fc the rare, clear primary action. Use pastel surfaces such as Oat Card #f3efe1, Periwinkle Card #d9d9fe, Peach Card #f0d5bc, and Lemon Card #fef2b3 to distinguish related content. Structure the page as broad, breathable bands with understated card edges, restrained shadows, and a simple footer.
