# Heartaerospace · Design system migration spec

> Source: https://heartaerospace.com  ·  Curated by OpenDesign  ·  en

> The site effectively uses restraint and high-quality imagery to convey a premium, visionary hardware brand identity.

## 1. Identity DNA

The Heart Aerospace design system draws its character from clean, restrained aerospace engineering documentation—a language of precision where every element earns its place. Like the aircraft it represents, the system prioritizes clarity, structural integrity, and purposeful minimalism over ornamentation.

**One-liner:** A premium, clean aerospace brand showcasing electric aviation hardware with restrained typography and large-scale imagery.
**Keywords:** aerospace · electric aviation · sustainability · clean technology · premium hardware
**Analogy:** Clean, restrained aerospace engineering documentation.

## 2. Color

The color system is built on a stark monochrome foundation of white and near-black, establishing a high-contrast canvas that speaks to technical documentation and precision engineering. A single, vibrant deep blue acts as the sole accent, used with strict discipline to mark interactive elements and guide user focus across the interface.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#EEF0F2` | card background |
| `--ink` | `#141414` | body text |
| `--ink-soft` | `#767676` | secondary text |
| `--muted` | `#767676` | placeholder |
| `--accent` | `#1032CF` | single accent |
| `--line` | `rgba(20,20,20,0.15)` | divider |

**Color principle:** High-contrast monochrome base with a single, vibrant deep blue accent for interactive elements.

This restraint ensures the brand's premium hardware identity remains unmistakable, never diluted by competing chromatic signals.

## 3. Typography

Typography is handled by the Neue Haas Grotesk family, split into Display and Text variants to maintain consistent voice across scales. The choice of a geometric grotesque sans-serif reinforces the system's engineering-driven aesthetic, while tight letter-spacing on headlines compresses the text for a dense, impactful presence.

- **Display:** neue-haas-grotesk-display
- **Body:** neue-haas-grotesk-text

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 50px | 1.0 | 500 | 0.1px | Large hero headlines and section titles. |
| body | 18px | 1.78 | 400 | 0.1px | Primary body copy and navigation links. |
| caption | 14px | 1.4 | 400 | 0.5px | Smaller metadata and captions. |

**Type rules:**
- Use Neue Haas Grotesk Display for all major display text.
- Use Neue Haas Grotesk Text for all body and UI text.
- Maintain tight letter-spacing for headlines.

## 4. Spacing

Spacing follows a strict 4px base grid, creating a modular and predictable rhythm that underpins every component and layout.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Strict 4px base grid with generous 64px section padding.

## 5. Surfaces

Surfaces are defined by subtle, high-opacity shadows and low-contrast borders that establish depth without visual noise. The approach creates a layered interface where cards and containers feel grounded yet lightweight, consistent with the system's focus on clarity and functional form.

- **Radius:** sm 4px · md 8px · lg 32px · pill 999px
- **Shadows:**
  - 0 32px 68px rgba(0, 0, 0, 0.3)
- **Borders:** Subtle 1px borders using rgba(20,20,20,0.15) or black with low opacity.

## 6. Layout

The layout skeleton is built around full-width hero sections with centered, large-scale typography overlays. This generous, spacious structure prioritizes visual impact and clear hierarchy, allowing high-quality imagery to serve as the primary narrative device alongside bold typographic statements.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width hero images with centered, large-scale typography overlays.

## 7. Motion & Interaction

Motion is treated as a functional refinement rather than an expressive tool, adhering to a philosophy of minimal, purposeful animation. Transitions are smooth and fast—typically 0.2 seconds—applied only to opacity, color, and filter changes to maintain a professional, uninterrupted user flow.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Subtle opacity transitions on hover.
  - Color transitions for primary buttons.
  - Filter transitions for images.

- **Hover:** Slight opacity reduction or color shift on interactive elements.
- **Click:** Immediate visual feedback with no bouncy scaling.
- **Transition:** Smooth, fast transitions (0.2s) for color and opacity changes.
- **Keyboard:** Standard focus states using browser defaults.

## 8. Voice & Don'ts

The editorial voice is professional, visionary, and forward-looking, communicated through large, bold, sentence-case headlines and clear, action-oriented calls to action. Language is direct and avoids both overly technical jargon without context and aggressive, hype-driven marketing speech.

- **Tone:** Professional, visionary, and forward-looking.
- **Headline style:** Large, bold, sentence-case statements.
- **CTA style:** Clear, action-oriented text on solid blue backgrounds.
- **Avoid:** Overly technical jargon without context. / Aggressive or hype-driven marketing language. / Visually cluttered interfaces. / Use of multiple bright colors.

### Don'ts
- ❌ Don't use decorative fonts — screenshot shows clean, geometric grotesque sans-serif typography.
- ❌ Don't use busy backgrounds behind text — screenshot shows clear text overlays on imagery or solid white backgrounds.
- ❌ Don't use multiple accent colors — screenshot shows a single dominant deep blue used consistently.
- ❌ Don't use sharp, aggressive corners — screenshot shows consistently rounded corners (up to 32px) on major elements.
- ❌ Don't use dark mode for the main interface — screenshot shows a predominantly white and light-themed layout.
- ❌ Don't use low-contrast text — screenshot shows high-contrast black or white text against its background.

The system deliberately excludes decorative typography, multiple accent colors, dark mode interfaces, and visually cluttered layouts—design choices that would compromise the brand's core promise of clean, premium aerospace technology.

## System Prompt (paste into AI tool)

```
Heart Aerospace is a premium electric aircraft manufacturer. The design is clean, restrained, and hardware-focused, utilizing a high-contrast palette of stark white (#FFFFFF), deep black (#141414), and a single vibrant deep blue (#1032CF) accent. Typography relies on Neue Haas Grotesk Display and Text, characterized by tight letter-spacing and large scales. Critical donts: avoid multiple accent colors, never use decorative or serif typefaces, and avoid visual clutter or busy layouts. The design DNA centers on clean geometric lines, generous whitespace, and high-quality photography to convey technological precision and a visionary mission.
```