精选 · 开放 · 免费
Pentagram
一个展示多元化跨学科作品的高端设计机构作品集。
studiobrandingeditorial
01
设计气质 DNA
高端设计作品集极简主义编辑式
一个精选的高端设计项目画廊。
02
色彩
#1a1a1aInk
#767676Ink soft
#ffffffBG
#8c8c8cMuted
rgba(26, 26, 26, 1.0)Line
以高对比度的黑白为基础,辅以灰度中间色。
03
字体
grotesque-sans · humanist-sans
- display
52px · 500 - heading
32px · 400 - body
19px · 400 - small
16px · 400 - tiny
13px · 400
04
间距
4px
8px
12px
16px
24px
32px
48px
64px
96px
基于4px的统一节奏,章节间留有充裕的空白。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 0px
pill · 9999px
无可见边框;通过间距和背景色变化实现区隔。
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全出血主视觉图像,后接结构化的网格区域。
07
动效与交互
150msmicro
300mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
UI元素平滑的透明度和变换过渡。 · hover时轻微的缩放或淡入淡出。
文本链接有细微的颜色变化或下划线;交互元素有轻微缩放或聚焦效果。 · 提供即时响应并伴随平滑过渡。
08
组件
- button 极简的基于文本的导航链接,带有下划线hover效果。
- card 大尺寸的摄影项目卡片,带有极简的文字叠加。
- hero 全宽摄影幻灯片,带有大型字体叠加和描述性元数据。
09
文案语气与禁用清单
- 语气 权威、专业且自信。
- 标题风格 采用大号、干净、直接的字体表述。
- 按钮文案 采用微妙的基于文本的号召性用语,常整合在导航或描述性区块中。
- 不要使用多彩配色——截图显示的是严格的单色方案,色彩由摄影内容提供。
- 不要使用装饰性或手写体——截图显示的是干净、功能性的grotesque-sans字体排印。
- 不要使用投影或复杂渐变——截图显示的是通过空间实现清晰分隔的扁平化设计。
- 不要使用拥挤的布局和小间距——截图显示的是充裕的空白和清晰的层级。
- 不要在主要容器上使用圆角——截图显示的是棱角分明的矩形项目卡片。
- 不要使用粗重、饱和的强调色——截图显示所有的色彩趣味都来自摄影内容。
- 避免: 俏皮的语言
- 避免: 艳丽的色彩
- 避免: 装饰性元素
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(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
Pentagram是一个高端多学科设计工作室的作品集。其设计特点是极致克制,采用单色配色方案(墨色:#1a1a1a,背景:#ffffff,静音色:#767676),让摄影作品成为焦点。字体排印干净且功能性强,正文使用humanist-sans,标题使用grotesque-sans,字号范围为13px至52px。关键特征包括充裕的空白、全出血图像和最小的界面装饰。关键设计约束:绝不使用装饰性字体,避免艳丽的强调色,保持大字号排印,并保持内容区块间显著的垂直节奏。
en · zh-CN · zh-TW · ja · ko