OPX Studio 以近乎纯黑的画布呈现长篇项目作品集，搭配醒目的白色大字与多样项目图像。界面保持克制，通过低调导航和小型描边案例链接，让作品成为视觉焦点。
North star · Keep the interface nearly black and typographically confident, letting unevenly placed project imagery provide the page’s colour and rhythm.
The page is built around a near-black foundation: #020202 defines the canvas and #000000 appears across section and project areas, with the slight shift helping broad layouts stay visually quiet rather than flatly uniform. Bright #ffffff is reserved for the central statement, project names, links, and the oversized closing wordmark. #9b9b9b softens secondary navigation and contact details. OPX-Medium gives headlines and display text a distinctive, rounded geometric voice; Untitled handles compact supporting copy and link labels. A spacious opening statement gives way to an intentionally irregular portfolio sequence: image blocks vary in size and horizontal position, while generous black intervals separate projects. Photography, screen mockups, and vivid project artwork retain their own colours inside the otherwise monochrome frame. Case-study links are small outlined pills, providing a consistent action without turning the portfolio into a conventional card grid.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
表层色
中性色
功能色
页面底色 · Canvas Black表层 · Deep Black表层 2 · Gallery White主文字 · Gallery White次要文字 · Soft Graphite描边 · Gallery White
Display headings, navigation, project labels, and the closing wordmark.
Aa 设计
Untitled
系统字体 · 字重 500 · 占比 30%
免费替代：Inter
Body copy and compact case-study link text.
角色
示例
字号
字重
行高
字距
特大标题
Oversized closing wordmark and prominent display moments.
OPX Studio
111px
400
1.07
0
一级标题
Large introductory statement near the top of the page.
OPX Studio
80px
400
1.21
0
二级标题
Major section or editorial portfolio headings.
OPX Studio
50px
400
1
0
三级标题
Project-group headings and prominent project titles.
OPX Studio
35px
400
1.29
0
四级标题
Individual project names and smaller content headings.
The quick brown fox 敏捷的狐狸
26px
400
1.38
0
正文
Compact descriptions, footer details, and supporting copy.
The quick brown fox 敏捷的狐狸
14px
500
1.67
0
导航
Large, quiet top-level Projects and Studio navigation.
OPX Studio
50px
400
1
0
链接
Small View case study labels and inline actions.
The quick brown fox 敏捷的狐狸
14px
500
1.67
0
间距与布局
基准单位 1px · 密度：适中
50px版块间距
—元素间距
—卡片内边距
1340px内容最大宽度
7px
15px
20px
21px
30px
50px
80px
99px
100px
150px
200px
The measured page max width is 1340px, with the canvas extending across the viewport. A spacious introductory statement sits above the portfolio; project media then follows an asymmetric, staggered arrangement rather than a rigid repeated card grid. Images alternate between left and right positions and vary in apparent scale. Large black gaps create a comfortable, editorial rhythm. Footer details use compact columns, followed by a broad wordmark.
圆角与层次
链接 · 9999px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The page is predominantly flat: no measured shadows or gradients. Separate content through black negative space and image boundaries rather than raised cards. Case-study links use a fine white outline and pill-shaped ends; project image areas remain simple rectangular frames.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Top navigation
Large, widely separated Projects and Studio links sit at opposite sides of the dark canvas; render quietly in muted tones.
Intro statement
A prominent white, two-line brand statement in OPX-Medium sits centrally above the project sequence.
Portfolio project
Combine a project image with a compact white title and a small outlined View case study link; vary image size and alignment between entries.
Case-study link
White Untitled text inside a thin outlined pill; measured label uses 14px type and 7px 30px 7px 30px padding.
Footer information
Arrange studio address, project enquiries and careers, and social details in compact columns using white and muted grey text.
Closing wordmark
Set OPX Studio in very large white OPX-Medium lettering across the bottom of the dark page.
Imagery · Project visuals mix photographic scenes, device and website mockups, brand artwork, and video-like portfolio imagery. Keep each asset in its own rectangular frame and preserve its original colour; vivid colours belong to the project work rather than the site chrome. Use varied image sizes and off-center placement, with minimal surrounding decoration.
Keep the main canvas near-black and visually uninterrupted.
Use white for the defining headline and project titles.
Let project imagery retain its own distinctive colours.
Stagger portfolio images across the page instead of forcing uniform cards.
Separate projects with generous dark negative space.
Make case-study actions small, outlined, and pill-shaped.
✕ 不该做
Do not introduce unmeasured accent colours into the interface chrome.
Do not place gradients or shadows behind the content.
Do not regularize the portfolio into a dense, even grid.
Do not make navigation or links louder than the work.
Do not add heavy card borders around project imagery.
Do not replace the oversized display type with generic small headings.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new OPX Studio-style page with a restrained near-black canvas. Use Canvas Black (#020202) for the primary background and Deep Black (#000000) for project or section areas; reserve Gallery White (#ffffff) for major headings and project titles, and Soft Graphite (#9b9b9b) for secondary information. Set display and navigation in a rounded geometric sans similar to Space Grotesk, with a clean sans such as Inter for compact copy. Start with a prominent statement and quiet, widely separated navigation. Present work as an editorial sequence of rectangular images with varied sizes and alternating alignment, not uniform cards. Preserve colour within imagery while keeping surrounding UI monochrome. Use compact, thin-outlined pill links for case studies, broad negative space between projects, and a simple multi-column footer. Avoid shadows and gradients.
