Extract Studio 以醒目的编辑式字体搭配克制的黑白配色，并用浅绿色区块呈现新闻内容。宽松的项目作品集与沉浸式媒体共同讲述品牌故事，深色内嵌页脚则形成鲜明收尾。
North star · Let oversized editorial typography and carefully framed work create impact; keep the interface itself quiet.
The visual strategy is built on a quiet white canvas, near-black text, and one pale green band reserved for news and the footer area. An oversized serif wordmark dominates the opening, while a more restrained serif introduces the studio; ABC Diatype handles navigation, project labels, and body copy with a practical sans-serif counterpoint. The layout uses generous white space and broad media placements to let work lead rather than relying on decorative UI. Project images appear in a clean, aligned collection with compact captions. The news area switches to pale green, creating a clear change of pace without adding a new brand colour. Its footer places small contact details and a newsletter form inside a near-black panel, then uses large serif lettering for a memorable closing statement. Keep borders and controls understated; visual emphasis comes from scale, spacing, and contrast.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
强调色
表层色
页面底色 · Gallery White表层 · Soft Lime表层 2 · Studio Ink主文字 · Studio Ink次要文字 · Gallery White描边 · Studio Ink
文字
背景
对比度
WCAG
#070707 Studio Ink
#ffffff Gallery White
20.14:1
AAA
#070707 Studio Ink
#e7feda Soft Lime
18.79:1
AAA
#ffffff Gallery White
#e7feda Soft Lime
1.07:1
不达标
#ffffff Gallery White
#070707 Studio Ink
20.14:1
AAA
字体
字号阶梯：Custom（比例约 1.794，正文 18px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
ABC Diatype
网络字体 · 字重 400 / 700 · 占比 81%
免费替代：DM Sans
Navigation, body copy, project captions, and sans-serif section headings.
Aa 设计
Feature Deck
网络字体 · 字重 400 · 占比 19%
免费替代：Instrument Serif
Display wordmark treatment and editorial serif headlines.
角色
示例
字号
字重
行高
字距
特大标题
Oversized opening wordmark treatment.
Extract Studio
104px
400
1.5
0
一级标题
Editorial hero statement and prominent serif headline.
Extract Studio
44.5px
400
1.25
0
二级标题
Section headings, including news and newsletter titles.
Extract Studio
33.5px
400
1.25
0
正文
Studio introduction, news descriptions, and contact copy.
The quick brown fox 敏捷的狐狸
18px
400
1.5
0
导航
Primary navigation links over the hero media.
The quick brown fox 敏捷的狐狸
18px
400
1.5
0
链接
Project titles and compact section links such as View all.
The quick brown fox 敏捷的狐狸
21px
400
1.5
0
间距与布局
基准单位 1px · 密度：宽松
111px版块间距
37px元素间距
—卡片内边距
1320px内容最大宽度
9px
12px
14px
16px
19px
23px
25px
28px
32px
37px
65px
74px
93px
111px
The measured content max width is 1320px, with a spacious density and a section gap of 111px. The opening is left-aligned: a very large wordmark, a short serif statement, then a broad, rounded media panel. Project work forms an aligned image collection with captions; an introductory statement follows before the three-column news area. The page ends with a multi-column contact and newsletter layout. Preserve generous vertical pauses and clear full-width background bands.
圆角与层次
输入框 · 5px
图片 · 9px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is mostly flat: no measured shadows or gradients define its surfaces. Separate content with whitespace, image framing, and the shift from white canvas to pale green. Media corners are gently rounded, and the footer uses a dark inset panel. Keep outlines and form borders fine and functional rather than decorative.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Hero wordmark
Set the studio name as a huge, heavy-looking black display mark against white, followed by a restrained serif introduction.
Hero media
Place broad, rounded video or brand imagery below the introduction; a compact white navigation capsule overlays the media.
Project gallery
Arrange project imagery in aligned cards with concise black titles and short descriptive labels; keep the surrounding interface minimal.
Section link
Use plain black text links such as “View all” with understated treatment rather than filled buttons.
News cards
Present three editorial items on the pale green band, each with an image, a compact title, and a short description.
Newsletter and contact footer
Use a dark inset panel within the green band for the email field, contact details, social links, and large serif closing statement.
Imagery · Use large, polished brand and campaign imagery, including identity mockups, environmental applications, screens, and editorial project photography. The opening uses full-bleed video or media within a rounded frame; portfolio thumbnails stay consistently aligned and are followed by small, direct captions. Image colours may be vivid or dark, but belong to project artwork rather than the site palette. News cards pair compact images with concise copy.
Set headings in an expressive, regular-weight serif.
Keep navigation and supporting copy in a clean sans-serif.
Give the hero and selected projects generous image space.
Reserve #e7feda for the news and footer region.
Use #070707 for primary text and restrained borders.
Let whitespace separate sections instead of adding decoration.
✕ 不该做
Do not introduce extra brand colours beyond the measured palette.
Do not add gradients or decorative shadows.
Do not crowd the page with dense UI or excessive labels.
Do not turn plain links into prominent filled buttons.
Do not treat colours inside project imagery as interface colours.
Do not use all-caps or heavy tracking as a general text style.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a design-agency page using Extract Studio’s spacious editorial language. Set the canvas to Gallery White (#ffffff), primary text and links to Studio Ink (#070707), and use Soft Lime (#e7feda) as a single broad section band rather than scattered accents. Pair an expressive serif display face with a neutral sans-serif for navigation, captions, and body copy. Start with a dominant wordmark and short statement, then give featured work large, cleanly framed media with compact captions. Follow with a concise studio introduction and an editorial three-column news area. Finish with contact details and a newsletter form in a dark inset panel. Keep alignment crisp, corners gently rounded on media, borders subtle, and shadows absent. Preserve generous whitespace; let typography and project imagery supply the drama.
