Waka Waka 首页以家具刊物般的编辑式构图呈现工作室形象，将超大品牌字样与精心取景的椅子摄影并置。暖灰底色、克制的字体和大面积留白，让视觉重点落在产品本身。
North star · Treat the page like a quiet furniture editorial: let oversized typography and carefully framed product photography lead, with warm neutrals and abundant open space.
The page uses a muted, warm-gray canvas (#d4d1cb) as a continuous field around a narrow, portrait-oriented editorial composition. A pale off-white panel (#edeae4) frames the central content, while near-black (#28282a) carries the oversized Waka wordmark, small navigation, and fine-print details. The additional gray surface (#c9c7c4) is a supporting tone rather than a strong card system. Waka Sans keeps the identity consistent: the display treatment is exceptionally large and tightly tracked, while navigation and body copy remain compact, uppercase, and understated. A large chair photograph anchors the central layout, with a smaller supporting crop alongside it; the surrounding empty space makes the imagery feel like a printed catalogue spread. The page avoids decorative UI, bright accents, and obvious elevation. Its visual rhythm comes from scale contrast, careful image placement, and a restrained balance of warm neutrals and black.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
表层色
中性色
页面底色 · Warm Studio Gray表层 · Paper Ivory表层 2 · Stone Gray主文字 · Soft Ink
文字
背景
对比度
WCAG
#28282a Soft Ink
#d4d1cb Warm Studio Gray
9.66:1
AAA
#28282a Soft Ink
#edeae4 Paper Ivory
12.26:1
AAA
#28282a Soft Ink
#c9c7c4 Stone Gray
8.72:1
AAA
字体
字号阶梯：Custom（比例约 5.578，正文 18px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
Waka Sans
网络字体 · 字重 500 / 400 / 700 · 占比 100%
免费替代：Manrope
Used throughout for the oversized wordmark, navigation, headings, body copy, captions, and links.
角色
示例
字号
字重
行高
字距
特大标题
Oversized Waka wordmark repeated above and below the product imagery.
Waka Waka
560px
700
0.8
-0.09em
一级标题
Compact primary heading within the editorial composition.
The quick brown fox 敏捷的狐狸
24px
500
0.83
-0.03em
正文
Uppercase descriptive copy and studio information.
The quick brown fox 敏捷的狐狸
18px
500
1
-0.02em
辅助文字
Tiny image notes and fine-print metadata.
The quick brown fox 敏捷的狐狸
10px
500
1
-0.02em
导航
Small uppercase site navigation.
The quick brown fox 敏捷的狐狸
14px
500
1
-0.03em
链接
Compact labels and object links.
The quick brown fox 敏捷的狐狸
10px
500
1
-0.02em
间距与布局
基准单位 4px · 密度：适中
95px版块间距
—元素间距
290px卡片内边距
—内容最大宽度
6px
11px
12px
20px
27px
95px
173px
The page centers a narrow, portrait-format editorial composition within a much larger gray viewport. Its internal arrangement combines a slim navigation line, an oversized wordmark, a large chair photograph, a smaller adjacent image crop, and a second oversized wordmark. Small utility text sits near the edges of the composition, while a studio description rests low on the outer canvas. The measured data gives no page maximum width, so preserve the narrow, centered appearance qualitatively rather than imposing an unmeasured fixed width. Overall density is low, with expansive surrounding whitespace.
圆角与层次
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The design is visually flat, with no measured shadows or radius system. Use clean, square-edged surfaces and rely on tonal contrast between the gray canvas, pale editorial panel, and photograph. Separate elements through placement and whitespace rather than borders, shadows, or layered cards.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Editorial wordmark
Huge, near-black Waka lettering dominates the pale panel, framing the product imagery through repeated placement.
Compact navigation
A restrained top-line navigation uses small Waka Sans labels, uppercase styling, and minimal visual weight.
Furniture photography
A large chair image anchors the composition, paired with a smaller supporting crop on the right.
Object link
Product naming and object links appear as small, unobtrusive text rather than filled controls.
Studio description
A short line of studio context sits near the lower edge of the outer canvas in compact dark text.
Imagery · Use quiet, studio-shot product photography of functional wood furniture. The main chair image is vertically framed against a pale neutral backdrop, with a smaller secondary crop placed beside it. Keep the lighting soft and the treatment natural; avoid illustration, loud color grading, or decorative overlays. The photographs sit within the editorial composition, not as full-bleed background imagery.
该做与不该做
✓ 该做
Keep the surrounding canvas warm gray and visually quiet.
Use near-black for the wordmark and functional text.
Make the brand lettering the strongest typographic element.
Frame furniture photography as an editorial image composition.
Preserve generous empty space around the central panel.
Keep navigation and captions small and understated.
✕ 不该做
Do not introduce bright accent colors.
Do not add gradients, shadows, or rounded card treatments.
Do not let utility text compete with the wordmark.
Do not stretch the editorial layout into a dense dashboard.
Do not use busy backgrounds behind product photography.
Do not substitute decorative illustrations for furniture imagery.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new page in Waka Waka’s quiet furniture-editorial style. Use Warm Studio Gray (#d4d1cb) as the broad canvas, with a centered Paper Ivory (#edeae4) composition and Soft Ink (#28282a) for wordmarks, navigation, and copy. Reserve Stone Gray (#c9c7c4) for subdued supporting surfaces rather than accents. Use Waka Sans or a close Manrope alternative: oversized, tightly tracked display lettering should contrast with compact uppercase navigation and fine print. Pair the typography with natural studio photography of functional furniture, using a dominant image and a smaller supporting crop. Keep the layout narrow and centered against ample open space. Prefer flat, square-edged surfaces; do not add shadows, gradients, rounded cards, or bright colors. Let scale, image framing, and whitespace create hierarchy.
