North star · Let a sparse white canvas, expressive serif lettering, and layered fashion photography form one quiet editorial composition.
The page is built on a clean white canvas, with the screenshot’s muted photographic grays and greens coming from the project imagery rather than a documented interface palette. Typography provides the main graphic contrast: an oversized, lightweight serif project title sits across the collage, while a restrained sans-serif handles navigation, labels, and small uppercase metadata. The composition is deliberately asymmetric: several photographs of different proportions occupy the upper and central page, overlapping around the title instead of following a conventional card grid. Navigation is distributed across the top edge, leaving substantial white space around the content. Image edges and overlaps do the work of grouping; the interface itself reads flat, with no visible shadows, ornamental borders, or rounded containers. Preserve the unhurried rhythm and generous blank canvas, allowing the title to bridge the images without obscuring the overall impression of a carefully arranged portfolio.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
表层色
页面底色 · Gallery White主文字 · Gallery White
字体
字号阶梯：Custom（比例约 1.834，正文 14px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
content
网络字体 · 字重 400 · 占比 63%
免费替代：Montserrat
Navigation, project labels, metadata, and supporting interface text
Aa 设计
title
网络字体 · 字重 400 · 占比 37%
免费替代：Cormorant Garamond
Oversized featured project title and editorial headings
角色
示例
字号
字重
行高
字距
特大标题
Oversized serif project title laid across the central image collage.
Laura Monin
158.5px
400
1.2
-0.018em
一级标题
Large serif heading for prominent portfolio content.
Laura Monin
57.5px
400
1.2
0
二级标题
Uppercase sans-serif section headings and labels.
The quick brown fox 敏捷的狐狸
22px
400
1.2
0
三级标题
Supporting sans-serif subheads.
The quick brown fox 敏捷的狐狸
18px
400
1.15
0
正文
Compact uppercase supporting copy and project metadata.
The quick brown fox 敏捷的狐狸
14px
400
1.2
0
导航
Small uppercase site identity and navigation links.
The quick brown fox 敏捷的狐狸
14px
400
1.15
0
间距与布局
基准单位 1px · 密度：适中
37px版块间距
—元素间距
—卡片内边距
—内容最大宽度
7px
9px
12px
37px
45px
58px
86px
115px
122px
182px
200px
An open, white desktop canvas holds a compact navigation row near the top and a loose collage concentrated in the upper and central area. Images vary in size and align asymmetrically, with the large serif project title crossing their edges. Preserve generous unused space below and around the composition. Avoid imposing a conventional card grid or a tightly bounded content container; the page’s rhythm comes from uneven image placement and broad intervals of blank canvas.
圆角与层次
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is visually flat: no measured shadows, rounded components, or visible decorative borders. Build depth through photographs overlapping and sitting behind or beside the large title. Keep image edges clean and let differences in crop and placement create the layering.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Top navigation
Distribute the designer name, discipline/contact details, social link, and page navigation across the upper edge in compact uppercase sans-serif.
Project collage
Arrange several differently sized fashion and studio photographs as an asymmetric composition, with deliberate overlap and open white space.
Featured project title
Set the project name in an oversized, regular-weight serif across the middle of the collage so it visually bridges image edges.
Project caption
Place a small uppercase project descriptor close beneath the featured title, keeping it subordinate to both title and photography.
Imagery · Use fashion and textile portfolio photography: a model in a street setting, studio work and materials, and a garment or botanical detail. Mix portrait and landscape crops, with images positioned as independent collage pieces. Keep their natural, muted photographic tones; do not add interface color treatments that compete with the large serif title.
该做与不该做
✓ 该做
Keep the page canvas white and visually quiet.
Use a large editorial serif for the featured project title.
Set navigation and small metadata in restrained uppercase sans-serif.
Compose project photographs asymmetrically and let them overlap.
Leave substantial open space around the collage.
Use imagery as the source of muted tones and visual texture.
✕ 不该做
Do not invent interface colors beyond the measured palette.
Do not organize the hero as a uniform card grid.
Do not add decorative shadows or rounded containers.
Do not let navigation compete with the project title.
Do not fill the large areas of white space with extra content.
Do not flatten the collage into one full-bleed background image.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a fashion textile designer portfolio page in a restrained editorial style. Use Gallery White (#ffffff) as the page canvas; the measured interface palette contains only this hex, so do not invent brand or accent colors. Place compact uppercase sans-serif navigation across the top, then create an asymmetric collage from varied fashion and studio photographs. Layer an oversized regular-weight serif project title across the central images, with a small uppercase project caption nearby. Keep image tones natural and muted, and create depth through overlap and crop rather than shadows, borders, or rounded cards. Preserve generous white space, particularly beyond the collage, and avoid a conventional grid. Use Montserrat as a free sans-serif substitute and Cormorant Garamond as a free serif substitute.
