North star · Let oversized editorial type and immersive travel imagery lead, while keeping interface colour and decoration restrained.
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.
Shared display, heading, body, navigation, link, caption, and button typeface.
角色
示例
字号
字重
行高
字距
特大标题
Oversized wordmark-style hero typography.
Hyer Aviation
187px
700
0.8
-0.02em
一级标题
Primary hero statement and major page headline.
Hyer Aviation
131px
700
1
-0.02em
二级标题
Section titles such as the editorial travel approach.
Hyer Aviation
63.5px
700
1
-0.02em
三级标题
Feature and destination section headings.
Hyer Aviation
60px
700
0.91
-0.02em
四级标题
Secondary feature and card headings.
Hyer Aviation
52px
700
1
-0.01em
正文
Introductory copy, explanations, and supporting content.
The quick brown fox 敏捷的狐狸
19.5px
400
1.1
0
辅助文字
Small descriptive labels and compact image or feature copy.
The quick brown fox 敏捷的狐狸
17px
400
1.2
0.01em
按钮
Bold text inside dark pill-shaped calls to action.
The quick brown fox 敏捷的狐狸
17px
700
1
0
导航
Header navigation and footer navigation links.
The quick brown fox 敏捷的狐狸
19.5px
400
1
0
链接
Inline and section-level navigation links.
The quick brown fox 敏捷的狐狸
19.5px
400
1.2
0
间距与布局
基准单位 1px · 密度:适中
52px版块间距
4px元素间距
23px卡片内边距
1320px内容最大宽度
13px
15px
16px
17px
19px
21px
22px
23px
31px
38px
45px
51px
52px
53px
58px
60px
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.
圆角与层次
按钮 · 50%
链接 · 9999px
没有测到阴影:页面是扁平的,层次靠底色和描边区分。
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.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建(字体用替代字体)。
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.
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.
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.
✕ 不该做
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.
给 AI 的提示词
想快速出一个同风格的新页面,把这段话连同 DESIGN.md 一起发给 AI。
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.