North star · Let the wallpaper photography provide the color, while a warm paper canvas, expressive serif typography, and generous space keep the page composed.
The page is built around a warm, nearly paper-white canvas (#fbf9f3), with charcoal (#1e1e1e) reserved for type, selected controls, and the closing contact/footer band. White (#ffffff) appears chiefly as reversed text and fine marks over dark or photographic areas, rather than as a competing page surface. Typography supplies the editorial character: a distinctive display serif contrasts with restrained, compact mono text and clean uppercase sans-serif labels. Large type is paired with small, precise descriptions and captions. The opening is a full-bleed, softly blurred wallpaper image with an oversized white wordmark; below it, the page returns to generous pale space and staggered project photography. Sections alternate between asymmetric image-and-copy compositions and centered collaborator or press callouts. Images carry the palette’s stronger pink, rust, and muted violet hues; these are project imagery, not reliable interface colors. Controls remain simple, pill-shaped, and high contrast.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
表层色
中性色
页面底色 · Warm Paper表层 · Studio Charcoal主文字 · Studio Charcoal次要文字 · Gallery White描边 · Gallery White
文字
背景
对比度
WCAG
#1e1e1e Studio Charcoal
#fbf9f3 Warm Paper
15.83:1
AAA
#ffffff Gallery White
#fbf9f3 Warm Paper
1.05:1
不达标
#ffffff Gallery White
#1e1e1e Studio Charcoal
16.67:1
AAA
字体
字号阶梯：Custom（比例约 1.894，正文 14px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
Soehne Mono Buch
网络字体 · 字重 400 · 占比 68%
免费替代：IBM Plex Mono
Body copy, navigation, and compact project descriptions.
Aa 设计
Cardinal Fruit
网络字体 · 字重 400 · 占比 23%
免费替代：Bodoni Moda
Oversized hero wordmark and editorial section headings.
Aa 设计
Soehne Breit Buch
网络字体 · 字重 400 / 600 · 占比 9%
免费替代：Inter
Uppercase eyebrows, captions, selected headings, and button labels.
角色
示例
字号
字重
行高
字距
特大标题
Oversized serif brand wordmark in the full-bleed opening.
Wallpaper Projects
180px
400
1
-0.025em
一级标题
Uppercase sans-serif heading treatment where prominent section headings appear.
Wallpaper Projects
80px
400
1
0
二级标题
Large editorial serif headings, including the process introduction.
Wallpaper Projects
48px
400
1.24
-0.02em
三级标题
Serif subheadings for projects, collections, and editorial content.
Wallpaper Projects
36px
400
1
-0.025em
正文
Compact mono descriptions and explanatory copy.
The quick brown fox 敏捷的狐狸
14px
400
1.3
-0.02em
辅助文字
Small uppercase labels and image or section captions.
The quick brown fox 敏捷的狐狸
12px
400
1.5
0.1em
按钮
CTA labels, set in a restrained sans-serif.
The quick brown fox 敏捷的狐狸
14px
400
1.5
0
导航
Small mono navigation labels.
The quick brown fox 敏捷的狐狸
12px
400
1.5
0
眉题
Uppercase section labels above primary copy.
The quick brown fox 敏捷的狐狸
12px
400
1.5
0.1em
代码
Mono text treatment matching compact informational copy.
const style = 1;
14px
400
1.3
-0.02em
间距与布局
基准单位 4px · 密度：宽松
40px版块间距
60px元素间距
—卡片内边距
1400px内容最大宽度
2px
4px
7px
8px
10px
12px
15px
16px
20px
24px
25px
40px
50px
60px
80px
100px
The page uses a spacious, centered composition with a measured maximum width of 1400px and largely open, unboxed sections. A full-bleed hero gives way to split editorial blocks, a two-column process section, and staggered project and collection galleries. Image sizes and alignments vary to create a loose, asymmetric rhythm rather than a rigid card grid. Collaborator and press sections center their text between gallery blocks. The dark contact/footer band provides the principal tonal break at the end.
圆角与层次
按钮 · 9999px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The design is mostly flat: there are no measured shadows or gradients defining interface components. The warm canvas and dark footer create contrast through large color fields rather than raised cards. Project images sit directly in the page flow, separated by open space; buttons are simple pills, and fine white marks or image-caption arrows supply light detail.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Full-bleed hero
Edge-to-edge wallpaper imagery, overlaid with a very large white serif wordmark, compact brand mark, menu indicator, downward arrow, and a light pill action.
Project gallery item
A rectangular interior or wallpaper image, paired with a small serif caption and a fine northeast-pointing arrow.
Dark pill CTA
Charcoal (#1e1e1e) capsule with white text, used for actions such as Explore All and Let's Chat.
Light hero action
White (#ffffff) pill with dark text placed over the hero image for the wallpaper-swap action.
Editorial split block
Short mono copy and an uppercase eyebrow paired with one or more photographs in an open, asymmetrically aligned layout.
Centered social proof
Collaborator names or publication mastheads presented as a centered text feature with a large serif name or logo treatment.
Contact and footer band
Full-width charcoal closing area with reversed copy, a light chat CTA, one image, and compact update, shop, support, and information links.
Imagery · Photography is the visual centerpiece: finished interiors, wallpaper samples, and branded collaborations appear as rectangular, uncropped project images. The hero uses a full-bleed, softly blurred wallpaper image behind a large white wordmark. Gallery imagery varies in scale and alignment, with small serif project captions and directional arrow marks. The pink, rust, mauve, and violet tones come from the photographed wallpapers and spaces, not the interface palette.
Use charcoal for primary text and high-contrast actions.
Let large serif typography create the editorial focal points.
Keep body copy compact and secondary to the imagery.
Vary gallery image sizes and alignments within an airy layout.
Use project photographs as the source of vivid color.
Reserve the dark field for the closing contact area.
✕ 不该做
Do not add interface colors beyond the measured palette.
Do not turn project images into uniform boxed cards.
Do not use shadows to imply elevation.
Do not crowd the page with dense, rigid grids.
Do not apply wallpaper-image hues as brand UI colors.
Do not replace the serif and mono contrast with one type style.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new editorial design-studio page in the Wallpaper Projects style. Use Warm Paper (#fbf9f3) as the dominant canvas and Studio Charcoal (#1e1e1e) for copy and dark pill actions; use Gallery White (#ffffff) for reversed marks or light controls. Pair an expressive high-contrast serif like Bodoni Moda with compact mono copy like IBM Plex Mono and a restrained sans-serif for uppercase labels. Start with a full-bleed photographic hero and oversized serif title, then use open asymmetric image-and-copy sections, varied project imagery, and centered collaborator or press callouts. Keep captions small and include simple directional marks on gallery items. Let photography supply the richer colors. Avoid card borders, shadows, and dense grids. Close with a distinct charcoal contact and footer band.
