精选 · 开放 · 免费

Pentagram

一个展示多元化跨学科作品的高端设计机构作品集。

studiobrandingeditorial

Pentagram 网站截图

↓ 下载设计系统包 (40 MB)在 OpenDesign 中打开

原站: https://pentagram.com

📦 浏览包内文件 →

01

设计气质 DNA

高端设计作品集极简主义编辑式

一个精选的高端设计项目画廊。

02

色彩

#1a1a1aInk

#767676Ink soft

#ffffffBG

#8c8c8cMuted

rgba(26, 26, 26, 1.0)Line

以高对比度的黑白为基础，辅以灰度中间色。

03

字体

grotesque-sans · humanist-sans

display52px · 500
heading32px · 400
body19px · 400
small16px · 400
tiny13px · 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

包内真实截图

Pentagram — 桌面首屏（hero） — 桌面首屏（hero）

Pentagram — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Pentagram — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Pentagram — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Pentagram — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Pentagram — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Pentagram — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Pentagram — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Pentagram — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Pentagram — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Pentagram — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Pentagram — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Pentagram — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Pentagram — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Pentagram — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Pentagram — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Pentagram — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Pentagram — 移动首屏 — 移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

Pentagram是一个高端多学科设计工作室的作品集。其设计特点是极致克制，采用单色配色方案（墨色：#1a1a1a，背景：#ffffff，静音色：#767676），让摄影作品成为焦点。字体排印干净且功能性强，正文使用humanist-sans，标题使用grotesque-sans，字号范围为13px至52px。关键特征包括充裕的空白、全出血图像和最小的界面装饰。关键设计约束：绝不使用装饰性字体，避免艳丽的强调色，保持大字号排印，并保持内容区块间显著的垂直节奏。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko