North star · Keep the interface monochrome and typographically bold, letting an irregular gallery of vivid client work provide the colour.
The page is built on a pure black canvas (#000000), with white (#ffffff) reserved for the headline, primary copy, logo, and selected navigation links. Muted gray (#8e8e8e) softens secondary navigation and project captions. The restrained interface creates a frame for a highly varied portfolio: project imagery supplies the page’s bright cyan, yellow, red, and photographic tones, rather than introducing extra interface colours. A dramatic, condensed Martin display face gives the hero its poster-like impact, while America handles readable body copy, navigation, and captions. The opening layout balances a large, left-aligned typographic statement against a compact studio introduction. Below, project tiles form a tall, staggered three-column gallery with varied image proportions and short labels. Spacing around the content is generous, while the gallery itself feels continuous and dense. Flat presentation, minimal chrome, and a hairline closing rule keep attention on the work.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
表层色
中性色
页面底色 · Studio Black主文字 · Paper White次要文字 · Quiet Gray描边 · Studio Black
文字
背景
对比度
WCAG
#ffffff Paper White
#000000 Studio Black
21:1
AAA
#8e8e8e Quiet Gray
#000000 Studio Black
6.41:1
AA
字体
字号阶梯：Custom（比例约 6.955，正文 22px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
America
网络字体 · 字重 400 · 占比 95%
免费替代：Inter
Main body, navigation, and project captions.
Aa 设计
Martin
网络字体 · 字重 400 · 占比 4%
免费替代：Oswald
Oversized hero display headline.
Aa 设计
Helvetica Neue
系统字体 · 字重 500 · 占比 2%
免费替代：Inter
Measured skip-link and some link or navigation styles.
角色
示例
字号
字重
行高
字距
特大标题
Oversized condensed hero statement, arranged as tightly stacked lines.
Break Maiden
153px
400
0.6
0
正文
Studio introduction and descriptive supporting copy.
The quick brown fox 敏捷的狐狸
22px
400
1.25
0
辅助文字
Small client project names and subdued descriptions.
The quick brown fox 敏捷的狐狸
19.5px
400
1
0
按钮
Accessible skip-to-content control; no prominent hero CTA is visible.
The quick brown fox 敏捷的狐狸
19.5px
500
normal
0.02em
导航
Header links for Work, About, Contact, and Shop.
The quick brown fox 敏捷的狐狸
19.5px
400
1
0
间距与布局
基准单位 2px · 密度：适中
43px版块间距
18px元素间距
—卡片内边距
—内容最大宽度
1px
2px
12px
13px
18px
27px
43px
78px
110px
The opening viewport places a compact circular wordmark at the upper left and a horizontal navigation at the upper right. Below, a left-aligned, multi-line display headline shares the hero with a narrower studio introduction on the right. The work gallery begins beneath this split and runs as a tall, staggered three-column arrangement; image tiles vary in height and captions sit close to each tile. The measured page is black throughout, with generous breathing room around the hero and a long, visually dense sequence of projects. Avoid inventing a maximum width or fixed spacing values.
圆角与层次
hairline · nav
The interface is essentially flat: no cards, prominent shadows, or raised surfaces are visible. Black gaps separate image tiles, while the artwork itself supplies visual contrast and depth. A fine horizontal rule closes the visible gallery; keep outlines and borders minimal.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Header navigation
Small wordmark at the upper left; Work, About, Contact, and Shop links align at the upper right in white and muted gray.
Hero statement
Large, tightly stacked white Martin lettering with an inline running-animal mark, arrow, and small star-like symbol.
Studio introduction
Short white America paragraph aligned beside the hero headline, describing the creative studio and its services.
Portfolio gallery
Long three-column staggered arrangement of client project images, with variable tile proportions and black gutters.
Project caption
Compact client or project title with a quieter gray descriptor directly below each image.
Gallery closing rule
A thin, subdued horizontal line appears near the end of the portfolio against the black canvas.
Imagery · Use an eclectic portfolio of client branding, packaging, product photography, murals, and graphic illustrations. Images are presented as rectangular tiles with varied proportions and little visible treatment, allowing their original colours and art direction to remain intact. Arrange the work in a staggered three-column gallery, with brief name and descriptor captions beneath tiles. Keep the imagery vivid against the black page rather than tinting or unifying it with an interface filter.
Use #8e8e8e for secondary navigation and captions.
Set the hero as condensed, oversized, stacked display lettering.
Build the portfolio as a staggered three-column image gallery.
Keep project images in their original vivid colours.
Keep controls and card treatments visually flat.
✕ 不该做
Do not add coloured interface surfaces or gradients.
Do not make the project grid uniform in tile height.
Do not let captions compete with the artwork.
Do not add prominent card shadows or rounded containers.
Do not center the hero headline or replace its split layout.
Do not apply a colour filter to portfolio imagery.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new creative-studio page in Break Maiden’s visual style. Use Studio Black (#000000) as the full-page canvas, Paper White (#ffffff) for the main headline and copy, and Quiet Gray (#8e8e8e) for secondary links and captions. Place a compact wordmark opposite a restrained horizontal navigation. Create a dramatic, left-aligned condensed display headline, balanced by a short supporting paragraph. Use a clean sans-serif for body copy and a tall, staggered three-column portfolio gallery with varied rectangular image proportions and concise captions. Let client artwork provide the page’s colour; do not add decorative interface colours, gradients, rounded cards, or heavy shadows. Maintain generous space around the hero, close-set captions, flat presentation, and a minimal closing rule. Do not assume unmeasured fixed dimensions.
