North star · Keep the interface nearly invisible: use monochrome type, oversized scale, generous white space, and let project imagery provide the variation.
The page uses a Gallery White canvas (#ffffff) as a nearly continuous field, with no decorative colour bands or prominent interface chrome. Ink (#191919) supplies the main typography and enormous NCDA wordmark, while Quiet Gray (#808080) distinguishes introductory copy and project links. The separately measured pure black (#000000) appears sparingly in text and links; keep it a minor tonal variation rather than a new accent system. TWK Everett Regular gives the uppercase display and category headings a clean, architectural presence; Suisse Works Regular adds a quieter contrast in small captions. The opening composition pairs small time and menu labels with a short studio statement, then lets the oversized wordmark dominate the lower viewport. Below, full-width video and staggered project images alternate with broad white intervals. Project headings and view-all links sit close to their images, keeping navigation legible without cards, borders, or shadows.
Display wordmark, headings, body copy, and large uppercase project links.
Aa 设计
Suisse Works Regular
网络字体 · 字重 400 · 占比 41%
免费替代：Libre Baskerville
Small caption text and compact supporting labels.
Aa 设计
TWK Everett Mono Regular
网络字体 · 字重 400 · 占比 1%
免费替代：IBM Plex Mono
Monospaced code-style text role; use for compact technical or coded labels if present.
角色
示例
字号
字重
行高
字距
特大标题
Oversized uppercase NCDA wordmark across the opening viewport.
NCDA
62.5px
400
0.8
-0.05em
一级标题
Large uppercase section or page headings.
NCDA
32px
400
1.2
-0.01em
二级标题
Supporting subheadings and medium-sized labels.
The quick brown fox 敏捷的狐狸
21px
400
1.35
-0.01em
正文
Studio introduction, project descriptions, and footer information.
The quick brown fox 敏捷的狐狸
14.5px
400
1.4
0
辅助文字
Small secondary captions and compact supporting labels.
The quick brown fox 敏捷的狐狸
11px
400
1.44
0.04em
链接
Prominent uppercase project-category links such as PUBLIC.
NCDA
32px
400
1.2
-0.01em
代码
Compact monospaced labels where a code-like treatment is needed.
const style = 1;
21px
400
0.8
-0.01em
间距与布局
基准单位 1px · 密度：宽松
188px版块间距
—元素间距
—卡片内边距
1335px内容最大宽度
15px
21px
25px
26px
28px
53px
59px
150px
188px
Use a spacious, single-column editorial flow on a white canvas, with a measured page maximum width of 1335px. The opening screen distributes small utility text near the top and a compact studio introduction to the right, leaving a large gap before the wordmark. Follow with full-bleed media, a centered explore cue, and project sections that alternate left- and right-aligned image compositions. Keep section intervals generous; the measured section gap is 188px. Finish with a compact multi-column footer.
圆角与层次
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is essentially flat: measured data reports no shadows, gradients, or radius scale, and no prominent border treatment appears in the screenshots. Separate content through whitespace, image placement, and typography rather than cards or layered surfaces. Keep media crisp and flush against its surrounding white canvas.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Utility header
Place local time labels at the left and a simple Menu label at the right over the white canvas.
Studio introduction
A short, right-aligned studio statement combines primary Ink text with muted gray supporting copy.
Oversized wordmark
Set NCDA in exceptionally large uppercase TWK Everett Regular, filling the opening composition.
Explore cue
Use a small downward-arrow label centered between the introductory media and project categories.
Project category heading
Pair an uppercase category name with a muted view-all label and project count near the image.
Project media
Show large rectangular photography or video without card framing, shadows, or decorative borders.
Contact footer
Arrange studio name, address, contact details, privacy, credits, and copyright in a compact multi-column close.
Imagery · Prioritize real interior photography and video: quiet residential rooms, public spaces, sculptural art, and bespoke furniture. Images are large, rectangular, and minimally treated, with the screenshot showing warm, natural material tones against the monochrome interface. Use broad media framing and preserve each image’s own colour and atmosphere; avoid decorative overlays or illustration-led graphics.
Use Gallery White as the uninterrupted page canvas.
Set primary headings and the wordmark in TWK Everett Regular.
Reserve Quiet Gray for secondary copy and project links.
Use large real-project images as the main source of visual variety.
Alternate project image alignment down the page.
Separate sections with generous white intervals.
✕ 不该做
Don't add bright accent colours or coloured section bands.
Don't put project content into elevated cards.
Don't add shadows, gradients, or ornamental borders.
Don't crowd the opening wordmark with extra interface elements.
Don't use heavy font weights where regular weight is measured.
Don't treat colours inside project photography as interface palette colours.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new editorial portfolio page in NCDA’s restrained architectural style. Use Gallery White (#ffffff) as the continuous canvas, Architect Ink (#191919) for primary headings and display text, and Quiet Gray (#808080) for secondary labels and links; Pure Black (#000000) should remain a minor text variation. Use a clean regular-weight sans serif similar to TWK Everett for oversized uppercase titles and readable body copy, with a restrained serif caption face. Compose a sparse utility header, concise studio introduction, oversized wordmark, then generous white space around large, unframed project photography. Stagger project compositions left and right and keep category headings and view-all links close to their images. Avoid cards, shadows, gradients, decorative borders, and interface colour borrowed from photography.
