精选 · 开放 · 免费
Haleys
一个融合哥特字体与柔和苔藓色调的学术作品集。
PortfolioCurationTypographyEditorialCalm
01
设计气质 DNA
手工艺学术哥特式精心策划永恒
一张深色橡木书桌上的手装订论文集
02
色彩
#f8f2deInk
#bead89Ink soft
#12332bBG
#5a7c6bMuted
rgba(248, 242, 222, 0.2)Line
深邃森林绿背景上的高对比度羊皮纸色
03
字体
blackletter · transitional-serif
- display
72px · 400 - h1
32px · 400 - body
20px · 300 - caption
16px · 200
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
章节与网格项之间采用充裕的垂直间距
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
对称网格，中央对齐，并带有宽边距
07
动效与交互
240msmicro
300mssmall
800msmedium
ease-outeasing
hover时平滑的background-color和border-color过渡 · 装饰性SVG元素的填充与描边过渡
导航与项目链接在hover时的细微色彩变化与下划线 · 通过cursor: pointer状态提供即时视觉反馈
08
组件
- button 基于文本的导航，带有细微边框，采用小写/斜体样式
- card 基于文本的项目列表，无纯色背景
- chip 导航栏中的小型轮廓徽章（如 'w', 'T', 'A'）
- hero 居中的大型blackletter字体名称，两侧伴有衬线体标语
09
文案语气与禁用清单
- 语气 手工艺感、学术性、略带趣味
- 标题风格 精致的blackletter与过渡衬线体，通常居中
- 按钮文案 克制且融入设计，避免使用激进的按钮
- 不要使用干净、现代的无衬线字体——截图显示的是blackletter与过渡衬线体的混合。
- 不要使用明亮或饱和的背景色——截图显示的是深邃、柔和的森林绿 (#12332b)。
- 不要使用高对比度的行动号召按钮——截图显示的是克制的、基于文本的导航链接。
- 不要使用复杂、多栏且带有粗重边框的网格——截图显示的是宽敞、对称且线条精致的布局。
- 不要使用活泼或异想天开的配色方案——截图使用的是克制的奶油色 (#f8f2de) 和苔藓绿 (#5a7c6b) 组合。
- 不要使用激进的投影或厚重的视觉重量——截图显示的是非常细微、极简的阴影效果。
- 避免: 霓虹色
- 避免: 激进的无衬线字体
- 避免: 没有呼吸空间的密集文本块
- 避免: 高饱和度或暖色调背景
- 避免: 醒目的行动号召
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
该网站是软件设计师 Haley Park 的个人作品集。其定位为一个学术性、手工艺感的空间，用于展示“软件设计与各种趣事”。主要背景色是深邃的森林绿 (#12332b)，文字采用奶油般的羊皮纸色 (#f8f2de)，并以次要的苔藓绿色 (#5a7c6b) 用于元数据和装饰元素。排版极具特色，主名称使用精致的blackletter字体，项目标题和导航则使用优雅的过渡衬线体。关键的设计规则包括：避免使用现代无衬线字体、明亮或饱和的颜色、激进的行动号召按钮、密集的文本块以及厚重的投影。布局宽敞而对称，优先考虑呼吸空间和精致的线条感，而非厚重的容器。
en · zh-CN · zh-TW · ja · ko