North star · Let oversized, restrained typography and aircraft media carry the story, while keeping interface chrome minimal and monochrome.
The page uses white as its principal canvas, with black navigation, headings and body text establishing a crisp, technical editorial voice. Muted gray supports supporting copy, while pale gray is reserved for a quiet section surface and a fine gray hairline separates navigation. The purple-gray tones in measured gradients belong to the aircraft showcase treatment rather than a broad UI accent system. Typography is predominantly nhgText: confident bold headings, unusually large aircraft naming and compact, readable supporting copy. A full-bleed opening video makes the aircraft the visual anchor; white headline lettering sits over its blue-gray sky. The following ES-36 presentation uses a vertical gradient and generous image-led space, then moves into sparse benefit rows and investor logo grids. Wide margins, open white space and limited decoration keep the page composed. The black footer creates a decisive closing band with subdued utility labels and links.
Primary family for display, headings, body copy, navigation, captions and eyebrows.
Aa 设计
nhgDisplay
网络字体 · 字重 700 · 占比 4%
免费替代:Inter
Measured for the main h1 display treatment.
角色
示例
字号
字重
行高
字距
特大标题
Extremely oversized ES-36 aircraft name in the product showcase.
Heart Aerospace
489.5px
700
0.9
-0.04em
一级标题
Primary hero statement over the aircraft video.
Heart Aerospace
129.5px
700
1
-0.02em
二级标题
Major section headings, including investor group titles.
Heart Aerospace
50px
700
1.2
0
三级标题
Secondary feature headings such as Cost and Climate.
Heart Aerospace
40px
700
1.1
-0.01em
正文
Supporting descriptions and explanatory page copy.
The quick brown fox 敏捷的狐狸
18px
400
1.5
0
辅助文字
Small investor, legal and footer support text.
The quick brown fox 敏捷的狐狸
14px
400
2.29
0
导航
Header navigation and footer links.
The quick brown fox 敏捷的狐狸
18px
400
1.5
0
眉题
Compact uppercase labels for footer columns and section metadata.
The quick brown fox 敏捷的狐狸
12px
500
1.5
0.125em
间距与布局
基准单位 4px · 密度:适中
64px版块间距
12px元素间距
—卡片内边距
1280px内容最大宽度
2px
4px
8px
12px
16px
24px
32px
40px
48px
56px
64px
80px
96px
The page is a long, single-column editorial sequence, with full-bleed media alternating with spacious white content. The measured maximum content width is 1280px; investor areas divide into three columns, while feature copy remains open and lightly structured. Headings align left in content sections and center in the ES-36 introduction. Section rhythm is generous, with a measured 64px section gap and comfortable density. Keep elements separated by whitespace rather than cards or dense grids.
圆角与层次
导航 · 4px
没有测到阴影:页面是扁平的,层次靠底色和描边区分。
The interface is largely flat: no measured shadows and no prominent card containers. Use white space and section transitions for hierarchy, with a subtle measured gray hairline in the navigation. The black footer is a solid contrasting band. Showcase gradients belong behind aircraft media and type, not as elevated UI surfaces.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建(字体用替代字体)。
Top navigation
White horizontal header with a black Heart Aerospace mark, 18px regular nhgText links, and a subtle measured #dcdee3 divider.
Video hero
Full-bleed aircraft footage with a bold white headline placed over the lower-left portion of the image and a minimal video control.
Aircraft showcase
Large ES-36 display lettering paired with generous aircraft imagery and an atmospheric purple-gray-to-white gradient.
Benefit rows
Sparse Cost and Climate statements paired with small aircraft images; bold headings and muted explanatory copy sit in open white space.
Investor logo grids
Separate financial and strategic investor sections with concise introductory copy and three-column logo arrangements.
Footer
Black three-column utility area for navigation, social links and address, followed by a brand mark and subdued copyright line.
Imagery · Use cinematic aircraft video as the opening and mid-page visual anchors, framed edge-to-edge. Product imagery includes a large overhead aircraft rendering and smaller aircraft cutouts beside concise benefit copy. Preserve realistic, cool-toned aviation photography and clean white product renders; investor logos remain small and monochrome rather than becoming decorative imagery.
Use a white canvas and black type for the core interface.
Make aircraft imagery the focal point of the opening and showcase sections.
Keep display headlines bold, oversized and tightly tracked.
Reserve muted gray for supporting copy and secondary labels.
Use generous whitespace instead of enclosing content in cards.
Keep the purple-gray gradient limited to aircraft presentation.
End with a clear black footer band.
✕ 不该做
Do not introduce bright UI accent colors.
Do not turn illustration-derived colors into a broad brand palette.
Do not crowd the page with dense cards or decorative borders.
Do not add drop shadows to otherwise flat sections.
Do not use rounded card treatments as a primary visual motif.
Do not compete with aircraft imagery using extra decorative graphics.
给 AI 的提示词
想快速出一个同风格的新页面,把这段话连同 DESIGN.md 一起发给 AI。
Build a new editorial page in the Heart Aerospace visual style. Use Gallery White (#ffffff) as the main canvas and Aviation Ink (#000000) for navigation, headings and primary text. Set supporting copy in Quiet Gray (#767676), with Cloud Hairline (#dcdee3) only for subtle dividers. Use bold, tightly tracked oversized headlines and restrained nhgText/Inter-like sans-serif typography. Create a clean horizontal header, a cinematic full-bleed aircraft media hero, and spacious product or feature sections with open whitespace rather than cards. Keep Dusk Violet (#716e85) and Shadow Violet (#605e71) confined to atmospheric media gradients. Finish with a solid black footer containing compact, subdued utility columns. Favor flat surfaces, crisp alignment and realistic aviation imagery; avoid ornamental UI, shadows and unnecessary color.