North star · Keep the page nearly white and editorially sparse, using one prominent portrait and precise dark typography as its focus.
The page uses Gallery White (#ffffff) as an almost uninterrupted canvas, letting the portrait supply the warm beige and grey tones visible in the screenshots rather than treating them as brand colours. Ink (#111111) gives the headline and links a firm editorial presence; Midtone Grey (#464646) and Soft Grey (#757575) carry supporting copy at quieter levels. The headline uses Exposure, a distinctive display face with compact, slightly tightened letterforms, while Ppneuemontreal handles the clean supporting text and social labels. A spacious two-column composition places the headline at left, a tall portrait near the centre, and social links at right. Biography copy sits beneath the image, with substantial open space before the small footer mark. The layout feels deliberately sparse: no visible cards, coloured bands, decorative borders, or prominent buttons compete with the portrait. Keep the hierarchy calm and let alignment and whitespace do the work.
Supporting biography, social links, and smaller interface text.
Aa 设计
Exposure
网络字体 · 字重 400 · 占比 17%
免费替代：Cormorant Garamond
Large editorial opening headline.
角色
示例
字号
字重
行高
字距
一级标题
Opening editorial statement at the upper left.
JP Works
28px
400
1.2
-0.03em
二级标题
Secondary section headings, where present.
The quick brown fox 敏捷的狐狸
22px
400
1.5
0
正文
Biography paragraphs beneath the portrait.
The quick brown fox 敏捷的狐狸
14px
500
1.43
0
辅助文字
Small footer copyright and low-emphasis notes.
The quick brown fox 敏捷的狐狸
11px
400
1.4
0
链接
Social links, including Twitter/X and LinkedIn.
The quick brown fox 敏捷的狐狸
14px
500
1.43
0
间距与布局
基准单位 4px · 密度：宽松
84px版块间距
60px元素间距
—卡片内边距
1392px内容最大宽度
1px
8px
24px
28px
32px
48px
60px
84px
168px
A spacious two-column opening composition sits within a measured page maximum width of 1392px. The headline aligns to the left, the tall portrait occupies the central column, and compact social links sit to the right. Supporting biography aligns beneath the portrait rather than spanning the full page. The section rhythm is generous, with a large open area before the small footer mark and copyright line. Keep the density low and preserve the asymmetry; do not force the content into cards or a conventional centered hero stack.
圆角与层次
lg · other
The page is predominantly flat: white canvas, dark text, and no visible card borders or section dividers. The measured shadow is not a defining feature of the screenshot and should not be introduced as a page-wide styling device. Keep layering limited to the photograph and any small floating support control if reproducing the captured interface.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Editorial headline
A regular-weight Exposure statement in dark ink, aligned left and broken into short lines.
Portrait
Large, rectangular, vertically oriented studio photograph centered between headline and social links.
Biography
Compact Ppneuemontreal paragraphs aligned below the portrait in muted grey.
Social links
Simple text links such as Twitter/X and LinkedIn, set in dark sans-serif without visible button backgrounds.
Footer mark
A small centered brand mark and subtle copyright line on the white canvas.
Imagery · One large, vertically framed portrait is the defining visual asset. The subject is seated against a warm, understated studio background, with natural floor and backdrop tones. Keep the photograph rectangular and unadorned, at substantial visual scale, with no added frame or decorative treatment. Its beige and grey hues belong to the photo, not the measured brand palette.
Use Gallery White (#ffffff) as the dominant canvas.
Reserve Editorial Ink (#111111) for the headline and key links.
Set the opening statement in an editorial serif display face.
Keep the portrait large, vertical, and visually unframed.
Align biography copy beneath the portrait.
Use generous whitespace to separate content from the footer.
✕ 不该做
Do not add bright accent colours or coloured section bands.
Do not turn text groups into cards.
Do not add prominent borders or decorative dividers.
Do not stretch biography copy across the whole page.
Do not mistake warm portrait tones for brand colours.
Do not crowd the headline, portrait, and social links together.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new page in this restrained JP Works editorial portfolio style. Use Gallery White (#ffffff) for the canvas, Editorial Ink (#111111) for the display headline and links, and Reading Grey (#464646) or Quiet Grey (#757575) for supporting copy. Set the main statement in a refined serif display face with close, intentional tracking; use a clean sans-serif for biography and interface text. Compose an asymmetrical, spacious layout with a left-aligned headline, one prominent unframed portrait near the center, and a small social-link group to the right. Place concise biography copy beneath the image. Keep the page flat and avoid cards, strong borders, gradients, and decorative colour. Leave ample open space before a minimal footer mark and copyright.
