North star · Keep the interface as quiet as warm paper, and let expressive notebook imagery carry the story.
The page uses a nearly continuous warm off-white canvas, with a pale cream band reserved for the privacy section. Dark espresso-brown anchors the oversized display lettering, interface copy, and hand-drawn outlines; muted gray-brown supports secondary text. The measured blue, pink, and green accents are sparse and appear mainly as small illustrative or annotated details, not as broad interface fills. Gelica gives headings and navigation a soft, rounded editorial character, while Geist keeps supporting copy crisp and legible. The layout alternates oversized product scenes with restrained text, then uses small doodles and notebook annotations to add personality without crowding the page. Generous vertical pauses create a slow, gallery-like rhythm. Borders are thin or hand-drawn in appearance, and cards stay close to the paper palette. The notebook artwork supplies most of the page’s richer color and visual texture.
Display headings, section headings, and navigation; contributes the page's friendly editorial voice.
Aa 设计
Geist
网络字体 · 字重 400 / 500 · 占比 42%
免费替代：Inter
Body copy and caption-level supporting text.
角色
示例
字号
字重
行高
字距
特大标题
Oversized hero display lettering and expressive headline moments.
Superr
104px
600
1.08
0
一级标题
Primary page headline and prominent section titles.
Superr
46px
400
1.2
0
二级标题
Major feature and product-section headings.
Superr
40px
400
1.2
0
三级标题
Secondary section titles and feature group headings.
Superr
36px
400
1.2
0
四级标题
Small section or card-level headings.
Superr
32px
400
1.2
0
正文
Explanatory product copy and supporting descriptions.
The quick brown fox 敏捷的狐狸
20px
400
1.5
0
辅助文字
Short annotations, labels, and secondary supporting text.
The quick brown fox 敏捷的狐狸
18px
500
1.5
0
导航
Header navigation and compact navigation actions.
The quick brown fox 敏捷的狐狸
20px
500
1.5
0
间距与布局
基准单位 4px · 密度：适中
90px版块间距
12px元素间距
10px卡片内边距
720px内容最大宽度
4px
8px
10px
11px
12px
16px
20px
24px
28px
32px
40px
58px
90px
Use a restrained centered page frame, with measured content max width of 720px for text-led areas and broader, full-bleed product media where the composition calls for it. Keep headlines centered or left-aligned according to each section’s story. The page moves through long, quiet vertical intervals, interrupted by large media scenes and concise feature content. Favor a comfortable, low-density layout; use the measured 90px section rhythm and compact 12px element gaps as reference points rather than filling open space.
圆角与层次
按钮 · 20px
卡片 · 12px
图片 · 12px
导航 · 16px
md · card
hairline · button
sm · card
The page is predominantly flat and paper-like, without heavy shadows or elevated dashboard cards. Use dark, clearly defined outlines for selected notebook or content cards, with gentle measured shadows only when a card needs separation. Preserve layering within product imagery rather than adding interface depth.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Hero product scene
Asymmetric two-column opening: a large left-aligned title and short copy sit beside an oversized notebook illustration on the warm canvas.
Pre-order action
Compact outlined pill button with a dark border, Gelica label, and subdued supporting availability text beneath.
Feature contents card
Paper-toned card with a 2px espresso outline, 12px corners, and a concise list of notebook capabilities.
Illustrated feature labels
Small handwritten-style captions and doodles surround feature imagery; use accent color sparingly for emphasis.
Privacy section
A pale blush parchment band centers a handwritten no-list image, with a concise heading and supporting line.
Notebook gallery
Large, cropped notebook covers and playful annotations create a showcase without conventional product-card framing.
Closing handoff scene
Illustrated hands pass a notebook across a spacious canvas, pairing the product image with a short editorial message.
Imagery · Treat the notebook as the hero: large, tactile product artwork with visible covers, handwriting, labels, pencils, and page details. Full-bleed scenes include a notebook in a flowered meadow, while later sections use small hand-drawn icons and product variations. Keep images softly integrated against the pale canvas; use doodles and annotations as illustrations, not decorative interface chrome.
Set major headings in a friendly, expressive serif.
Let product artwork occupy generous space.
Keep body copy concise and clearly secondary.
Use Espresso Ink (#2b1a07) for strong text and outlines.
Reserve blush surface for a distinct section band.
Treat accent colors as small illustrative highlights.
✕ 不该做
Do not turn the page into a dense SaaS dashboard.
Do not use large saturated accent-color backgrounds.
Do not crowd the long vertical pauses with extra content.
Do not replace the notebook artwork with generic stock photography.
Do not add heavy shadows to every card or button.
Do not force every section into the same centered grid.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new product page in Superr’s warm, paper-led visual style. Use Warm Paper (#fdfbf9) for the main canvas, Espresso Ink (#2b1a07) for expressive headings and outlines, and Blush Parchment (#f7efe9) only where a section needs a soft band. Set editorial headlines in Gelica or a close Fraunces substitute; use Geist or Inter for clear supporting copy. Keep text concise and let large, tactile notebook imagery lead. Add sparse hand-drawn notes and small Notebook Blue (#3b82f6), Petal Pink (#ff66cf), or Garden Green (#22c55e) details. Preserve long vertical breathing room, varied section compositions, and lightweight outlined actions. Avoid dashboard density, loud color blocks, generic photography, and unnecessary elevation.
