风格库/旅行/Heart Aerospace

Heart Aerospace

以黑白极简呈现电动航空Monochrome clarity meets cinematic electric aviation.

浅色主题旅行aircraft company homepage极简编辑式排版沉浸式视频超大字体航空原网页 heartaerospace.com ↗ · 2026-10-12 采集 · 1440×900 桌面端
Heart Aerospace 首屏

Heart Aerospace以克制的黑白排版搭配电影感飞机影像,介绍其混合动力电动支线飞机。宽松的产品叙事延伸至精简的投资方信息,并以醒目的黑色页脚收尾。

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.

配色

点色块复制色值。用途说明来自对页面的实测位置(背景、文字、描边、按钮)与截图判读。

品牌色
强调色
表层色
中性色
功能色
页面底色 · Gallery White表层 · Aviation Ink表层 2 · Mist Surface主文字 · Aviation Ink次要文字 · Quiet Gray弱文字 · Gallery White描边 · Cloud Hairline
文字背景对比度WCAG
#000000 Aviation Ink#ffffff Gallery White21:1AAA
#000000 Aviation Ink#eeeff2 Mist Surface18.26:1AAA
#767676 Quiet Gray#ffffff Gallery White4.54:1AA
#767676 Quiet Gray#000000 Aviation Ink4.62:1AA
#767676 Quiet Gray#eeeff2 Mist Surface3.95:1AA-large
#ffffff Gallery White#000000 Aviation Ink21:1AAA

字体

字号阶梯:Custom(比例约 2.284,正文 18px)。示例用免费替代字体渲染,数值为实测。

Aa 设计

nhgText

网络字体 · 字重 400 / 500 / 700 · 占比 96%
免费替代:Inter

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.5px7000.9-0.04em
一级标题
Primary hero statement over the aircraft video.
Heart Aerospace
129.5px7001-0.02em
二级标题
Major section headings, including investor group titles.
Heart Aerospace
50px7001.20
三级标题
Secondary feature headings such as Cost and Climate.
Heart Aerospace
40px7001.1-0.01em
正文
Supporting descriptions and explanatory page copy.
The quick brown fox 敏捷的狐狸
18px4001.50
辅助文字
Small investor, legal and footer support text.
The quick brown fox 敏捷的狐狸
14px4002.290
导航
Header navigation and footer links.
The quick brown fox 敏捷的狐狸
18px4001.50
眉题
Compact uppercase labels for footer columns and section metadata.
The quick brown fox 敏捷的狐狸
12px5001.50.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.

页面版块

共 8 个版块,按页面从上到下排列,每个都标了类型、布局和交互套路。

该做与不该做

✓ 该做

  • 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.

相似风格

Heart Aerospace 设计系统 — 配色、字体与 DESIGN.md | Design DNA