---
title: "Heart Aerospace design system"
variant: extended
source: https://www.heartaerospace.com/
captured_at: 2026-10-12
theme: light
industry: travel
generator: Design DNA (https://four.wiralomi.com/style/heartaerospace-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Heart Aerospace · Design System

> Monochrome clarity meets cinematic electric aviation.

**Theme:** light · **Industry:** travel · **Source:** https://www.heartaerospace.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Heart Aerospace pairs restrained black-and-white typography with cinematic aircraft imagery to introduce its hybrid-electric regional aircraft. Spacious product storytelling leads into concise investor information and a sharply contrasted black footer.

## North star

Let oversized, restrained typography and aircraft media carry the story, while keeping interface chrome minimal and monochrome.

## Overview

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.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas, navigation and open content sections; also provides contrast for hero lettering. |
| Aviation Ink | `#000000` | `--color-aviation-ink` | brand | Navigation and content text, logo marks, and the full-width footer surface. |
| Quiet Gray | `#767676` | `--color-quiet-gray` | neutral | Muted explanatory copy and low-emphasis text on the white content canvas. |
| Mist Surface | `#eeeff2` | `--color-mist-surface` | surface | Soft light-gray section surface; use sparingly to distinguish content from the white canvas. |
| Cloud Hairline | `#dcdee3` | `--color-cloud-hairline` | semantic | Subtle navigation divider and fine structural border. |
| Footer Charcoal | `#262626` | `--color-footer-charcoal` | neutral | Measured footer border detail; not a separate major page surface. |
| Dusk Violet | `#716e85` | `--color-dusk-violet` | accent | Purple-gray stop in aircraft showcase gradients, not a general-purpose interface accent. |
| Caption Gray | `#999999` | `--color-caption-gray` | neutral | Occasional subdued heading or footer text where a softer contrast is visible. |
| Shadow Violet | `#605e71` | `--color-shadow-violet` | accent | Dark purple-gray gradient stop within showcase imagery; keep confined to that atmospheric treatment. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Aviation Ink) · `--color-surface-2` → `#eeeff2` (Mist Surface) · `--color-text` → `#000000` (Aviation Ink) · `--color-text-muted` → `#767676` (Quiet Gray) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#dcdee3` (Cloud Hairline)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#eeeff2` | 18.26:1 | AAA |
| `#767676` | `#ffffff` | 4.54:1 | AA |
| `#767676` | `#000000` | 4.62:1 | AA |
| `#767676` | `#eeeff2` | 3.95:1 | AA-large |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#eeeff2` | 1.15:1 | fail |

### Gradients

- `linear-gradient(rgb(113, 110, 133) 0px, rgb(255, 255, 255) 65%)`
- `linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.18) 55%, rgba(0, 0, 0, 0.22) 80%, rgba(113, 110, 133, 0.85) 96%, rgb(113, 110, 133))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| nhgText | `--font-body` | webfont | 400, 500, 700 | Primary family for display, headings, body copy, navigation, captions and eyebrows. | Inter |
| nhgDisplay | `--font-display` | webfont | 700 | Measured for the main h1 display treatment. | Inter |

- **nhgText:** Use 700 for bold headlines, 400 for text, and 500 for uppercase, widely tracked eyebrow labels; display headlines use tight negative tracking.
- **nhgDisplay:** Bold display face; retain compact line spacing and subtly tight tracking for the oversized hero headline.

### Type scale — Custom (ratio ≈ 2.284, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 489.5px | 700 | 0.9 | -0.04em | — | nhgText | Extremely oversized ES-36 aircraft name in the product showcase. |
| h1 | 129.5px | 700 | 1 | -0.02em | — | nhgDisplay | Primary hero statement over the aircraft video. |
| h2 | 50px | 700 | 1.2 | 0 | — | nhgText | Major section headings, including investor group titles. |
| h3 | 40px | 700 | 1.1 | -0.01em | — | nhgText | Secondary feature headings such as Cost and Climate. |
| body | 18px | 400 | 1.5 | 0 | — | nhgText | Supporting descriptions and explanatory page copy. |
| caption | 14px | 400 | 2.29 | 0 | — | nhgText | Small investor, legal and footer support text. |
| nav | 18px | 400 | 1.5 | 0 | — | nhgText | Header navigation and footer links. |
| eyebrow | 12px | 500 | 1.5 | 0.125em | uppercase | nhgText | Compact uppercase labels for footer columns and section metadata. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 8, 12, 16, 24, 32, 40, 48, 56, 64, 80, 96 px.
- Section rhythm 64px · element gap 12px · card padding — · max content width 1280px.

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.

## Shape & elevation

- Radius: nav `4px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

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.

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

## Components

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

### Measured component styles

- **Link**: transparent background · text #000000 · radius 0px · padding 12px · 400 18px nhgText
- **Navigation item** (“Skip to content Our mission Company X1 E”): transparent background · text #000000 · radius 0px · padding 0px · 400 18px nhgText

## Do

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

## Don't

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

## Agent prompt

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.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed video beneath a white navigation bar; oversized headline aligned lower left. | Video playback control, Primary message first | White header, Black logo and links, White hero typography |
| 2 | product-showcase | Centered aircraft name in a spacious, vertically staged showcase. | Product name emphasis, Scroll-led reveal | Oversized bold lettering, Purple-gray gradient atmosphere |
| 3 | product-detail | Single full-width overhead aircraft image surrounded by white space. | Visual product inspection | Large isolated aircraft render, Unframed white background |
| 4 | feature-split | Two vertically stacked feature rows pairing aircraft imagery with aligned text. | Benefit-led scanning, Concise supporting copy | Bold feature labels, Muted descriptions, Small aircraft cutouts |
| 5 | video | Full-bleed video band spanning the page width. | Video playback control | Edge-to-edge footage, Minimal play control |
| 6 | logo-cloud | Left-aligned heading and description above a three-column investor logo grid. | Investor credibility, Logo recognition | Monochrome logos, Open white layout |
| 7 | logo-cloud | Left-aligned heading and description above three evenly spaced logos. | Investor credibility, Partner recognition | Three-column logo row, Minimal text treatment |
| 8 | footer | Black footer with three utility columns and a separated lower brand and copyright row. | Site navigation, Social destinations, Address and legal links | Black surface, Small uppercase labels, Muted secondary details |

## Source CSS custom properties (selected)

```css
--dashboard-bg: #181818;
--dashboard-border: #4f4f4f;
--dashboard-text-primary: #f6f6f6;
--dashboard-text-secondary: #d7d7d7;
--dashboard-text-muted: #888888;
--dashboard-accent: #3a8fbd;
--dark-icon-bg: rgba(255,255,255,0.1);
--dark-border: rgba(255,255,255,0.15);
--image-border-radius: 8px;
--interactive-transition-duration: 200;
--radius-none: 0px;
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 24px;
--radius-full: 999px;
--spacing-2: 2px;
--spacing-4: 4px;
--spacing-6: 6px;
--spacing-8: 8px;
--spacing-12: 12px;
--spacing-16: 16px;
--spacing-20: 20px;
--spacing-24: 24px;
--spacing-32: 32px;
--spacing-40: 40px;
--spacing-48: 48px;
--spacing-64: 64px;
--spacing-80: 80px;
--spacing-96: 96px;
--spacing-120: 120px;
--elevation-sm: 4px;
--elevation-lg: 16px;
--color-primary-50: #e6e8f4;
--color-primary-100: #c2c8e5;
--color-primary-200: #939dd0;
--color-primary-300: #6273ba;
--color-primary-400: #3148a4;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/heartaerospace-com