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

# Hyer Aviation · Design System

> Private travel, presented with quiet confidence.

**Theme:** light · **Industry:** travel · **Source:** https://www.flyhyer.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._

Hyer pairs private aviation and handpicked stays in a spacious, editorial homepage. A restrained ink-and-white interface lets expansive travel imagery and oversized typography carry the brand.

## North star

Let oversized editorial type and immersive travel imagery lead, while keeping interface colour and decoration restrained.

## Overview

The visual strategy balances a crisp white canvas with deep blue-black ink, using contrast rather than decorative effects to create a premium, composed feel. The opening hero is a full-bleed aircraft image with an oversized wordmark and compact navigation; subsequent sections alternate between open white editorial layouts and dark, image-led feature bands. HelveticaNowDisplay anchors the system, pairing very large, tightly tracked bold headings with modest, readable body copy. Content is arranged in two-column splits and small feature grids, with wide margins and clear separation between sections. Photography does most of the atmospheric work: aircraft, destinations, stays, and a travel-support moment appear as immersive, carefully framed images. A pale blue gradient softens the closing call to action, while a muted terracotta panel is a distinct accent within the solutions imagery. Hairline borders and flat surfaces keep cards understated.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary canvas for the hero and most content sections; also used for reverse text and button labels. |
| Aviation Ink | `#000d10` | `--color-aviation-ink` | brand | Core text and link colour, dark footer surface, and fill for pill-shaped primary actions. |
| Quiet Grey | `#8e8e95` | `--color-quiet-grey` | neutral | Muted navigation, footer links, and secondary text against light surfaces. |
| Sky Haze | `#d3e3f2` | `--color-sky-haze` | semantic | Measured pale-blue gradient in the closing CTA; use as a soft atmospheric fade, not a solid brand panel. |
| Cloud Line | `#d5d3d4` | `--color-cloud-line` | neutral | Fine card and content dividers, including the destination listings. |
| Night Slate | `#151623` | `--color-night-slate` | surface | Dark panel colour appearing in travel and solutions feature imagery; secondary to the white canvas. |
| Midnight Panel | `#0f0f1c` | `--color-midnight-panel` | surface | Deep near-black panel tone in image-led feature content, not a general page background. |
| Terracotta Route | `#bc7155` | `--color-terracotta-route` | accent | Warm accent panel and link background in the solutions content; use sparingly as a visual counterpoint. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#151623` (Night Slate) · `--color-surface-2` → `#000d10` (Aviation Ink) · `--color-surface-3` → `#0f0f1c` (Midnight Panel) · `--color-surface-4` → `#bc7155` (Terracotta Route) · `--color-text` → `#000d10` (Aviation Ink) · `--color-text-muted` → `#8e8e95` (Quiet Grey) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#d5d3d4` (Cloud Line) · `--color-accent` → `#bc7155` (Terracotta Route)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000d10` | `#ffffff` | 19.72:1 | AAA |
| `#000d10` | `#151623` | 1.1:1 | fail |
| `#000d10` | `#0f0f1c` | 1.04:1 | fail |
| `#8e8e95` | `#ffffff` | 3.25:1 | AA-large |
| `#8e8e95` | `#151623` | 5.51:1 | AA |
| `#8e8e95` | `#000d10` | 6.06:1 | AA |
| `#8e8e95` | `#0f0f1c` | 5.84:1 | AA |
| `#ffffff` | `#151623` | 17.93:1 | AAA |
| `#ffffff` | `#000d10` | 19.72:1 | AAA |
| `#ffffff` | `#0f0f1c` | 19:1 | AAA |

### Gradients

