North star · Let immersive human stories carry the emotion while a spacious, high-contrast interface stays visually quiet.
The page uses a mostly monochrome framework: white is the main reading canvas, black anchors the full-bleed hero and text, and a pale gray footer marks the close. Accent hues form a narrow pink-to-violet-to-blue gradient in the announcement strip; they are decorative interface color, while warm skin, sand, and game imagery belong to the video rather than the core palette. UntitledSans gives headings a clean, slightly compressed editorial feel through tight negative tracking and light-to-medium weights. The hero is edge-to-edge video with white overlay navigation and a compact rounded white CTA. Below, generous white space separates a two-column mission statement from centered pioneer stories, then image-led audience cards. Rounded media and pill controls soften the clinical subject matter without introducing heavy cards or shadows. The footer becomes a quiet light-gray utility zone.
Site-wide headings, body copy, navigation, buttons, and captions.
角色
示例
字号
字重
行高
字距
一级标题
Hero headline over video, set in compact high-contrast white type.
Neuralink
48px
500
1
-0.06em
二级标题
Primary mission and section headings with light editorial weight.
Neuralink
44px
300
1
-0.06em
三级标题
Story quotes and secondary feature headings.
Neuralink
32px
400
1
-0.037em
四级标题
Compact card or nested section headings.
The quick brown fox 敏捷的狐狸
24px
400
1.2
-0.05em
正文
Mission explanation and supporting narrative copy.
The quick brown fox 敏捷的狐狸
18px
400
1.2
0
辅助文字
Patient details and low-emphasis media annotations.
The quick brown fox 敏捷的狐狸
14px
400
1.2
0
按钮
Pill-shaped clinical-trial and audience-card actions.
The quick brown fox 敏捷的狐狸
16px
400
1.15
-0.02em
导航
Header links and footer navigation labels.
The quick brown fox 敏捷的狐狸
16px
400
1.5
-0.015em
间距与布局
基准单位 4px · 密度：适中
60px版块间距
30px元素间距
—卡片内边距
612px内容最大宽度
1px
2px
4px
5px
6px
8px
12px
16px
18px
20px
24px
30px
32px
40px
46px
48px
Use a full-bleed video hero followed by broad, calm content bands. The mission section is a two-column split: heading on the left, concise explanatory copy on the right. Center the pioneer storytelling and audience-card sections, leaving substantial breathing room around their media. Measured content width is 612px for constrained content; avoid dense grids and align text deliberately. The page has comfortable density, a 60px section gap, and a 30px element gap in the measured scale. Finish with a light-gray, multi-column utility footer.
圆角与层次
按钮 · 9999px
图片 · 20px
链接 · 20px
md · link
The design is mostly flat, relying on canvas changes, imagery, and generous whitespace rather than shadows. Use thin white outlines for controls over dark video and black outlines for footer settings controls. Media has rounded corners; pill-shaped buttons sit clearly above their backgrounds without noticeable drop shadows.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Announcement strip
A slim full-width gradient band with centered white link text and a close control.
Overlay navigation
White navigation links and a thin outlined pill action sit over the hero video.
Hero CTA
White fill, black text, thin white border, and fully rounded pill shape; keep it prominent against video.
Mission split
A large, left-aligned heading paired with concise explanatory copy on a white canvas.
Two image-led destinations for patients and technical candidates, with white overlay copy and outlined pill actions.
Utility footer
Light-gray footer with grouped black links, a patient-registry action, and outlined cookie settings controls.
Imagery · Video leads the page: a full-bleed opening scene carries the hero message, while patient stories use documentary-style clips in rounded media frames. Audience cards use portrait imagery with layered, atmospheric color. The warm hues visible in screenshots are primarily video and image content, not the interface palette. Keep imagery human, candid, and central, with restrained text overlays.
Keep the hero video full bleed with legible white overlay content.
Use UntitledSans-style clean typography and tight heading tracking.
Give sections ample whitespace and clear editorial alignment.
Reserve the gradient for the announcement treatment.
Use rounded media and pill-shaped primary actions.
Keep secondary footer utilities quiet on pale gray.
✕ 不该做
Do not treat video colors as brand palette colors.
Do not add colorful gradients to ordinary content sections.
Do not crowd the page with dense grids or card chrome.
Do not add heavy shadows or decorative borders around every block.
Do not use loud, oversized navigation treatments.
Do not replace human stories with generic technology imagery.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new Neuralink-style page with a restrained black-and-white interface and human-centered storytelling. Use Neural Ink (#000000) for text and dark surfaces, Canvas White (#ffffff) for the main reading canvas and primary CTA, and Footer Mist (#f5f5f5) for a quiet utility footer. Keep Petal Signal (#e486ab), Iris Haze (#7f80b3), Dusk Blue (#435a93), and Violet Pulse (#6452d8) limited to a slim announcement gradient. Set clean sans-serif type similar to UntitledSans, with tightly tracked editorial headings and natural-case labels. Lead with immersive full-bleed video, overlay minimal navigation and a rounded CTA, then alternate spacious split-copy and centered patient-story sections. Use rounded documentary media, restrained outlined controls, generous whitespace, and no heavy shadows or decorative card borders.
