OpenDesign·你的设计资产库

网页参考

Pentagram

首屏以博物馆项目大图和项目文字展示，下方切入深色标题区。

StudioBrandingEditorial
Pentagram 网站截图

理解与复用

从这份设计中借鉴什么

基于收录时的历史截图解读

设计亮点

  • 作品图直接证明机构产出
  • 页面用明暗区块区分项目与机构叙事

适合什么项目

  • 设计机构作品集
  • 项目案例入口

如何带进你的设计

  • 让每张作品图对应清楚的名称与角色
  • 用章节背景变化组织长页面

使用边界

  • 项目图像与标志属于原作品，引用范围需另行核实
  • 仅依据已检查的历史预览；未核实现行网站、交互、精确 Tokens 或素材授权。

此解读由 Agent 编写，尚未经过人工终审；不代表原作者规范或使用授权。

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 — 移动首屏
移动首屏

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

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

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明，可复制给 Agent。