Abel 首页以克制的黑白排版，搭配沉浸式香氛与生活方式影像。页面通过满版视觉讲述品牌故事，再引导用户探索产品、了解环保理念并订阅邮件。
North star · Let immersive fragrance photography lead, while keeping the interface nearly monochrome, flat, and typographically restrained.
The page uses a quiet palette of white, near-black, pale warm beige hairlines, and a light-gray band that appears behind the compostable-caps story. Let photography carry most of the colour: warm neutral product scenes, vivid pink fragrance imagery, and cool blue-green campaign footage are image content, not extra interface colours. Founders Grotesk supplies the light, understated display voice, while Founders Grotesk Mono gives labels, navigation, captions, and links their compact uppercase rhythm. The first viewport is a full-bleed video hero with small edge-positioned controls and copy anchored low on the left. Subsequent editorial sections alternate clean white space with immersive media, followed by a white product presentation and a full-width campaign image. Generous section breathing room contrasts with tightly set labels. Keep controls flat and square, use thin warm borders sparingly, and reserve the strongest black-white contrast for shopping actions and essential text.
Light display headings and occasional sentence-case supporting copy.
Aa 设计
Founders Grotesk Mono
网络字体 · 字重 400 · 占比 41%
免费替代：IBM Plex Mono
Uppercase navigation, labels, captions, links, and compact interface copy.
角色
示例
字号
字重
行高
字距
一级标题
Light display headline for campaign or product storytelling.
Abel
32px
300
1.1
0.01em
二级标题
Uppercase monospaced section titles and prominent editorial labels.
Abel
28px
400
1.1
0
三级标题
Light subheads introducing supporting brand or product copy.
The quick brown fox 敏捷的狐狸
20px
300
1.2
0.02em
正文
Compact uppercase monospaced interface and supporting text.
The quick brown fox 敏捷的狐狸
13px
400
1.1
-0.02em
辅助文字
Small uppercase notes beneath product imagery or media.
The quick brown fox 敏捷的狐狸
11px
400
1.1
-0.02em
链接
Uppercase monospaced navigation and shopping links.
The quick brown fox 敏捷的狐狸
13px
400
1.1
-0.02em
眉题
Uppercase section kicker above a display heading.
The quick brown fox 敏捷的狐狸
16px
400
1.1
0.03em
代码
Monospaced utility labels or compact technical-style metadata.
const style = 1;
13px
400
1.1
-0.02em
间距与布局
基准单位 2px · 密度：宽松
40px版块间距
73px元素间距
—卡片内边距
1360px内容最大宽度
3px
10px
12px
14px
20px
21px
32px
40px
54px
64px
73px
120px
121px
Use a spacious, vertically scrolling editorial layout with a measured maximum content width of 1360px. Open with a full-bleed, two-column-capable hero; align its small copy block toward the lower left. Alternate media-led campaign sections with a white testimonial strip and a centered product presentation. Keep product and footer content in clear columns, rather than boxed cards. The measured spacing scale runs from 3 to 121px, with a 40px section gap and 73px element gap; preserve generous breathing room and sparse density.
圆角与层次
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is predominantly flat, with no measured shadow system or rounded component treatment. Separate content through whitespace, full-width image bands, and occasional fine warm-beige borders. Keep the black shopping button square-edged and visually decisive. Image overlays and video framing create depth; avoid adding interface cards, drop shadows, or decorative layers.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Overlay navigation
Place compact uppercase menu and cart controls near the hero edges, with a centered Abel wordmark and light controls over the opening image.
Editorial hero
Use full-bleed video with a low-left uppercase kicker, brief sentence-case description, and an understated underlined shopping link.
Campaign story
Pair a full-width lifestyle image or video with concise uppercase monospaced titles and small supporting copy; keep overlays legible but unobtrusive.
Product presentation
Center fragrance imagery on white, surrounded by product details and uppercase labels; use a solid #030303 CTA with #ffffff text.
Newsletter footer
Combine a short signup introduction and simple email fields with compact multi-column uppercase navigation and sparse brand sign-off.
Section divider
Use whitespace or a restrained #f6eada hairline to separate content; avoid elevated or rounded card containers.
Imagery · Photography and video define the page: softly lit bottle still lifes, close fragrance details, lifestyle footage, packaging materials, and a cool-toned campaign image. Use full-bleed crops for the hero and major stories, with text overlays kept small and edge-aligned. Product imagery sits on clean white with ample surrounding space. The screenshot’s pink, teal, and muted earthy tones belong to campaign media, not the interface palette.
Use full-bleed photography or video for the major campaign stories.
Keep interface colours to Gallery White, Soft Ink, and restrained neutral details.
Set navigation, captions, and links in uppercase monospaced text.
Leave generous white space around products and editorial copy.
Use square, flat black shopping buttons with white labels.
Treat vivid campaign hues as image content, not reusable UI colours.
✕ 不该做
Do not add gradients, shadows, or rounded card treatments.
Do not introduce bright interface accents absent from the measured palette.
Do not cover photography with oversized text or dense copy.
Do not box every story into a card grid.
Do not use decorative colours sampled from campaign imagery as brand tokens.
Do not crowd the product presentation or footer columns.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new Abel-style natural fragrance page as a spacious editorial storefront. Use Gallery White (#ffffff) as the main canvas and Soft Ink (#030303) for text, links, and the primary shopping action; reserve Oat Hairline (#f6eada) for subtle dividers and Mist Grey (#cccccc) for an occasional story band. Use Founders Grotesk for light display copy and a monospaced alternative such as IBM Plex Mono for compact uppercase navigation, labels, and captions. Lead with immersive, full-bleed product or lifestyle media, then alternate clean editorial space, story imagery, and a centered product showcase. Keep text overlays short and edge-aligned. Make controls square and flat, with no shadows, gradients, or rounded cards. Give the product and footer areas generous breathing room, and let photography—not interface decoration—supply colour and atmosphere.
