Valo 首页以近乎纯黑的画布和克制的排版，衬托明亮的科学渐变与团队实景照片。疏朗、对齐明确的版块并列呈现研究方法、合作模式与团队成员。
North star · Let a quiet black canvas carry the story; use white type, fine rules, and vivid gradients only to illuminate scientific ideas.
A near-black canvas carries almost the entire page, letting white typography and hairline rules define the structure without conventional card surfaces. Bright colour is reserved for the hero’s highlighted phrase, scientific ring graphics, and broad atmospheric gradient imagery; these accents feel luminous against black rather than decorative. The single Valo sans-serif family moves from very light, large display headlines to compact body copy. Navigation and section labels use small uppercase lettering with generous tracking, while headlines stay sentence case. Content alternates between spacious two-column feature splits and a company photo grid, with thin horizontal rules marking transitions. The photography is candid and laboratory-centred, presented in crisp rectangular crops. Generous black intervals keep the page calm despite its long scroll, and simple circular arrow links provide repeated interaction cues. A pale gradient footer is the deliberate closing contrast.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
强调色
表层色
中性色
功能色
页面底色 · Deep Canvas表层 · Signal White主文字 · Signal White次要文字 · Deep Canvas描边 · Graphite Rule强调 · Discovery Blue强调 2 · Research Blue强调 3 · Mint Signal
Site-wide typeface for headlines, navigation, body copy, labels, and links.
角色
示例
字号
字重
行高
字距
特大标题
Oversized hero statement, set light and tightly tracked.
Valo
100px
300
1
-0.027em
一级标题
Primary page or section headline.
Valo
60px
300
1
0
二级标题
Major feature and company-section headings.
Valo
38px
400
1.2
-0.013em
三级标题
Supporting feature titles and prominent subheads.
Valo
30px
300
1.33
0
四级标题
Smaller supporting headings within feature content.
The quick brown fox 敏捷的狐狸
24px
300
1.33
0
正文
Descriptions, explanatory copy, and supporting paragraphs.
The quick brown fox 敏捷的狐狸
15px
400
1.4
0
辅助文字
Compact uppercase captions and section labels.
The quick brown fox 敏捷的狐狸
10px
400
1.4
0.1em
导航
Small uppercase primary navigation links.
The quick brown fox 敏捷的狐狸
10px
400
1.4
0.1em
眉题
Small uppercase labels such as APPROACH and PARTNERSHIP.
The quick brown fox 敏捷的狐狸
10px
400
1.4
0.1em
间距与布局
基准单位 1px · 密度：适中
41px版块间距
18px元素间距
—卡片内边距
1400px内容最大宽度
5px
7px
14px
16px
18px
23px
27px
36px
41px
45px
49px
50px
54px
108px
135px
198px
The measured page max width is 1400px; at the supplied desktop view, content aligns to consistent outer margins. A single-column, full-bleed hero leads into two-column feature splits, then a two-column company image grid and a three-column text row. Section labels and hairline rules mark the starts of major blocks. The measured spacing system is comfortable, with section gaps and element gaps guiding rhythm; preserve generous black breathing room rather than adding dense cards. The footer switches to a light, full-width band.
圆角与层次
链接 · 9999px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is essentially flat: no measured shadows, raised cards, or layered panels define the system. Thin horizontal rules and subtle navigation borders separate content on the black canvas. Contrast comes from white type, gradient accents, and occasional full-bleed imagery; keep overlapping layers restrained.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Primary navigation
White Valo wordmark at left and a concise horizontal set of links at right; use small uppercase, tracked navigation styling where shown.
Section eyebrow
Small uppercase label aligned to the content edge, often followed by a thin horizontal rule.
Feature split
Two-column section pairing a scientific illustration or image with a headline, short copy, and supporting details.
Arrow link
White circular icon button with a dark arrow, followed by a white text link; the measured link radius is 9999px.
Company image grid
Rectangular team and laboratory photographs arranged in two columns, with narrow dark separations.
Gradient statement panel
Wide, softly coloured gradient image panel with a centered white statement and no raised-card treatment.
Footer band
Full-width pale gradient closing area with the Valo mark and compact legal or utility links.
Imagery · Use candid laboratory and team photography in clean rectangular crops, with the company section arranged as a compact image grid. Scientific concepts appear as fine-line ring and network illustrations with luminous gradient edges. A wide, soft multicolour gradient panel supports a centered statement; avoid treating imagery as a tiled product catalogue or adding decorative photography without a clear narrative role.
Reserve gradients for scientific accents and broad image panels.
Set large headlines in a light weight with sentence-case wording.
Separate sections with fine rules and ample negative space.
Use candid laboratory and team photography in clean crops.
✕ 不该做
Do not introduce unmeasured colours as brand tokens.
Do not put every content block into a card.
Do not add heavy shadows or conspicuous elevation.
Do not use gradients as a substitute for body-text contrast.
Do not crowd the layout with dense copy or extra UI.
Do not replace the restrained visual system with decorative icons.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new Valo-style health technology page around a near-black canvas (#000000) with Signal White (#ffffff) typography. Use the Valo sans-serif or a close free substitute such as Manrope; make display headlines light and oversized, with compact uppercase, tracked navigation and section labels. Reserve Midnight Indigo (#1e233c), Discovery Blue (#0a4099), Research Blue (#1951a2), and Mint Signal (#70dab4) for restrained gradients, scientific rings, and imagery—not general text or surfaces. Organize content into spacious two-column feature splits, separated by thin graphite rules (#4d4d4d), then use candid lab and team photography in rectangular crops. Keep surfaces flat, avoid shadows and repeated cards, and use simple white circular arrow links. Finish with a full-width pale gradient footer.
