North star · Let cinematic freight imagery command attention, then use restrained typography, white space, and precise blue accents to make the technology feel credible.
The visual strategy alternates expansive cinematic media with quiet, bright editorial sections. White is the primary canvas, while near-black frames the hardware and truck imagery; a later black integration section and saturated blue closing panel provide deliberate contrast. Deep navy carries headings and key interface text, and electric blue marks primary actions, links, and small navigation cues. Inter supplies the large, tightly tracked headline and compact supporting copy; IBM Plex Mono appears sparingly in uppercase technical labels and metrics. Layouts feel spacious and confident, using a broad centered content area, left-aligned headlines, and measured gaps between sections. Product and road imagery is presented large and clean, often against pale, low-detail scenes that let the vehicle remain prominent. Cards and buttons use modest rounded corners, while fine borders and flat surfaces keep the interface crisp rather than ornamental.
Display headlines, section titles, body copy, navigation, links, and buttons.
Aa 设计
IBM Plex Mono
网络字体 · 字重 600 · 占比 9%
免费替代：IBM Plex Mono
Uppercase eyebrow labels, technical captions, and compact performance metrics.
角色
示例
字号
字重
行高
字距
特大标题
Oversized hero headline over cinematic media.
Aurora
90px
600
0.97
-0.04em
一级标题
Primary page or major section headline.
Aurora
44px
600
0.95
-0.03em
二级标题
Section titles such as capability and integration headings.
Aurora
36px
600
0.96
-0.03em
正文
Prominent explanatory copy and testimonial text.
The quick brown fox 敏捷的狐狸
20px
600
1.2
-0.04em
辅助文字
Compact supporting descriptions and image captions.
The quick brown fox 敏捷的狐狸
14px
500
1.4
-0.03em
导航
Top navigation links and menu labels.
The quick brown fox 敏捷的狐狸
14px
600
1.3
-0.04em
链接
Inline actions such as fleet and video links.
The quick brown fox 敏捷的狐狸
14px
600
1.3
-0.04em
眉题
Uppercase technical labels above section content.
The quick brown fox 敏捷的狐狸
9px
600
1.2
0.16em
代码
Small monospace metric and technical-style labels.
const style = 1;
9px
600
1.2
0.16em
间距与布局
基准单位 4px · 密度：适中
80px版块间距
16px元素间距
—卡片内边距
1350px内容最大宽度
2px
4px
8px
10px
12px
14px
16px
18px
20px
24px
32px
34px
36px
44px
45px
48px
Use a broad centered content region capped by the measured page max width, with comfortable density and clear separation between major sections. The page moves from full-bleed hero media to airy single-column editorial content, then product and capability showcases, a two-column testimonial, and logo rows. Most headings align to the left; cards and imagery sit within the grid rather than filling every section. Preserve the measured section rhythm and generous gaps, with tighter spacing reserved for related controls and labels.
圆角与层次
按钮 · 8px
卡片 · 8px
导航 · 8px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is mostly flat: no measured shadows define the system. Use subtle borders for separators and logo rows, pale surfaces for cards, and modest rounded corners on cards and buttons. Create depth through dark video, image crops, and contrast between section backgrounds rather than stacked panels or heavy shadow.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Primary CTA
Electric blue #006aed button with white text, an 8px radius, and compact Inter semibold labeling; use for the main contact action.
Dark secondary button
Midnight Navy #001733 button with white text and an 8px radius, used for secondary actions such as the safety approach.
Hero media card
Small rounded video preview over the hero footage, with a compact title, watch cue, and blue circular forward action.
Metric strip
Four terse performance facts aligned along the hero base; present labels in tiny, tracked uppercase monospace.
Feature card
Pale #f3f4f8 surface with Midnight Navy content and an 8px corner radius; keep decoration minimal.
Capability gallery
A row of large driving-scene thumbnails with blue play controls and short descriptive captions.
Partner logo rows
Monochrome partner marks arranged in aligned columns, separated by fine #e6e9f0 hairlines.
Imagery · Prioritize cinematic video and high-quality truck, road, and autonomous hardware imagery. The hero uses dark, full-width footage with a large white headline and a compact video card. Product imagery can contrast against bright, nearly monochrome environments; capability cards use framed driving scenes. Keep overlays restrained and avoid decorative illustration—measured gradient colors are transition artifacts, not the core brand palette.
Reserve Aurora Blue for actions, links, and selected bands.
Keep headings left-aligned and tightly tracked.
Use IBM Plex Mono only for compact technical labels.
Create depth with imagery and contrast, not shadows.
✕ 不该做
Do not introduce unmeasured colors into the interface palette.
Do not make every section dark or saturated blue.
Do not add heavy shadows or decorative gradients.
Do not use playful illustration in place of real vehicle imagery.
Do not turn technical labels into large display text.
Do not crowd the page with dense card grids.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new Aurora-style page with a cinematic freight or autonomous-hardware hero, then transition into calm editorial content on Gallery White (#ffffff). Use Midnight Navy (#001733) for headings and controls, Slate Muted (#68748d) for supporting copy, and Aurora Blue (#006aed) selectively for the primary CTA and links. Use Mist Surface (#f3f4f8) for restrained cards and Cloud Hairline (#e6e9f0) for fine dividers. Keep Inter as the main sans-serif with tightly tracked semibold headlines; reserve IBM Plex Mono for tiny uppercase metrics and eyebrows. Favor broad centered layouts, left-aligned titles, ample section separation, and large authentic truck imagery. Use Stage Black (#000000) only where cinematic contrast supports the story. Keep surfaces flat, corners modest, and interaction cues clear.
