North star · Let cinematic aircraft media and an uninterrupted electric-blue canvas do the storytelling, with cream typography as the only strong interface contrast.
The visual strategy is built around a saturated blue canvas (#007ae5) that continues well beyond the opening hero, making the page feel like one expansive brand environment. A cinematic aircraft video supplies the warm, atmospheric contrast; its natural beige and charcoal tones belong to the footage, not the core interface palette. Cream (#f5f4df) carries navigation, hero lettering, supporting copy and fine outlines, so content remains legible against blue and over dark video. Display headlines use Joby’s custom display face at a large scale, with tight negative tracking and compact line spacing. Text is sparse and centered over the hero, while the next section shifts to a broad, restrained headline and small edge-positioned labels. A floating blue tour card sits over the footage as a compact editorial promotion. The interface favors open space, full-bleed media, clean alignment and selective layering over dense grids or decorative UI.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
表层色
中性色
页面底色 · Electric Horizon表层 · Flight Cream主文字 · Night Ink次要文字 · Flight Cream描边 · Flight Cream强调 · Electric Horizon
文字
背景
对比度
WCAG
#0e1620 Night Ink
#007ae5 Electric Horizon
4.26:1
AA-large
#0e1620 Night Ink
#f5f4df Flight Cream
16.36:1
AAA
#f5f4df Flight Cream
#007ae5 Electric Horizon
3.84:1
AA-large
#007ae5 Electric Horizon
#f5f4df Flight Cream
3.84:1
AA-large
字体
字号阶梯：Custom（比例约 3.19，正文 14px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
jobyText
网络字体 · 字重 450 / 400 / 550 / 500 · 占比 58%
免费替代：Inter
Navigation, body copy, captions and promotional card text.
Aa 设计
jobyDisplay
网络字体 · 字重 550 · 占比 22%
免费替代：Manrope
Oversized hero and section headlines.
Aa 设计
Joby Sans Display
系统字体 · 字重 500 · 占比 20%
免费替代：Manrope
System-served display fallback for branded display text.
角色
示例
字号
字重
行高
字距
特大标题
Extra-large statement typography for prominent brand messaging.
Joby Aviation
142.5px
550
1
-0.03em
一级标题
Main hero headline, set across two compact lines.
Joby Aviation
80px
550
1
-0.03em
正文
Short supporting copy and promotional card details.
The quick brown fox 敏捷的狐狸
14px
400
1.3
-0.01em
辅助文字
Small secondary labels and supporting annotations.
The quick brown fox 敏捷的狐狸
12px
450
1.2
-0.02em
导航
Top-level navigation labels, including the Investors link.
The quick brown fox 敏捷的狐狸
16px
500
0.89
-0.02em
间距与布局
基准单位 4px · 密度：适中
32px版块间距
24px元素间距
—卡片内边距
1360px内容最大宽度
7px
10px
12px
14px
15px
16px
24px
32px
40px
46px
188px
The opening is a full-bleed, single-column media hero with navigation overlaid at the top and a centered headline anchored near its lower edge. The aircraft video has a curved lower boundary that reveals the blue canvas beneath it. A small promotional card floats near the upper-right of the hero. The page remains spacious and visually sparse through a long blue section; the following block centers a large headline and places small supporting links toward opposite edges. Measured page max width is 1360px, with comfortable density.
圆角与层次
卡片 · 16px
hairline · button
lg · card
Most of the page is flat blue, with no decorative gradients or repeated card grid. Layer the promotional card above hero media with a soft, deep shadow and rounded corners. Its fine light border separates the card from the image. Keep other interface elements visually light and avoid adding unnecessary elevation.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Overlay navigation
Place a cream menu mark at the upper left, a small brand symbol near the top center, and the Investors link at the upper right over the hero media.
Video hero
Use full-bleed aircraft footage, a curved lower media edge, and a centered cream two-line headline near the bottom.
Tour promotion card
Float a blue card over the hero with cream copy, aircraft imagery, a fine light border, 16px radius, and a soft shadow.
Hero supporting caption
Center a small cream sentence beneath the video on the blue canvas, separated from the headline.
Statement section
Set a broad cream headline centered on the uninterrupted blue background, with small secondary links near opposing edges.
Imagery · Use cinematic video or high-quality aircraft photography as the primary visual, showing the eVTOL in an atmospheric urban setting. Frame the aircraft large against a warm, muted sky and skyline, with the media spanning nearly the full viewport. Preserve natural footage color rather than applying blue tinting; the vivid interface canvas provides the contrast. Small aircraft illustrations appear within the tour promotion card.
Set interface text in #f5f4df over blue and dark media.
Make the aircraft video the primary first-screen focal point.
Keep display headlines large, centered and tightly tracked.
Overlay navigation lightly instead of creating a separate header band.
Reserve card styling for focused promotional content.
✕ 不该做
Do not turn warm footage colors into additional interface brand colors.
Do not fill the blue sections with unnecessary content or decoration.
Do not introduce gradients absent from the measured design.
Do not add dense grids, multiple competing cards or heavy borders.
Do not use small, loose-tracked display headlines.
Do not make the interface rely on shadows for every element.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new Joby Aviation page using a vivid Electric Horizon canvas (#007ae5) as the main visual field, with Flight Cream (#f5f4df) for navigation, headlines, captions and fine outlines. Keep Night Ink (#0e1620) limited to appropriate dark text on light surfaces. Lead with cinematic, full-bleed aircraft media in natural warm tones; overlay a minimal top navigation and an oversized, tightly tracked Joby-style display headline. Give the media a distinctive curved lower edge where it meets the blue page. Use Joby-like display and text fonts, substituting Manrope and Inter if unavailable. Keep content sparse, aligned and spacious. Add a single floating promotional card only when useful, with restrained border and shadow. Avoid gradients, dense grids and decorative UI.
