North star · Keep the interface stark and typographic; let full-bleed project media provide the colour and drama.
The page is anchored by a #000000 canvas across the hero, introduction, project work, and news feed; #ffffff provides the main text contrast and defines the closing footer band. The measured #573332 is a minor surface colour, not a defining brand accent. The vivid blue-green and warm tones in the opening view come from cinematic project footage, so treat them as media rather than interface colours. Typography mixes light Helvetica headlines and navigation with uppercase, widely tracked Courier New labels; Times New Roman adds a contrasting editorial display voice. A full-bleed video hero gives way to a compact navigation strip, an airy studio introduction, and an irregular project mosaic. Content stays visually sparse even as the portfolio and news feed extend down the page. Thin rules separate news items, while the white footer inverts the dark-page rhythm and holds hiring, links, and newsletter signup.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
表层色
中性色
页面底色 · Studio Black表层 · Gallery White表层 2 · Oxide Brown主文字 · Gallery White次要文字 · Studio Black描边 · Studio Black
Light headlines and navigation, with heavier section headings where needed.
Aa 设计
Courier New
系统字体 · 字重 400 · 占比 15%
免费替代：Space Mono
Uppercase metadata, project categories, buttons, and compact utility labels.
Aa 设计
Times New Roman
系统字体 · 字重 400 · 占比 8%
免费替代：Bodoni Moda
Editorial display typography, including the studio introduction in the screenshot.
角色
示例
字号
字重
行高
字距
特大标题
Serif editorial emphasis in the studio introduction.
Stink Studios
60px
400
1
-0.05em
一级标题
Large, light sans-serif hero or primary page headline.
Stink Studios
52px
300
1.15
-0.04em
二级标题
Bold sans-serif section or feature headings.
Stink Studios
32px
700
1
0
三级标题
Light, compact secondary headlines and news titles.
The quick brown fox 敏捷的狐狸
23px
300
1.3
-0.03em
正文
Uppercase, tracked monospaced labels and compact supporting copy.
The quick brown fox 敏捷的狐狸
14px
400
1.43
0.1em
按钮
Uppercase monospaced action labels such as SUBMIT.
The quick brown fox 敏捷的狐狸
14px
400
1.43
0.1em
链接
Navigation and utility links; larger sans-serif for project links.
The quick brown fox 敏捷的狐狸
14px
400
1.43
0.1em
眉题
Uppercase monospaced project categories and small metadata.
The quick brown fox 敏捷的狐狸
14px
400
1.43
0.1em
代码
Monospaced utility treatment when code-like content appears.
const style = 1;
14px
400
1.43
0.1em
间距与布局
基准单位 2px · 密度：适中
60px版块间距
20px元素间距
—卡片内边距
1400px内容最大宽度
4px
5px
10px
20px
21px
30px
60px
120px
180px
Use a broad, centered desktop canvas with a measured maximum width of 1400px. The hero is full-bleed media, followed by a narrow horizontal navigation bar. Below, keep the introduction left-aligned and let project cards form an asymmetric mosaic rather than a uniform grid. The work and news sections sit on black with generous breathing room and a comfortable density. Use measured section and element rhythms of 60px and 20px where applicable; finish with a full-width white footer.
圆角与层次
输入框 · 10px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is predominantly flat: no measured shadows or gradients. Separate content through the black-to-white footer inversion, image framing, whitespace, and fine rules between news entries. Avoid raised cards; the form's measured 10px radius is an isolated input treatment, not a general card radius.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Full-bleed hero
Edge-to-edge campaign footage carries the opening view, with a large studio wordmark layered over the image.
Navigation strip
A black horizontal bar pairs the studio name at left with compact white links at right.
Studio introduction
A short editorial statement sits left-aligned on black, followed by small uppercase Courier New service labels.
Project mosaic
Campaign imagery and captions occupy unevenly sized, asymmetrically placed blocks; project names are prominent links and categories are monospaced labels.
News feed
News headlines appear in a vertical list with small date and category labels, divided by fine rules.
White footer and signup
A white closing band combines a large outlined wordmark, hiring and utility links, and a newsletter field with a 10px measured radius.
Imagery · Lead with cinematic video or photography, cropped edge-to-edge in the hero and presented in varied rectangular frames across the portfolio. Images show real campaigns and brand work; their colours are expressive but belong to the media, not the interface palette. Keep image treatment natural and avoid decorative illustration or product-render styling.
Set essential text in #ffffff against dark sections.
Let project imagery supply the vivid colour.
Mix light Helvetica with tracked Courier New labels.
Build the portfolio as an asymmetric image mosaic.
End with a clearly contrasting white footer.
✕ 不该做
Do not add unmeasured interface accent colours.
Do not treat video colours as brand palette tokens.
Do not force portfolio items into a uniform grid.
Do not add shadows or gradients.
Do not turn every heading into monospaced uppercase.
Do not apply rounded cards throughout the page.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new creative-agency page in the Stink Studios visual style. Use Studio Black (#000000) as the main canvas and Gallery White (#ffffff) for high-contrast text; reserve Oxide Brown (#573332) for secondary surface use only if supported by the content. Lead with full-bleed cinematic campaign imagery, then use a compact horizontal navigation strip, an editorial introduction, an asymmetric portfolio mosaic, and a rule-separated news feed. Set headlines and navigation in light Helvetica-style sans serif; use widely tracked uppercase monospace for metadata and actions, with an optional serif display contrast. Keep the interface flat, spacious, and image-led. Avoid shadows, gradients, decorative accents, and uniform card grids. Close with an inverted white footer for utility links and newsletter signup.
