Haley Park 的作品集以深松绿为底，搭配纤细的编辑风衬线字与精致装饰线稿。作品以疏朗、以文字为主的目录方式呈现，细线与俏皮细节贯穿页面。
North star · Keep the page feeling like a single dark-green editorial canvas, with ivory serif type and delicate ornament doing the structural work.
The page is built around a nearly continuous evergreen canvas, #143930, so the portfolio reads as one composed editorial field rather than a stack of contrasting panels. Warm ivory #f8f2de carries the name, project titles, navigation, and other high-priority text; muted sand #bead89 quiets dates and secondary labels. Thin #456859 rules and outlines define the navigation and section dividers without introducing card-heavy UI, while the darker #12332b is reserved for subtle surface variation. High-contrast, slender serif lettering gives the interface a literary, slightly antique character. A wispy display face brings a more expressive flourish to the oversized name and curved contact message. Project titles sit in a loose multi-column catalogue over understated architectural line art, with generous breathing room between groups. Small plus marks, keyboard hints, fine borders, and ornamental motifs add structure without competing with the work.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
强调色
表层色
中性色
功能色
页面底色 · Evergreen Canvas表层 · Deep Canopy主文字 · Warm Parchment次要文字 · Muted Sand描边 · Moss Line
Oversized display name and expressive contact lettering
角色
示例
字号
字重
行高
字距
特大标题
Expressive oversized name and curved contact message.
Haley Park
96px
100
1
-0.01em
一级标题
Primary section or page headings.
Haley Park
32px
200
1.2
0.005em
二级标题
Secondary editorial headings and project group labels.
The quick brown fox 敏捷的狐狸
27px
200
1.3
0.005em
三级标题
Project titles and smaller prominent headings.
The quick brown fox 敏捷的狐狸
21.5px
200
1.3
0.005em
四级标题
Compact subsection headings.
The quick brown fox 敏捷的狐狸
21px
200
1.2
0.005em
正文
Introductory copy and general explanatory text.
The quick brown fox 敏捷的狐狸
16px
200
1.5
0
辅助文字
Project dates, classifications, and small metadata.
The quick brown fox 敏捷的狐狸
13px
200
1.5
0
导航
Top navigation and prominent footer links.
The quick brown fox 敏捷的狐狸
19px
200
1.5
0.004em
间距与布局
基准单位 1px · 密度：适中
51px版块间距
11px元素间距
—卡片内边距
1389px内容最大宽度
3px
4px
11px
12px
13px
15px
18px
22px
26px
28px
32px
51px
64px
A centered editorial composition sits within a measured maximum width of 1389px. The opening places a slim outlined navigation above a centered name, with short descriptors flanking it. Project work uses a loose multi-column arrangement rather than boxed cards; ornamental line art anchors the larger featured pieces. Fine horizontal rules and plus marks divide groups. Section rhythm is spacious, with a measured 51px section gap and 11px element gap, while small captions stay close to their titles. The overall density is comfortable, not sparse.
圆角与层次
导航 · 5px
hairline · nav, other
The interface is mostly flat, with no prominent card shadows or raised panels. Hairline borders and muted rules create separation, including a subtle measured shadow treatment around navigation details. Layering comes from line illustrations sitting behind text, not from stacked surfaces; preserve low contrast so decoration never overwhelms labels.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Outlined navigation
A long, slender rounded outline contains evenly distributed serif links, small keyboard-hint boxes, and plus-sign end details.
Intro masthead
Center the expressive portfolio name between short left and right descriptors on the uninterrupted evergreen canvas.
Section divider
Use a fine muted rule with a centered italic serif label and small plus marks at its ends.
Featured project catalogue
Arrange project titles in a loose multi-column grid, with dates in muted sand and etched ornamental graphics behind the entries.
Compact project index
Present numerous small projects as text-led entries with concise category and year metadata, leaving room for a central decorative motif.
Contact flourish
Set a short invitation in expressive curved display lettering, paired with a small understated supporting line.
Social footer
Group social and archive links in compact rows, with muted separators and a small playful sign-off.
Imagery · The visible portfolio relies on delicate, low-contrast architectural and geometric line illustrations rather than photography. Large symmetrical motifs sit behind or beneath project titles, serving as texture and framing rather than literal thumbnails. Keep graphics monochromatic and subdued against the green canvas; the image treatment should feel etched, ornamental, and secondary to readable ivory typography.
Keep the evergreen canvas continuous across major sections.
Use warm ivory for primary titles and navigation.
Set dates and secondary metadata in muted sand.
Prefer delicate serif typography over heavy sans-serif treatments.
Use hairline rules and ornamental line art as structural cues.
Leave generous breathing room around project groups.
✕ 不该做
Do not introduce bright, high-saturation accents.
Do not turn every project into a raised card.
Do not let illustrations compete with project names.
Do not use heavy, bold display typography.
Do not replace the editorial catalogue with dense dashboards.
Do not add large photographic treatments absent from the visual language.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new page in Haley Park’s editorial portfolio style. Use Evergreen Canvas (#143930) as the continuous backdrop, Warm Parchment (#f8f2de) for primary headings and links, Muted Sand (#bead89) for secondary metadata, and Moss Line (#456859) for hairline dividers and outlines; reserve Deep Canopy (#12332b) for subtle surface contrast. Choose slender serif typography, with an expressive display face only for a brief focal flourish. Organize content as an airy text-led catalogue with loose columns, fine section rules, small ornamental marks, and restrained etched line art behind—not over—the content. Keep surfaces flat, borders delicate, and hierarchy clear through spacing and type rather than strong fills. Preserve a literary, slightly antique mood without adding loud colors, heavy shadows, or dense card UI.
