North star · Keep the interface monochrome and spacious, letting oversized editorial type and art-directed photography provide the visual energy.
The page relies on a restrained palette: Gallery White (#ffffff) forms the opening and product-story canvas, Soft Paper (#f7f7f7) marks the editorial introduction and footer, and Ink (#000000) carries nearly all text and the primary action. Munken Sans Web provides a consistent voice, from compact bold navigation to an immense uppercase hero word and readable editorial paragraphs. The hero is a white, open field where photographs hover at varied positions around the oversized title; their color is intentionally contained in the images rather than used as interface accents. Below, a centered text column and black Read more button sit on a pale band, followed by a broad image gallery. A white product feature pairs concise copy with a photograph, then the pale footer organizes links into columns. Spacious section transitions and flat surfaces keep attention on typography, image composition, and paper texture.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
表层色
中性色
页面底色 · Soft Paper表层 · Gallery White主文字 · Ink
文字
背景
对比度
WCAG
#000000 Ink
#f7f7f7 Soft Paper
19.6:1
AAA
#000000 Ink
#ffffff Gallery White
21:1
AAA
字体
字号阶梯：Custom（比例约 2.259，正文 20px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
Munken Sans Web
网络字体 · 字重 400 / 700 / 900 · 占比 100%
免费替代：Montserrat
Used throughout navigation, oversized hero lettering, editorial headings and copy, links, buttons, and footer.
角色
示例
字号
字重
行高
字距
特大标题
Oversized uppercase word anchoring the opening image collage.
Arctic
230.5px
700
1
0
一级标题
Primary editorial section heading and page-level title.
Arctic
40px
700
1.2
0
二级标题
Secondary section headings, including the product-range feature.
Arctic
30px
400
1.35
0
正文
Introductory and product-description paragraphs.
The quick brown fox 敏捷的狐狸
20px
400
1.5
0
辅助文字
Compact bold image labels or supporting emphasis.
The quick brown fox 敏捷的狐狸
16px
700
1.5
0
按钮
Heavy label on the black Read more action.
The quick brown fox 敏捷的狐狸
20px
900
1.5
0
导航
Bold header and footer navigation labels.
The quick brown fox 敏捷的狐狸
16px
700
1.5
0
链接
Editorial links such as Explore more.
The quick brown fox 敏捷的狐狸
20px
400
1.5
0
间距与布局
基准单位 8px · 密度：宽松
80px版块间距
32px元素间距
—卡片内边距
816px内容最大宽度
6px
10px
14px
16px
32px
36px
38px
40px
52px
64px
72px
80px
96px
112px
128px
A spacious, mostly single-column editorial page with a full-width opening canvas and image collage. The measured content max width is 816px; the introduction is centered, while the product feature aligns copy beside an image. The gallery introduces a three-column arrangement and full-bleed imagery. Sections alternate white and pale gray, with generous measured section spacing and a compact, two-column footer. Keep density low and let each block breathe.
圆角与层次
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The design is predominantly flat, with no measured shadow system, gradient, or rounded-card treatment. Use clean rectangular image crops and uninterrupted white or pale-gray bands. Visual layering comes from photographs placed over the oversized hero lettering, not from elevated containers or decorative borders.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Hero collage
White opening canvas with a huge uppercase word and an asymmetric arrangement of rectangular editorial photographs layered around and over the lettering.
Header navigation
Minimal top row with a small brand mark, centered Arctic wordmark, and right-aligned menu icon; navigation uses bold 16px Munken Sans Web.
Editorial introduction
Centered text on #f7f7f7: a bold 40px heading, 20px regular paragraph, and black rectangular Read more button with white heavy text.
Image gallery
Three-image feature region with broad, clean rectangular photographs and a spacious pale-gray setting.
Product-range feature
White section pairing a heading, short descriptive copy, and Explore more link with a product photograph.
Footer
Pale-gray two-column closing area with brand mark, compact navigation links, and a small copyright line.
Imagery · Use editorial photography and printed-paper imagery rather than decorative UI graphics. The hero collage mixes portraits, interiors, food, artwork, and publication details in varied rectangular crops, positioned asymmetrically around the title. Later imagery is broad and tactile: still-life product photography and paper samples. Keep colors within the photographs; the surrounding interface remains monochrome.
Use Ink (#000000) for interface text and primary actions.
Alternate Gallery White (#ffffff) and Soft Paper (#f7f7f7) as calm section canvases.
Make the hero word exceptionally prominent and uppercase.
Arrange editorial images asymmetrically around the hero lettering.
Keep body copy in a restrained, readable column.
Use rectangular imagery and flat, unadorned surfaces.
✕ 不该做
Do not introduce unmeasured interface colors.
Do not add gradients, drop shadows, or rounded card styling.
Do not make every section a dense grid.
Do not let interface decoration compete with the photographs.
Do not apply the illustrative photo palette to buttons or navigation.
Do not use tightly packed section transitions.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new editorial page in Arctic’s visual style. Keep the UI monochrome: use Ink (#000000) for type, links, and the primary action, Gallery White (#ffffff) for the main canvas, and Soft Paper (#f7f7f7) for alternating content bands. Use Munken Sans Web, or a close sans substitute, with neutral tracking, bold headings, and readable regular-weight copy. Create a spacious opening with one enormous uppercase display word and an asymmetric collage of rectangular editorial photographs. Follow it with a narrow centered introduction, a simple black button, a broad image-led feature, and a copy-plus-image product section. Keep surfaces flat, avoid decorative borders and shadows, and reserve color for the photography. End with a quiet, compact footer organized into columns.