- `linear-gradient(360deg, rgb(211, 227, 242), rgba(211, 227, 242, 0) 72.08%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| HelveticaNowDisplay | `--font-body` | webfont | 400, 700 | Shared display, heading, body, navigation, link, caption, and button typeface. | Inter |

- **HelveticaNowDisplay:** Use bold, tightly tracked display and headings; body and navigation stay regular and sentence case.

### Type scale — Golden Ratio (ratio ≈ 1.572, base 19.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 187px | 700 | 0.8 | -0.02em | — | HelveticaNowDisplay | Oversized wordmark-style hero typography. |
| h1 | 131px | 700 | 1 | -0.02em | — | HelveticaNowDisplay | Primary hero statement and major page headline. |
| h2 | 63.5px | 700 | 1 | -0.02em | — | HelveticaNowDisplay | Section titles such as the editorial travel approach. |
| h3 | 60px | 700 | 0.91 | -0.02em | — | HelveticaNowDisplay | Feature and destination section headings. |
| h4 | 52px | 700 | 1 | -0.01em | — | HelveticaNowDisplay | Secondary feature and card headings. |
| body | 19.5px | 400 | 1.1 | 0 | — | HelveticaNowDisplay | Introductory copy, explanations, and supporting content. |
| caption | 17px | 400 | 1.2 | 0.01em | — | HelveticaNowDisplay | Small descriptive labels and compact image or feature copy. |
| button | 17px | 700 | 1 | 0 | — | HelveticaNowDisplay | Bold text inside dark pill-shaped calls to action. |
| nav | 19.5px | 400 | 1 | 0 | — | HelveticaNowDisplay | Header navigation and footer navigation links. |
| link | 19.5px | 400 | 1.2 | 0 | — | HelveticaNowDisplay | Inline and section-level navigation links. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 13, 15, 16, 17, 19, 21, 22, 23, 31, 38, 45, 51, 52, 53, 58, 60 px.
- Section rhythm 52px · element gap 4px · card padding 23px · max content width 1320px.

Use a spacious editorial composition within the measured 1320px maximum content width. The opening viewport layers navigation and a large wordmark over full-bleed aircraft imagery, then anchors short supporting copy and paired actions near the bottom. Most content sections use two columns, with occasional single-column image features and a compact four-item grid. Preserve generous white space and a measured 52px section rhythm; align text to the left and allow imagery to break out across the page. The overall density is comfortable, not dashboard-like.

## Shape & elevation

- Radius: button `50%` · link `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.5s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is predominantly flat, with no measured shadows. Separate content using whitespace and fine #d5d3d4 or dark hairline borders rather than floating cards. Dark panels, full-bleed images, and section bands provide depth through contrast and layering; buttons are rounded pills without a raised effect.

## Imagery

Use large, realistic travel photography: private jets, destination views, handpicked stays, and a human-scale travel-support moment. The hero image spans the viewport, while later photos sit in clean editorial splits or broad gallery frames. Keep treatment natural and cinematic rather than heavily filtered. The pale-blue CTA fade and terracotta solutions panel are measured graphic treatments; do not mistake colors inside photography or illustrations for core interface colours.

## Components

### Hero navigation

Compact links and circular menu control sit over the full-bleed opening image, alongside an oversized wordmark.

### Pill CTA

Use #000d10 fill, white bold text, and a fully rounded silhouette for primary actions; outlined white treatment appears over the hero.

### Editorial feature grid

A large left-aligned heading introduces four concise feature items arranged in two columns with thin rules.

### Solutions feature band

Combine dark and image-led panels with a distinct terracotta #bc7155 panel to present travel services.

### Destination list

Pair a destination photograph with a two-column list of city, airport code, country, and fine dividers.

### Image gallery

Show broad stay photography with a discreet white slide count and directional cue over the image.

### Footer

Use a #000d10 surface, white brand mark, muted navigation links, and compact legal information.

### Measured component styles

