North star · Let real robot footage lead, then use restrained typography, rounded panels, and selective yellow accents to make each section immediately legible.
The visual strategy balances understated interface chrome with large, attention-grabbing media. White is the main canvas, while near-black panels create strong pauses and carry white text; warm off-white cards soften informational and product sections. Bright yellow marks high-visibility moments such as the announcement strip, hero action, and a prominent robotics section. The palette also includes quiet gray text and surfaces for secondary information. Yellix provides a consistent sans-serif voice: large, tightly tracked headings contrast with compact, readable body copy and small navigation labels. The layout is a spacious, long-form sequence of full-width media, logo proof, dark editorial statements, product displays, metrics, and calls to action. Rounded cards and pill controls keep the industrial subject matter approachable. Photography and video show robots in real workplaces and public settings; imagery, rather than decorative effects, supplies most of the page’s visual complexity.
Site-wide typeface for headings, body copy, navigation, links, and controls.
角色
示例
字号
字重
行高
字距
特大标题
Oversized hero or statement headings.
Robot.com
72px
500
1
-0.03em
一级标题
Primary page and major section headline.
Robot.com
52px
600
1.1
-0.02em
二级标题
Prominent feature and editorial section headings.
Robot.com
42px
600
1.1
-0.02em
三级标题
Product and subsection headings.
Robot.com
41px
600
1
-0.02em
四级标题
Secondary card and content headings.
Robot.com
38px
600
1.1
-0.02em
正文
Compact explanatory copy and supporting descriptions.
The quick brown fox 敏捷的狐狸
14px
500
1.16
0
辅助文字
Small metadata, qualifiers, and fine-print labels.
The quick brown fox 敏捷的狐狸
12px
500
1.1
-0.01em
按钮
Semibold pill action labels.
The quick brown fox 敏捷的狐狸
15px
600
1.16
0
导航
Prominent navigation and menu labels.
The quick brown fox 敏捷的狐狸
24px
600
1.25
-0.02em
链接
Inline actions such as product details and demo requests.
The quick brown fox 敏捷的狐狸
14px
500
1.16
0
间距与布局
基准单位 4px · 密度：宽松
300px版块间距
4px元素间距
24px卡片内边距
1430px内容最大宽度
1px
4px
5px
8px
11px
12px
14px
16px
18px
20px
21px
24px
40px
A spacious, vertically sequenced homepage uses broad media bands and content blocks, with measured page max width of 1430px. Most section headings align to the start rather than the center. Content shifts between single-column statements, multi-column proof and metric rows, and paired product presentations. Generous section separation creates pauses between stories, while cards use measured 24px padding. Keep text groups compact beside large images, and preserve clear transitions between white, warm-neutral, dark, and yellow areas.
圆角与层次
按钮 · 9999px
卡片 · 24px
导航 · 17px
链接 · 9999px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The design is primarily flat: measured shadow styles are absent. Separate content with contrasting section fills, rounded card silhouettes, and occasional fine borders rather than floating layers. Dark panels, image crops, and pill controls provide depth through contrast and overlap; keep card edges clean and avoid adding decorative drop shadows.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Announcement strip
A bright yellow rounded band above the hero, with a short launch message and an inline directional link.
Media hero
Large rounded video panel with overlaid white headline, yellow pill action, compact centered brand navigation, and a sales link.
Trust logo row
A short trust statement and partner logos arranged as a broad multi-column proof section.
Editorial statement panel
A near-black rounded panel pairing a small image with oversized muted-white statement text.
Product cards
Warm off-white rounded cards with concise robot descriptions, a restrained text link, and ample product imagery.
Category selector
Dark automation feature panel with a prominent active category and narrow adjacent vertical category tabs.
Partner CTA
Large near-black rounded module with a partner mark, oversized white copy, and a small white pill action.
Footer
Dark closing panel with compact multi-column navigation and a distinctive dotted robot-face graphic.
Imagery · Use real-world robot photography and video as the dominant visual material: workshop close-ups, delivery robots, warehouse scenes, and robots interacting with people. Frame hero media edge-to-edge inside a large rounded panel, and let product images occupy generous whitespace in product sections. Keep image treatment documentary and natural; yellow grids and other graphic motifs are section-specific accents, not replacements for photography.
Lead with authentic footage or photography of robots at work.
Use Signal Lemon (#fff65d) for a few high-priority moments.
Set major headings in tight, confident Yellix-style sans serif.
Use Workshop Ink (#262626) panels to create deliberate visual pauses.
Keep cards rounded and their copy concise.
Allow generous whitespace around product imagery.
✕ 不该做
Do not introduce gradients or decorative shadows.
Do not use yellow as a background for every section.
Do not center every heading or content block.
Do not crowd product photography with dense copy.
Do not make muted text compete with headlines.
Do not turn the documentary imagery into glossy abstract renders.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new page in Robot.com’s visual language: spacious, editorial, and grounded in real robotics footage. Use Gallery White (#ffffff) as the primary canvas and Workshop Ink (#262626) for confident inverse panels; reserve Signal Lemon (#fff65d) for one or two high-priority accents. Use Warm Porcelain (#f8f6f3) for soft information cards and Quiet Graphite (#6f6f6e) for supporting copy. Choose Yellix or a close sans-serif such as Manrope, with large tightly tracked headings and compact body copy. Compose broad media sections, left-aligned text, generous whitespace, rounded cards, and simple pill actions. Let authentic product imagery supply visual detail. Keep the page flat, avoid shadows and gradients, and alternate light and dark sections to create a clear reading rhythm.
