North star · Keep the studio interface nearly black and typographically restrained, giving each client project image room to command attention.
The page is anchored by a near-black canvas (#080808) that stays consistent across the long scroll, letting project imagery carry most of the variation. Off-white (#f3f3f3) headlines and muted grays establish a clear hierarchy without introducing bright section bands; faint charcoal borders separate portfolio frames and content areas. Aeonik is the primary voice: clean, rounded sans-serif headlines sit large and centered in the hero, then shift to left-aligned section headings and compact supporting copy. Input appears in small technical-style labels and navigation details, adding a subtle contrast in texture. The layout is spacious and restrained, with narrow centered content zones, generous gaps, and repeated project showcases that alternate large image-led moments with dark breathing room. Buttons use pale fills against the dark canvas, while warm beige accent (#e7c59a) is sparing. Keep gradients and other colors from the client work contained within imagery rather than treating them as studio brand colors.
Primary headlines, body copy, navigation, buttons, and links.
Aa 设计
Input
网络字体 · 字重 400 · 占比 17%
免费替代：IBM Plex Mono
Small technical-style navigation and section eyebrow labels.
角色
示例
字号
字重
行高
字距
特大标题
Oversized hero headline and other prominent statement text.
Hyperstudio
63px
400
1.05
-0.011em
一级标题
Primary page or section headline, including the hero title.
Hyperstudio
44px
400
1.07
-0.007em
二级标题
Services, process, and studio-introduction section headings.
Hyperstudio
34px
400
1.03
0
三级标题
Service titles and prominent portfolio or process subheads.
The quick brown fox 敏捷的狐狸
23.5px
400
1.07
0
四级标题
Smaller supporting titles and card-level headings.
The quick brown fox 敏捷的狐狸
22.5px
400
1.11
0
正文
Main descriptive copy for services, process, and studio rationale.
The quick brown fox 敏捷的狐狸
17.5px
400
1.35
0
辅助文字
Project labels, supporting notes, and smaller content captions.
The quick brown fox 敏捷的狐狸
16.5px
400
1.28
0
按钮
Primary and secondary action labels.
The quick brown fox 敏捷的狐狸
16px
400
1.38
0
链接
Navigation, inline actions, and contact links.
The quick brown fox 敏捷的狐狸
16px
400
1.38
0
间距与布局
基准单位 4px · 密度：宽松
130px版块间距
10px元素间距
80px卡片内边距
850px内容最大宽度
2px
4px
6px
7px
8px
10px
11px
14px
16px
19px
20px
23px
24px
25px
33px
35px
The page uses a centered, spacious composition with a measured max content width of 850px. Navigation and the hero sit within a compact top frame; the hero headline is centered, while services and process content shift to left alignment. Service cards form a two-column grid, then the portfolio becomes a long sequence of framed, mostly single-column project showcases with occasional full-bleed media. Large vertical gaps separate major blocks, keeping overall density low despite the extended page length.
圆角与层次
按钮 · 10px
图片 · 50%
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface reads mostly flat: dark canvas, restrained card surfaces, and fine charcoal borders do the structural work. No measured shadows define the system. Pale CTA fills provide the clearest separation from the background; portfolio media sits in frames with subtle rules rather than raised, floating cards.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Top navigation
Compact brand lockup with a fine separator, small service and portfolio links, and a pale rounded LET'S CHAT action.
Hero pitch
Centered availability badge, large two-line headline, and paired START NOW and VIEW WORK actions above the first large visual.
Service grid
Four dark service panels in a two-column grid, using small line icons, concise headings, and muted descriptions.
Portfolio showcase
Tall, centered, image-led client project sequences with compact identity labels and thin dark framing.
Process block
Two-column process section with a left-side headline and quote action, paired with numbered steps and concise explanations.
Studio rationale
Dark inset content panel with centered heading, short explanatory copy, and a restrained manifesto link.
Contact strip
Compact closing invitation with email context and a pale form CTA, followed by a small footer contact prompt.
Imagery · Portfolio media is the primary visual event: branded identity systems, websites, print pieces, and product or technology scenes appear in large framed showcases. Images mix photographic scenes, graphic identity work, and polished product renders. They may bring saturated blues, pale neutrals, or warm brand colors, but those colors belong to client artwork rather than the Hyperstudio interface. Keep imagery tightly framed and preserve its contrast against the near-black surroundings.
Set primary text in #f3f3f3 and secondary copy in measured grays.
Let client portfolio images supply most of the visual variety.
Separate content with thin #212121 rules rather than shadows.
Keep hero copy centered and later service or process content left-aligned.
Use pale buttons as clear, occasional action anchors.
✕ 不该做
Do not add bright section backgrounds to the studio interface.
Do not treat colors from client artwork as brand accents.
Do not crowd the page with dense copy or tight section spacing.
Do not use heavy shadows or raised-card effects.
Do not apply a display font or bold weight to every heading.
Do not turn the sparse warm accent into a dominant color.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new agency page in Hyperstudio’s restrained dark portfolio style. Use Studio Black (#080808) for the continuous canvas, Gallery White (#f3f3f3) for key headings, Soft Ash (#989898) for supporting copy, and Hairline Charcoal (#212121) for subtle separators. Keep client imagery as the main source of color, framed cleanly against dark negative space. Use Aeonik or Inter for the primary sans-serif and a restrained Input-like mono face for small technical labels. Center the hero and its paired actions; let content sections move into left-aligned layouts and sparse two-column grids. Favor generous measured spacing, slim borders, and flat surfaces over shadows. Use pale filled buttons sparingly and keep Warm Sand (#e7c59a) to tiny details. Preserve a calm, editorial rhythm.