- **Primary button** (“Hyer® Stays”): background #000d10 · text #ffffff · radius 1000px · padding 14.7px 21.6px 16.1px 21.6px · 700 16.875px HelveticaNowDisplay
- **Secondary button** (“All Solutions”): transparent background · text #ffffff · border 1px solid #ffffff · radius 1000px · padding 14.7px 21.6px 16.1px 21.6px · 700 16.875px HelveticaNowDisplay
- **Link** (“Solutions”): transparent background · text #000d10 · radius 0px · padding 0px · 400 19.6875px HelveticaNowDisplay
- **Card** (“Carefully Selected Flights, stays and tr”): transparent background · text #000d10 · border 1px solid #000d10 · radius 0px · padding 22.5px 0px 67.5px 0px · 400 18px HelveticaNowDisplay
- **Navigation item** (“Hyer Stays”): transparent background · text #8e8e95 · radius 0px · padding 0px · 400 19.6875px HelveticaNowDisplay

## Do

- Keep the page canvas white and the core interface ink-dark.
- Use expansive travel photography as the main source of atmosphere.
- Set major headings large, bold, and tightly tracked.
- Build content with open two-column editorial splits.
- Use pill-shaped dark actions with white labels.
- Reserve terracotta and pale blue for measured accent moments.

## Don't

- Do not turn the page into a dense dashboard or boxed card grid.
- Do not add shadows or decorative elevation.
- Do not use the photographic palette as a replacement brand palette.
- Do not make muted navigation compete with headlines.
- Do not apply the terracotta accent broadly across sections.
- Do not crowd the hero with extra copy or interface controls.

## Agent prompt

Build a new page in Hyer’s restrained, editorial travel style. Use Gallery White (#ffffff) as the main canvas and Aviation Ink (#000d10) for text, links, dark bands, and pill CTAs; use Quiet Grey (#8e8e95) for secondary navigation and Cloud Line (#d5d3d4) for fine dividers. Set typography in HelveticaNowDisplay or a close Inter substitute, with oversized bold, tightly tracked headings and calm regular body copy. Organize content into spacious left-aligned two-column sections, balancing concise text with large, realistic travel photography. Allow hero imagery to run full bleed and use dark image-led bands selectively. Keep surfaces flat, with no shadows. Use Sky Haze (#d3e3f2) only as a soft CTA gradient and Terracotta Route (#bc7155) as a rare accent, not a general interface colour.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed aircraft hero with overlaid wordmark and navigation; supporting copy and paired pill actions sit near the bottom. | top navigation, menu control, paired calls to action | oversized wordmark, full-bleed image, dark pill buttons, white outlined button |
| 2 | feature-grid | Two-column editorial section with a prominent heading and a two-by-two set of concise benefits. | benefit scanning, short feature descriptions | bold headline, thin dividers, open white canvas |
| 3 | feature-split | Single-row, multi-panel solutions feature with dark, photographic, and terracotta-toned areas. | solution discovery, service links | contrasting panels, travel imagery, terracotta accent |
| 4 | gallery | White two-column section pairing a large destination photograph with a compact destination list. | destination browsing, airport-code identification | large photo, two-column list, fine dividers |
| 5 | feature-split | Dark split panel with a travel-support image on one side and heading and copy on the other. | reassurance through support, language availability | near-black surface, human-scale image, white heading |
| 6 | other | Standalone, oversized left-aligned heading on an open light section. | section transition | large bold typography, minimal surface |
| 7 | feature-grid | Two-column editorial split: narrative on the left and a two-by-two set of icon-led principles on the right. | principle scanning, contact link | small outlined icon tiles, bold labels, compact body copy |
| 8 | gallery | Broad stay photograph presented as a single large gallery frame with an overlaid slide indicator. | gallery progression | large landscape image, white slide count, directional cue |
| 9 | cta | Centered single-column closing call to action over a soft pale-blue fade. | final action prompt | large heading, subtle gradient, open space |
| 10 | footer | Dark footer band with brand and social links alongside grouped solution and company navigation. | social navigation, footer link groups | dark surface, white logo, muted links |
| 11 | footer | Continuation of the dark footer with copyright, policy links, headquarters details, and broker disclosure. | legal navigation, company disclosure | compact text, muted contrast, dark footer background |

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