精选 · 开放 · 免费
Smilingwolf
一个高端品牌与数字设计机构的作品集，以大幅摄影图片与清晰字体为特色。
AgencyPhotographicCleanPremiumCase Study
01
设计气质 DNA
设计机构作品集摄影极简精致
高端摄影画廊遇见瑞士设计工作室
02
色彩
#131713Ink
rgba(19,23,19,0.5)Ink soft
#F7F3F0BG
rgba(19,23,19,0.15)Line
采用温暖的米白色背景与近黑色墨水，色彩完全依赖于摄影图片。
03
字体
transitional-serif · geometric-sans · monospaced
- display
59px · 520 - body
12px · 400 - caption
10px · 400 - mono
10px · 400
导航与标签使用等宽字体大写形式 · 展示标题采用紧缩字距与衬线字体 · 几何无衬线字体是正文内容的主力字体
04
间距
4px
8px
10px
12px
16px
20px
24px
48px
60px
结合10-20px的紧凑栏间距与60px的大间隔，为主要内容块之间创造充足的呼吸空间。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 0px
lg · 0px
pill · 0px
采用1px薄边框，颜色为 rgba(19,23,19,0.15)，谨慎地用于分隔线与微妙的标签轮廓。
06
布局
1280container
12columns
20pxgutter
768 / 1024breakpoints
一个干净的单栏布局用于主作品集列表，采用全宽图片与充足的垂直间距。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
交互元素上的微妙悬停状态 · 页面导航与悬停效果的平滑转场
链接与标签上的微妙色彩变化或下划线出现。 · 标准的指针光标交互。
08
组件
- button 带1px薄边框与大写等宽文本的内联文字链接。
- card 作品集项目包含大图、大写等宽标签、大号衬线标题与无衬线副标题。
- chip 带1px薄边框与4px圆角的 小号大写等宽标签。
- input 在提供的截图中不可见。
- hero 一个全宽摄影背景图，无文字覆盖层，下方为设计机构名称与导航。
09
文案语气与禁用清单
- 语气 精致、自信且克制。
- 标题风格 直接、简洁且富有冲击力，以大号衬线或无衬线字体呈现。
- 按钮文案 简单的大写等宽文本，常搭配箭头或薄边框。
- 不要使用明亮、人工的强调色——截图显示了一个中性色调调色板，图片提供所有色彩。
- 不要在主要容器上使用圆角——截图显示的是锐利的4px或0px边角。
- 不要在卡片或容器上使用投影——截图显示的是完全扁平的表面。
- 不要全部文本都使用无衬线字体——截图显示大标题使用衬线字体，而界面使用等宽字体。
- 不要用密集信息填充布局——截图显示了充足的留白与单栏流动。
- 不要使用粗重的边框——截图显示的是非常纤薄、微妙的分隔线与轮廓。
- 避免: 过多的感叹号
- 避免: 过于技术化的术语
- 避免: 侵略性的营销语言
- 避免: 色彩斑斓的用户界面元素
- 避免: 主要容器上的圆角
- 避免: 容器上的投影
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
一个高端品牌与数字设计机构的作品集网站。其设计基因由温暖的米白色背景 (#F7F3F0) 与近黑色文本 (#131713) 定义，视觉趣味完全依赖于大幅、高质量的摄影图片。字体系统混合使用了一种过渡衬线字体作为展示标题，一种几何无衬线字体作为正文，以及一种大写等宽字体风格用于导航与标签。关键色彩为温暖的米白色 (#F7F3F0) 与近黑色 (#131713)。关键设计约束包括：避免使用人工强调色，依赖摄影图片来提供色彩变化；避免在容器上使用圆角或投影，以维持扁平、建筑感；避免密集、杂乱的布局，转而使用充足的留白与严格的单栏网格，让作品自由呼吸。整体美学是克制、精致且高度修饰的，优先考虑作品集项目本身的视觉冲击力。
en · zh-CN · zh-TW · ja · ko