North star · Let large, lifelike robot imagery carry the story, using monochrome type and open space as a quiet frame.
The visual strategy puts the robot ahead of decoration: a white canvas and near-black type frame large, carefully lit product photography, while black full-bleed sections create cinematic pauses. Color stays tightly controlled. Gallery White (#ffffff) carries the open product and footer areas; Figure Ink (#0c0c0c) handles headings, body copy and the primary signup action; Pure Black (#000000) marks media bands. Graphite (#6d6d6d) and Hairline Grey (#cecece) are reserved for secondary text and navigation separators. Display headlines use uppercase, geometric-looking lettering with a technical edge, contrasted by a more neutral sans for practical copy. The first screen balances an oversized robot crop on the left with a large title and short description on the right. Later sections use full-width video, subtle text overlays and sparse captions. Thin rules, generous open areas and restrained controls keep attention on the product rather than interface chrome.
Body copy, supporting headings, captions, and button labels.
Aa 设计
pp-neue-machina-plain
网络字体 · 字重 400 · 占比 26%
免费替代：Space Mono
Display and section headings, plus uppercase navigation labels.
角色
示例
字号
字重
行高
字距
特大标题
Oversized uppercase Figure 03 hero title.
Figure
122px
400
1
-0.01em
一级标题
Primary product and section headlines.
Figure
52px
400
1.11
0
二级标题
Uppercase secondary section headings.
Figure
28px
400
1.11
0
三级标题
Supporting feature and content headings.
The quick brown fox 敏捷的狐狸
22px
400
1.1
-0.01em
正文
Product explanation and longer supporting copy.
The quick brown fox 敏捷的狐狸
17px
400
1.6
-0.01em
辅助文字
Compact specifications and media descriptions.
The quick brown fox 敏捷的狐狸
16px
400
1.5
-0.01em
按钮
Signup and other action labels.
The quick brown fox 敏捷的狐狸
14px
500
1.2
0
导航
Uppercase primary navigation items.
The quick brown fox 敏捷的狐狸
14px
400
1
0.02em
间距与布局
基准单位 4px · 密度：适中
48px版块间距
8px元素间距
—卡片内边距
1344px内容最大宽度
4px
5px
8px
16px
20px
24px
28px
32px
40px
48px
56px
60px
80px
The page uses a single-column sequence of broad, full-width sections, with the robot hero arranged as an image-and-copy composition rather than a boxed card. The measured page max width is 1344px, while media sections run edge to edge. Hero copy sits beside the product image; specification labels align along fine horizontal rules. Spacious white sections alternate with black video bands, followed by a footer divided into signup and navigation areas. The overall density is comfortable, with open margins and sparse copy.
圆角与层次
按钮 · 9999px
导航 · 8px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is predominantly flat, with no measured shadows. Separation comes from switching between white canvas and black media bands, plus fine grey rules around navigation and specifications. Video, text overlays and robot photography provide depth through lighting and contrast, not raised cards or layered UI effects.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Primary navigation
Sparse uppercase links over the hero, using the technical display face; subtle separators and a restrained translucent-looking treatment let the product remain prominent.
Product hero
Large robot image anchors the left side; an oversized uppercase product title and brief explanatory copy sit on the right.
Specification list
Right-aligned product metrics are separated by fine horizontal rules, with compact labels and prominent values.
Full-bleed video
Edge-to-edge footage occupies black sections, with concise white headings and supporting copy layered over the image.
Primary signup button
Filled Figure Ink (#0c0c0c) with white text, a pill-shaped outline, and medium-weight sans-serif label.
Footer
White, spacious closing area with Figure wordmark and signup content on one side and a numbered navigation list with fine separators on the other.
Imagery · High-contrast, photorealistic robot imagery is the page’s defining visual asset: close product framing introduces the model, while full-bleed video shows it in domestic and workplace environments. Bright studio lighting preserves detail in the fabric body and glossy black face. Dark overlays and white captions help text sit over footage. The imagery is photographic and cinematic rather than illustrative; incidental greys belong to the robot and scenes, not a separate brand palette.
Keep the interface palette monochrome and anchored in the measured colors.
Give the robot imagery the strongest visual presence.
Use uppercase technical display type for major headlines and navigation.
Pair display lettering with clear, neutral sans-serif copy.
Alternate open white areas with cinematic black media bands.
Use fine rules to organize specifications and footer links.
✕ 不该做
Do not introduce bright accent colors or decorative gradients.
Do not put the hero inside a conventional bordered card.
Do not compete with the robot using ornamental graphics.
Do not crowd open sections with dense copy or controls.
Do not use heavy shadows to simulate interface depth.
Do not treat greys in the photography as additional brand colors.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new page in Figure’s restrained humanoid-robot launch style. Use Gallery White (#ffffff) as the main canvas, Figure Ink (#0c0c0c) for typography and primary actions, and Pure Black (#000000) for full-bleed media sections. Keep Graphite (#6d6d6d) for muted copy and Hairline Grey (#cecece) for delicate separators. Lead with a large, lifelike robot image and concise uppercase display headline; use technical display lettering for headlines and navigation, balanced by a neutral sans for readable copy. Favor broad, open layouts, sparse labels, fine rules, and cinematic imagery over cards or decoration. Alternate bright product presentation with dark video storytelling, and finish with a structured footer. Preserve strong contrast and let photography—not added color—supply visual richness.
