North star · Keep the interface almost entirely black and white, and let oversized type and one carefully layered object carry the composition.
The visual strategy is built on a near-black canvas (#111111) and crisp off-white type (#fefefe), with no measured accent colour or decorative interface chrome. The palette stays intentionally narrow: the chair’s charcoal modelling and tonal shading belong to the product image, not an expanded brand palette. Huge uppercase display lettering dominates the opening composition, extending across multiple lines and sitting behind a centered chair render. Small navigation labels and compact descriptive copy provide a restrained counterpoint. Typography combines an expressive sans display face with a contrasting serif for the project title and studio statement, creating an editorial rather than commercial feel. The page keeps a single-column, full-width impression, with generous dark negative space between the opening feature and later content. Project naming and the studio description are presented as simple text rather than cards or boxed modules. Motion is measured and smooth; the overall effect relies on scale, contrast, and careful layering.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
中性色
页面底色 · Studio Black主文字 · Paper White
文字
背景
对比度
WCAG
#fefefe Paper White
#111111 Studio Black
18.72:1
AAA
字体
字号阶梯：Custom（比例约 2.289，正文 18px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
ak
网络字体 · 字重 400 / 700 · 占比 96%
免费替代：Archivo
Display lettering, project body and captions, navigation, and uppercase links.
Aa 设计
gs
网络字体 · 字重 400 · 占比 4%
免费替代：Cormorant Garamond
Serif-led project title and studio statement headings.
角色
示例
字号
字重
行高
字距
特大标题
Oversized uppercase words form the layered opening hero statement.
OFFFICE
216px
400
0.8
0
一级标题
Serif project title and editorial statement heading.
OFFFICE
72px
400
0.9
0
二级标题
Large uppercase section or project headings.
OFFFICE
57.5px
400
0.9
0
正文
Bold project and studio copy.
The quick brown fox 敏捷的狐狸
18px
700
1.56
0
辅助文字
Small uppercase project labels and supporting metadata.
The quick brown fox 敏捷的狐狸
12px
400
1.1
0
导航
Compact studio identity and top-level navigation.
The quick brown fox 敏捷的狐狸
12px
700
1.33
0
链接
Small bold uppercase policy and utility links.
The quick brown fox 敏捷的狐狸
12px
700
1.1
0
间距与布局
基准单位 8px · 密度：适中
32px版块间距
—元素间距
—卡片内边距
1376px内容最大宽度
8px
16px
32px
180px
A predominantly single-column composition sits on a continuous dark canvas, with the hero reading as full-bleed rather than a contained card. The measured page max width is 1376px; section rhythm is 32px, with measured spacing steps of 8, 16, 32, and 180px. Hero typography and the centered chair create the primary alignment, while small navigation and explanatory copy sit near the edges. Later sections return to left-aligned editorial text. Density is sparse, with large areas of uninterrupted negative space.
圆角与层次
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface reads as flat: measured data reports no shadows, gradients, borders, or card treatments. Separation comes from the contrast between white type and the black canvas, while the chair gains depth from its own rendered lighting. Use deliberate overlap for the hero object rather than interface elevation effects.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Corner navigation
Compact white studio identity and GET IN TOUCH link sit at opposite upper edges without filled backgrounds or borders.
Oversized hero statement
Multi-line uppercase white display type spans the dark opening and sits behind the central chair render.
Hero descriptor
Small uppercase studio description is positioned beside the large headline, with a compact language selector nearby.
Project label
Centered Archive caption and serif Double Chair title introduce the featured work, with the year set as small metadata.
Studio statement
A large uppercase heading presents the studio’s Italian, Spanish, and Swiss multidisciplinary focus as editorial text.
Policy link
POLICY PAGE appears as a bold, uppercase white text link without a button container.
Imagery · The defining visual is a centrally framed, grayscale 3D chair render layered over the oversized hero lettering. Its soft charcoal shading separates it from the near-black background without introducing a new brand colour. Keep object imagery isolated, large, and unobstructed; the measured page does not use a grid of photographs or illustrative iconography.
Reserve #fefefe for high-contrast typography and navigation.
Make the hero statement exceptionally large and uppercase.
Layer a single product render across the hero lettering.
Keep navigation and metadata small and restrained.
Preserve generous negative space between content blocks.
✕ 不该做
Do not introduce unmeasured accent colours.
Do not put content in rounded cards or bordered panels.
Do not add gradients, shadows, or decorative UI chrome.
Do not crowd the hero with extra controls or badges.
Do not turn the project presentation into a product grid.
Do not treat grayscale shading in the render as brand palette.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new OFFFICE-style design studio page using a disciplined monochrome palette: Studio Black (#111111) for the continuous canvas and Paper White (#fefefe) for text and navigation. Create an editorial opening with enormous uppercase sans-serif display lettering, a single carefully lit grayscale 3D object overlapping the type, and compact utility copy aligned near the edges. Use Archivo as a free substitute for the dominant sans-serif and Cormorant Garamond for serif editorial titles. Keep sections largely single-column and left-aligned outside the hero, with restrained navigation, small uppercase metadata, and generous dark negative space. Use text links instead of filled buttons. Avoid cards, borders, shadows, gradients, extra colours, and decorative interface treatments; visual impact should come from scale, contrast, and object layering.
