North star · Let cinematic robot imagery carry the drama, and keep the warm-neutral interface, typography, and controls calm and precise.
The visual system balances an understated warm canvas with industrial, high-contrast robot footage. Gallery White (#f0eeeb) covers most informational sections, while Ink (#292827) anchors typography and the closing contact/footer band. Pale stone surfaces and fine gray borders keep cards and controls quiet rather than decorative; greens and blacks prominent in the screenshots belong chiefly to product photography, not the interface palette. Agility Diatype supplies clean, rounded sans-serif headlines and compact body copy, with a small monospace family reserved for uppercase labels and technical metadata. The page moves between a full-bleed cinematic hero, spacious text-led introduction, rounded video panels, a three-card capability row, a product showcase, and editorial resource cards. Generous breathing room separates these shifts, while thin rules and modest radii maintain a practical, engineered feel.
Display, headings, body copy, navigation, and buttons.
Aa 设计
Agility Diatype Mono
网络字体 · 字重 700 / 400 · 占比 10%
免费替代：Space Mono
Eyebrows, technical labels, and compact uppercase metadata.
角色
示例
字号
字重
行高
字距
特大标题
Oversized hero or product-display headline where used.
Agility
120px
400
1
-0.04em
一级标题
Primary page headline over the cinematic hero.
Agility
62px
400
0.93
-0.03em
二级标题
Major section headings and prominent resource or CTA titles.
Agility
36px
400
1
-0.03em
三级标题
Feature-card and supporting content headings.
Agility
28px
400
1
-0.02em
四级标题
Uppercase mono-style section labels and compact headings.
The quick brown fox 敏捷的狐狸
24px
400
1
0.03em
正文
Introductory copy, feature descriptions, and supporting paragraphs.
The quick brown fox 敏捷的狐狸
14px
400
1.25
-0.01em
辅助文字
Small image captions and supporting metadata.
The quick brown fox 敏捷的狐狸
13px
400
normal
-0.015em
导航
Compact top navigation labels.
The quick brown fox 敏捷的狐狸
14px
400
1
-0.01em
眉题
Tracked uppercase labels such as HUMANOID and FEATURES.
The quick brown fox 敏捷的狐狸
12px
700
1
0.06em
代码
Technical or specification-style uppercase labels.
const style = 1;
12px
700
1
0.06em
间距与布局
基准单位 2px · 密度：适中
55px版块间距
12px元素间距
27px卡片内边距
1330px内容最大宽度
3px
5px
6px
8px
10px
11px
12px
13px
15px
18px
30px
50px
55px
150px
The page uses a wide desktop canvas with content organized in broad horizontal bands and a measured maximum width of 1330px. The hero and major video moments run full bleed or nearly full width; text introductions, feature cards, specifications, and resource content sit in aligned columns. The system feels comfortable rather than dense, with a measured 55px section gap and 12px element gap. Alignment alternates between left-led editorial sections and centered calls to action. Repeated card rows provide a compact counterpoint to expansive media.
圆角与层次
按钮 · 6px
卡片 · 12px
图片 · 2px
导航 · 6px
链接 · 24px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is mostly flat, with no measured shadows. Separation comes from alternating warm and dark section backgrounds, delicate borders, and modest rounded corners: 6px buttons, 12px cards, and 2px media. Image overlays add depth inside the photography, not as a general UI elevation system.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Cinematic hero
Full-bleed video or photography with a small uppercase eyebrow, large white headline, light filled CTA, and playback control.
Primary CTA
Gallery White (#f0eeeb) fill with Soft Ink (#292827) text; measured 6px radius and a right-pointing arrow.
Outlined action
Transparent button with a 1px light or Quiet Rule (#c1beba) border and a measured 6px radius.
Capability cards
Three Pale Stone (#d6d3ce) cards with dark headings, concise body copy, and simple line diagrams.
Product showcase
Wide, light product panel with a centered Digit image, large title, compact technical specifications, and a download action.
Editorial resource cards
Small image-led cards in a four-column row, followed by compact title and metadata.
Dark contact panels
Two image-backed contact/resource links sit within the Soft Ink (#292827) closing band.
Imagery · Large, cinematic photography and video show Digit in warehouse, factory, and product settings. The hero uses dark, close-cropped footage with text overlaid near the lower left; later media panels show the robot in context, often with rounded corners and subtle overlays for legibility. Product imagery supplies the page’s teal-green and black color, while diagrams and resource portraits remain secondary supporting content.
Use Gallery White (#f0eeeb) as the main informational canvas.
Reserve Soft Ink (#292827) for primary text and the closing dark band.
Let robot footage provide the strongest color and visual drama.
Keep section labels compact, uppercase, and mono-styled.
Use fine borders and restrained rounded corners on controls and cards.
Alternate broad media moments with concise, well-spaced content.
✕ 不该做
Do not turn photographic teal or green into a brand UI accent.
Do not add decorative gradients across ordinary content sections.
Do not use heavy shadows or layered card elevation.
Do not crowd the spacious media-led section rhythm.
Do not make technical labels large or sentence-cased.
Do not replace the warm canvas with stark white everywhere.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new Agility-style product page with a calm industrial editorial feel. Use Gallery White (#f0eeeb) for the main canvas and Soft Ink (#292827) for text and the closing contact/footer section. Keep Pale Stone (#d6d3ce) for quiet capability cards and Quiet Rule (#c1beba) for thin borders. Use Agility Diatype or Inter for clean, regular-weight headlines and body copy; reserve tracked uppercase mono labels for small technical eyebrows. Lead with a full-bleed cinematic robot image or video, then alternate spacious text, compact feature cards, a product/specification showcase, and image-led resources. Let footage supply saturated color. Keep controls flat, corners modest, and spacing generous; avoid decorative shadows and extra accent colors.
