North star · Let calm, oversized typography and real-life robot footage lead, with restrained color and ample breathing room.
The page begins with a near-white canvas, a compact centered navigation capsule, and a very large, regular-weight headline that gives Memo a clear introduction without decorative noise. Dark ink text and fine pale borders define the interface; broad black and charcoal bands create contrast for technology storytelling, while the final warm off-white panel softens the close. Sans-serif display and body text stay unembellished, with tight headline tracking and a small monospaced voice for captions and technical labels. The layout favors generous vertical pauses, wide video frames, and staggered editorial arrangements over dense card grids. Real-home footage carries the emotional and product story: rounded media corners and subtle overlays keep titles readable while preserving the footage’s natural, warm tones. Pale sage is a restrained supporting surface, not a dominant brand accent.
Headlines, navigation, and general interface and body copy.
Aa 设计
mono
网络字体 · 字重 400 · 占比 19%
免费替代：IBM Plex Mono
Small captions, badges, and technical or media labels.
角色
示例
字号
字重
行高
字距
特大标题
Oversized editorial phrases in the long-form feature storytelling.
Sunday
142px
400
1
-0.025em
一级标题
Primary hero headline, “Say hello to Memo.”
Sunday
120px
400
1
-0.025em
二级标题
Major feature-section headlines and prominent statements.
Sunday
104px
400
1
-0.025em
三级标题
Secondary feature headlines and large media overlays.
Sunday
84px
400
1.1
-0.025em
四级标题
Supporting editorial headings and card titles.
Sunday
42px
400
1.15
-0.025em
正文
Introductory product explanation and feature descriptions.
The quick brown fox 敏捷的狐狸
18px
400
1.4
0
辅助文字
Monospaced video captions, badges, and small metadata.
The quick brown fox 敏捷的狐狸
14px
400
1.2
0.025em
导航
Prominent navigation labels and expanded navigation treatment.
The quick brown fox 敏捷的狐狸
24px
400
1.33
-0.025em
代码
Technical or compact metadata labels in monospaced text.
const style = 1;
14px
400
1.2
0.025em
间距与布局
基准单位 4px · 密度：宽松
96px版块间距
8px元素间距
—卡片内边距
684px内容最大宽度
3px
4px
5px
6px
8px
10px
12px
14px
16px
20px
24px
96px
Use a spacious, vertically scrolling editorial composition, with a measured page max width of 684px for constrained content and full-bleed media where the layout calls for it. Center the hero heading and keep navigation compact and centered. Alternate between broad single-column media moments and staggered two-column feature arrangements. The measured section rhythm is generous, with a 96px section gap and an 8px element gap as reference units. Maintain a low-density feel: large pauses, simple alignments, and no unnecessary columns or controls.
圆角与层次
按钮 · 9999px
卡片 · 12px
图片 · 4px
徽标 · 4px
导航 · 9999px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is mostly flat, without measured shadows. Separate content with whitespace, pale hairlines, and changes between white, black, charcoal, and warm off-white surfaces. Media and cards use restrained rounded corners; the compact navigation capsule gets a faint border rather than a pronounced floating shadow.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Centered navigation capsule
Compact, centered white nav with the Sunday mark and menu control; fine pale border, rounded capsule silhouette, and dark labels.
Hero heading
Centered oversized regular sans headline on white, with a small supporting announcement above and substantial breathing room.
Full-width video feature
Large rounded video frame with a short white headline overlaid on footage when contrast allows.
Editorial feature row
Pair explanatory copy with a large video or image, then use smaller supporting media tiles where useful.
Media badge
Small monospaced label over a media frame, using white text and a restrained dark outline or contrast treatment.
Dark technology band
Long charcoal or black section for technology storytelling, with media, light copy, and minimal interface chrome.
Real-use panel
Warm off-white panel introducing product-use details through large type and a horizontally arranged set of image-led cards.
Imagery · Use wide, rounded-corner video and photographic frames showing Memo performing household tasks in lived-in rooms. Keep footage natural and warm, with practical crops that make the robot and task legible. Overlay occasional large white headlines directly on darker footage. Avoid replacing the real-home material with abstract illustration; warm orange, wood, and household colors belong primarily to the imagery.
Use regular-weight sans typography and tight headline tracking.
Let real household video carry the product story.
Reserve black and charcoal for distinct storytelling bands.
Use pale borders as quiet separators.
Leave generous vertical pauses between major moments.
✕ 不该做
Do not add bright interface colors beyond measured palette values.
Do not crowd the page with dense card grids.
Do not apply heavy shadows or layered effects.
Do not make monospaced labels the dominant type voice.
Do not treat orange tones in footage as core brand colors.
Do not overdecorate the navigation or CTA surfaces.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new Sunday-style page with a quiet editorial rhythm: begin on Gallery White (#ffffff), use Sunday Ink (#1a1a1a) for clear, regular-weight sans headlines and body copy, and keep headings oversized with tight tracking. Pair the hero with compact centered navigation and a small, restrained supporting label. Use broad, rounded real-home video or photography as the main storytelling device; let household warmth come from the footage, not added UI colors. Break up the scroll with selective Deep Stage (#000000) or Charcoal Stage (#333333) sections, and use Warm Gallery (#f3f3f0) for a soft closing surface. Keep borders Quiet Hairline (#e8e8e8), metadata small and monospaced, and layouts spacious with staggered media-and-copy arrangements. Avoid shadows, dense grids, and unnecessary decoration.
