Not Real 以浅灰白底色、黑色文字和疏朗的非对称作品网格呈现创意工作室作品集。精致的衬线字体点缀标题，鲜明的 CGI、动画与品牌项目影像带来视觉张力，界面本身仍保持克制。
North star · Keep the interface monochrome and spacious, letting an irregular gallery of vivid project media provide the page’s visual energy.
The page is built around a restrained two-colour interface: #f2f2f2 covers the canvas, while #000000 handles the logo, navigation, text, links, and fine rules. Saturated purples, greens, pinks, and warm metallic tones appear inside project media rather than as persistent interface accents, so the portfolio feels calm even as individual cases stand out. Telegraf provides a clean, contemporary sans-serif voice for navigation, body copy, and project labels; Ogg adds editorial contrast to selected italic phrases and project titles. The layout is spacious and deliberately uneven: a broad three-column project field places media at different sizes and positions, with descriptive text immediately beneath each item. Large negative spaces separate the work and preserve a gallery-like rhythm. The visual hierarchy relies on typography, placement, and imagery rather than cards, shadows, or decorative colour blocks.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
表层色
中性色
页面底色 · Gallery Mist主文字 · Studio Ink描边 · Studio Ink
Primary sans-serif for navigation, body copy, project names, and links.
Aa 设计
ogg
网络字体 · 字重 400 · 占比 27%
免费替代：Cormorant Garamond
Editorial serif emphasis within introductory copy and selected project-title lines.
角色
示例
字号
字重
行高
字距
一级标题
Large studio wordmark or primary page statement.
Not Real
55px
400
1.1
0.002em
二级标题
Editorial serif copy and emphasized project-title lines.
The quick brown fox 敏捷的狐狸
25.5px
400
1.5
-0.02em
三级标题
Project headings and strong sans-serif labels.
The quick brown fox 敏捷的狐狸
25px
400
1
0
四级标题
Smaller serif emphasis within project captions.
The quick brown fox 敏捷的狐狸
24.5px
400
1.06
-0.02em
正文
Studio introduction and supporting project descriptions.
The quick brown fox 敏捷的狐狸
15px
400
2
0.033em
导航
Top-level Work, About, Jobs, and Contact links.
The quick brown fox 敏捷的狐狸
25px
400
1
0.04em
链接
Project links, social prompts, and footer destinations.
The quick brown fox 敏捷的狐狸
20px
400
2
0
间距与布局
基准单位 1px · 密度：宽松
110px版块间距
—元素间距
—卡片内边距
1352px内容最大宽度
11px
18px
44px
Use a spacious three-column project field within a measured maximum width of 1352px. Keep the studio wordmark and introductory statement near the top, with navigation aligned across the upper area. Distribute projects asymmetrically, varying media widths and vertical placement rather than forcing uniform cards. Place captions directly beneath each image or video. Maintain generous section separation, with the measured section gap of 110px, and use the page edges and open canvas as part of the composition.
圆角与层次
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is flat: measured data shows no shadows, gradients, or rounded component treatments. Use the pale canvas as a continuous ground and black hairlines sparingly for separators, such as the social prompt and footer. Keep project media visually distinct through its own imagery, not card elevation.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Top navigation
A sparse row of Work, About, Jobs, and Contact links in regular Telegraf, set directly on the pale canvas.
Studio introduction
Pair the large NotReal wordmark with a compact studio description; use Ogg for selective editorial emphasis within the copy.
Project gallery
An asymmetrical three-column field of image and video projects with varied media proportions and substantial open space.
Project caption
Place project name and supporting campaign or discipline details immediately below each media item, mixing sans-serif and serif emphasis.
Social announcement
Present the Instagram update as a prominent text link with arrow treatment and thin black divider rules.
Footer
Keep the copyright line and social destinations small and direct, aligned along the bottom with a fine black rule.
Imagery · Treat project media as the main source of colour and personality: polished CGI, animation stills, and branded campaign scenes appear in varied rectangular crops. Keep image colours and lighting intact rather than applying a unifying overlay. Mix large landscape frames with smaller or more vertical pieces, and leave clear pale space around each image so the work reads as a curated portfolio.
Reserve #000000 for text, navigation, links, and rules.
Let project media carry the strong colour.
Build an irregular gallery rather than uniform cards.
Use Ogg selectively for editorial contrast.
Leave generous space between project groups.
✕ 不该做
Do not add persistent bright UI accent colours.
Do not place projects in shadowed cards.
Do not force every media item into one size.
Do not crowd captions against neighbouring projects.
Do not use bold, all-caps navigation styling.
Do not add gradients or decorative rounded containers.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a creative-studio portfolio page with the restrained, editorial character of Not Real. Use Gallery Mist (#f2f2f2) as the full-page canvas and Studio Ink (#000000) for the wordmark, navigation, copy, links, and hairline dividers. Set navigation and body text in a clean Telegraf-like sans serif; use a refined Ogg-like serif sparingly for italic emphasis. Arrange projects in a spacious, asymmetric three-column gallery, mixing landscape and smaller formats with captions directly beneath media. Let vivid CGI, animation, and campaign imagery supply colour; do not introduce colourful UI accents. Keep the page flat, without shadows or card chrome, and preserve broad breathing room between content groups. Include a concise studio introduction, project captions, an editorial social link, and a minimal footer.
