North star · Keep the interface quiet and spacious so that curated imagery feels discovered, not presented as a conventional storefront.
The visual system is built on a warm off-white canvas (#f4f3f0), used across most of the page to keep attention on the content rather than on interface chrome. Near-black (#1a1915) carries the central headline, wordmark, and other primary text; muted gray (#82868e) is reserved for secondary information. A single sharp lime (#e3f794) punctuates the otherwise restrained palette, appearing in the sign-up control and as a large, graphic closing band. Beausite supplies the approachable, clean sans-serif voice for headings and body copy, while DM Mono gives compact uppercase captions and metadata an editorial index-card quality. Product and lifestyle photographs are placed as small, loose, asymmetric fragments in the hero, then organized into a more legible collection grid. The generous blank intervals between page sections make the long scroll feel deliberate and gallery-like. White is used as a distinct panel surface for the collection rather than as the default canvas.
Uppercase captions, eyebrows, and compact collection metadata
Aa 设计
CM Geom
网络字体 · 字重 400 · 占比 3%
免费替代：Bodoni Moda
Oversized display lettering
角色
示例
字号
字重
行高
字距
特大标题
Oversized display lettering for expressive, large-scale moments.
Telescope
250px
400
1
-0.002em
一级标题
Main hero headline and prominent section heading.
Telescope
57px
400
1.15
-0.007em
二级标题
Collection and supporting section titles.
The quick brown fox 敏捷的狐狸
23px
400
1.05
-0.017em
正文
Introductory copy and recommendation descriptions.
The quick brown fox 敏捷的狐狸
19px
400
1.15
-0.02em
辅助文字
Compact labels, item credits, and collection metadata.
The quick brown fox 敏捷的狐狸
12.5px
400
1.1
0.03em
眉题
Uppercase pre-heading labels such as Collection.
The quick brown fox 敏捷的狐狸
12.5px
400
1.1
0.03em
代码
Small monospaced utility or metadata labels.
const style = 1;
12.5px
400
1.1
0.03em
间距与布局
基准单位 2px · 密度：宽松
225px版块间距
48px元素间距
—卡片内边距
602px内容最大宽度
6px
7px
10px
14px
19px
24px
29px
41px
48px
108px
135px
The page uses a spacious single-column scroll with a measured content max width of 602px, while the hero imagery and closing color field read broadly across the canvas. The opening headline is centered amid dispersed image fragments; later collection content sits on a white panel with a denser multi-column product arrangement. Sections are separated by unusually generous vertical intervals, preserving a slow, gallery-like rhythm. Keep alignment varied but intentional: centered for the introduction, structured for product browsing, and expansive at the close.
圆角与层次
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is predominantly flat: no measured shadows or prominent borders define its surfaces. Separate the white collection panel from the warm canvas through color contrast and generous surrounding space. Use image placement and the sharp change to lime at the closing section as the primary layering devices.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Floating hero imagery
A loose arrangement of small, asymmetric photographs around a centered headline on the warm canvas.
Bottom-centered signup bar
A compact white bar anchors the hero, pairing the Telescope wordmark and login text with a lime sign-up control.
Collection introduction
A small monospaced Collection eyebrow precedes a centered title, short description, and compact freshness metadata.
Product collection grid
A white panel organizes product photos with short names and understated maker labels in a multi-column arrangement.
Product quick action
Small, unobtrusive square controls sit alongside product imagery without overpowering the item.
Lime closing field
A large vivid lime section uses a bold, graphic shape against the otherwise pale page.
Imagery · Use real product and lifestyle photography rather than decorative illustration. In the hero, frame images as small, unevenly distributed glimpses with varied crops and ample space around them. In the collection, give product images room to read clearly in a structured grid, with concise names and maker details nearby. Keep imagery natural and editorial; avoid uniform mockup treatments.
Scatter hero photos asymmetrically with generous breathing room.
Give the collection a distinct white surface.
✕ 不该做
Do not add decorative gradients or shadows.
Do not turn the hero into a conventional banner.
Do not use lime as a general background color.
Do not crowd imagery with labels or controls.
Do not make secondary copy compete with the headline.
Do not replace editorial photography with generic illustrations.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new discovery page in Telescope’s editorial style. Use Warm Gallery (#f4f3f0) as the main canvas, Soft Ink (#1a1915) for primary text, Quiet Slate (#82868e) for supporting details, and Clean Paper (#ffffff) for a distinct content surface. Apply Signal Lime (#e3f794) sparingly to a primary action or bold closing element. Use a clean Beausite-like sans for headlines and body copy, with a widely tracked monospaced face for uppercase metadata. Start with a centered message and loosely scattered real photographs, then shift to a clear, image-led collection grid. Preserve generous whitespace and long pauses between sections. Keep surfaces flat, avoid ornamental borders and shadows, and let image framing, typography, and negative space create the hierarchy.
