North star · Let human-centered, full-width imagery lead, and keep the interface quiet with pale neutrals, concise copy, and generous breathing room.
The page uses a light, nearly white canvas for most of its long-form story, interrupted by a dark opening hero and matching dark footer. Charcoal text and soft gray secondary copy keep the interface low-contrast and calm; white appears mainly on dark photographic overlays and compact controls. The palette’s additional gray steps belong chiefly to the measured gradient treatment, not a colorful brand scheme. ABCDiatype sans-serif carries the page, with a medium display face for prominent headings and uppercase, tracked micro-labels for navigation and eyebrow text. The layout is a single-column editorial sequence: centered statements, broad media, small feature groupings, and occasional multi-column image carousels. Large gaps separate sections, while media uses generous rounded corners. Photography and video show NEO alongside people, in domestic interiors, or in close-up product scenes; subdued overlays preserve legibility without adding decorative interface chrome.
Centered major section headlines, such as product benefits and feature stories.
1X Tech
56px
500
1.2
0
一级标题
Light-weight introductory and product title text.
The quick brown fox 敏捷的狐狸
24px
400
1.3
0
正文
Feature descriptions and explanatory copy.
The quick brown fox 敏捷的狐狸
20px
400
1.3
0
辅助文字
Uppercase micro-labels and media captions.
The quick brown fox 敏捷的狐狸
10px
400
1
0.128em
按钮
Purchase, FAQ, and other prominent action labels.
The quick brown fox 敏捷的狐狸
20px
400
1.3
0
导航
Small uppercase global navigation links.
The quick brown fox 敏捷的狐狸
11px
500
1.82
0.08em
眉题
Compact uppercase labels introducing product story sections.
The quick brown fox 敏捷的狐狸
10px
400
1
0.128em
间距与布局
基准单位 8px · 密度：适中
80px版块间距
16px元素间距
—卡片内边距
—内容最大宽度
8px
14px
16px
20px
22px
24px
28px
32px
40px
80px
A long single-column product narrative alternates centered copy with broad media and occasional feature or carousel groupings. The measured page uses comfortable density and a recurring generous section gap; preserve the spacious rhythm rather than compressing content. Text is commonly center-aligned over or near full-bleed imagery, while the final product/order area shifts to a two-column arrangement. The screenshots show media inset within the light canvas as well as edge-to-edge scenes. A page maximum width is not measured, so follow the screenshot’s broad, restrained proportions without assuming a fixed value.
圆角与层次
按钮 · 50%
链接 · 9999px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is mostly flat: the light canvas and dark bands carry the visual structure rather than shadows. Rounded media frames and pill-shaped buttons provide the principal shape contrast. Use measured charcoal borders on outlined actions, with fine, restrained rules only where the page needs separation; avoid stacked cards and pronounced elevation.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Global navigation
Minimal uppercase links over the hero, using the measured small medium-weight nav face and no visible boxed treatment.
Hero product story
Dark section band with full-bleed human-and-robot imagery and concise overlaid product identification and ordering action.
Media feature frame
Large photographic or video content set apart by generous whitespace and softly rounded framing.
Feature callouts
Small groups of short benefit headings and descriptions, aligned in columns with restrained iconography.
Pill actions
Rounded Order and FAQ controls; use a charcoal filled primary action and a light outlined secondary action.
Footer
Dark full-width band with a compact brand mark and grouped uppercase navigation and utility links.
Imagery · Use cinematic, naturalistic photography and video of NEO in lived-in homes, alongside people, and in close product detail. Large scenes anchor the story; smaller framed images support feature callouts and the product carousel. Keep color treatment subdued and realistic. Apply a dark gradient only where white copy sits over media, and avoid illustrations or decorative graphic overlays that compete with the robot.
Use #454545 for primary text and understated borders.
Reserve #222222 for dark section bands and footer areas.
Let real-life product photography and video dominate each feature.
Use centered, concise copy for the editorial feature sections.
Give full-width media and section transitions generous breathing room.
✕ 不该做
Do not introduce bright accent colors absent from the measured interface.
Do not turn the feature sequence into a dense dashboard or card grid.
Do not add heavy shadows or layered panels.
Do not use oversized decorative icons in place of product imagery.
Do not place long blocks of copy over photographs.
Do not treat gradient gray stops as separate brand accents.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new product-story page in the 1X Tech NEO visual style. Use Gallery Mist (#f7f7f7) as the main canvas, Soft Charcoal (#454545) for readable copy and restrained borders, and Deep Graphite (#222222) for occasional dark bands. Use Clean White (#ffffff) for inverse text and controls where needed. Set typography in a clean sans-serif close to Inter, with medium-weight display headings and small uppercase tracked navigation or eyebrow labels. Organize the page as a spacious editorial sequence: concise centered copy, wide naturalistic product photography or video, and compact feature groups. Give media soft rounded framing and let real home scenes provide warmth. Keep controls pill-shaped and understated. Avoid decorative colors, heavy shadows, dense cards, and excessive interface chrome; use dark image overlays only to support legibility.
