North star · Keep the interface monochrome and typographically confident, letting each project image provide its own visual character.
The page uses a restrained monochrome interface to frame a portfolio whose individual projects carry their own vivid palettes. A near-black opening fills the first viewport, with oversized white DNCO lettering layered over stark, textured imagery; compact white navigation sits along its upper edge. The transition to a white canvas resets the mood: a large, plain-spoken introductory statement leads into small category filters and a long two-column project gallery. Neue Haas Unica Pro is used throughout, with regular weights and clean sans-serif forms; the measured display treatment is large and tightly tracked, while body copy and project captions remain modest. Images are presented as the visual color of the page, not as a competing site-wide palette. Captions use black titles and subdued gray supporting text, with fine outlined pill labels for project types. The overall strategy is quiet interface, assertive scale, and project-led variety.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
表层色
功能色
页面底色 · Gallery Grey表层 · Paper White表层 2 · Studio Ink主文字 · Studio Ink次要文字 · Caption Grey描边 · Studio Ink
文字
背景
对比度
WCAG
#000000 Studio Ink
#e5e5e5 Gallery Grey
16.67:1
AAA
#000000 Studio Ink
#ffffff Paper White
21:1
AAA
#a3a3a3 Caption Grey
#e5e5e5 Gallery Grey
2:1
不达标
#a3a3a3 Caption Grey
#ffffff Paper White
2.52:1
不达标
#a3a3a3 Caption Grey
#000000 Studio Ink
8.33:1
AAA
字体
字号阶梯：Custom（比例约 2，正文 18px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
Neue Haas Unica Pro
网络字体 · 字重 400 · 占比 100%
免费替代：Inter
Site-wide typography for navigation, hero and section headings, filters, project titles, and captions.
角色
示例
字号
字重
行高
字距
特大标题
Oversized DNCO wordmark treatment in the immersive opening.
DNCO
72px
400
1
-0.025em
一级标题
Introductory statement beneath the hero.
The quick brown fox 敏捷的狐狸
22px
400
1
0
正文
Project descriptions and supporting page copy.
The quick brown fox 敏捷的狐狸
18px
400
1.33
0
按钮
Plain-text category filters above the project gallery.
The quick brown fox 敏捷的狐狸
18px
400
1.56
0
导航
Top navigation links over the opening visual.
The quick brown fox 敏捷的狐狸
18px
400
1.56
0
间距与布局
基准单位 4px · 密度：适中
80px版块间距
24px元素间距
—卡片内边距
1392px内容最大宽度
4px
12px
14px
24px
48px
A full-bleed opening gives way to a white, single-column page structure. The project area becomes a two-column gallery at the supplied desktop screenshot scale, with image-led tiles and compact captions beneath. Content is aligned to a shared page margin; the measured maximum page width is 1392px. The introduction, filter row, and portfolio follow a comfortable rhythm, with the measured section gap at 80px and element gap at 24px. The gallery is long and content-dense, but its repeated tile structure keeps scanning orderly.
圆角与层次
导航 · 50%
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is predominantly flat: measured shadows are absent, and card corners are square. Separate content through whitespace and image boundaries rather than raised panels. Small category labels use fine black outlines and pill-shaped contours; keep layering concentrated in the hero artwork and avoid adding decorative shadow effects.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Hero wordmark
Full-viewport dark opening with dramatically oversized white DNCO lettering layered over monochrome, textured imagery.
Top navigation
Compact white text links arranged along the upper edge of the dark hero; regular Neue Haas Unica Pro at the measured 18px nav size.
Introduction
A large, left-aligned statement on white, with generous surrounding negative space and no decorative panel.
Category filters
Four measured plain-text controls, including All, Sector, Location, and Expertise; black text without a filled button background.
Portfolio tile
Image-led project link in a two-column desktop gallery, followed by a black project title and muted gray description.
Project label
Small outlined pill at the caption edge identifying a project category, such as Place brand or Wayfinding.
Imagery · The hero uses stark black-and-white, high-contrast imagery with oversized brand lettering. Portfolio thumbnails mix place photography, campaign graphics, signage, identity applications, and occasional flat-color project visuals. Each tile is framed consistently, while the project artwork retains its own palette and treatment; avoid imposing a site-wide color filter over this varied work.
Make the opening hero immersive and typographically bold.
Give the introduction clear space before the portfolio.
Keep project imagery visually varied and unfiltered.
Use a consistent two-column gallery at the supplied desktop scale.
Separate project titles from descriptions with muted gray.
Keep category controls and labels visually restrained.
✕ 不该做
Do not add an unmeasured accent color to the site interface.
Do not use shadows to lift cards from the page.
Do not round project images into decorative cards.
Do not let filters compete with the project gallery.
Do not force project artwork into a uniform palette.
Do not replace the clean sans-serif typography with display serifs.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new DNCO-style consultancy page around an editorial portfolio. Use Studio Ink (#000000) and Paper White (#ffffff) for the core interface, Gallery Grey (#e5e5e5) only as a measured neutral card fallback, and Caption Grey (#a3a3a3) for secondary copy. Set type in Neue Haas Unica Pro or a close free substitute such as Inter, with regular weights and a tightly tracked, oversized display treatment. Start with an immersive, high-contrast hero and compact navigation; follow with a plain, left-aligned introduction, text-only category filters, and a long two-column project gallery. Keep project photography and graphic identities free to express their own colors. Use square image framing, restrained outlined category pills, generous whitespace, and flat surfaces without shadows.
