精选 · 开放 · 免费

Whitney

为当代艺术博物馆设计的、鲜明高对比度的编辑界面，通过大胆的字体层次与充足的留白取得平衡。

museumart
Whitney 网站截图
↓ 下载设计系统包 (46 MB)在 OpenDesign 中打开

原站: https://whitney.org

📦 浏览包内文件 →

01

设计气质 DNA

博物馆艺术美国当代展览

一本清晰、建筑感十足的展览目录被搬到了网络上。

02

色彩

#d7ff2dAccent
#000000Ink
#212121Ink soft
#ffffffBG
#949494Muted
rgba(0,0,0,1)Line

高对比度单色调色板，以一种极具张力的、高色度的点缀色作为主要行动号召，且使用克制。

03

字体

geometric-sans · grotesque-sans

标题频繁使用大写文本转换 · 正文大量依赖于干净、左对齐的无衬线字体 · 展示尺寸的行高相对较紧，但正文行高则保持标准

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

内容块之间采用充足的垂直间距，并保持干净的水平沟槽，以维持有序、整洁的网格。

05

表面 (圆角 / 阴影 / 边线)

sm · 2px
md · 6px
lg · 0px
pill · 0px

清晰的 1px 实线黑色边框用于定义导航元素和主要按钮，偶尔使用 2px 变体以示强调。

rgba(0, 0, 0, 0.3) 0px 32px 68px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

一个严格、高度结构化的网格布局，带有清晰的水平规则分割线和明确的内容列。

07

动效与交互

100msmicro
100mssmall
200msmedium
ease-outeasing

交互元素上采用极快微时长的、细微的透明度和颜色过渡。

交互元素上细微的透明度变化或背景色偏移。 · 通过背景色或透明度调整获得即时的视觉反馈。

08

组件

09

文案语气与禁用清单

10

包内真实截图

Whitney — 桌面首屏（hero）
桌面首屏（hero）
Whitney — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Whitney — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Whitney — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Whitney — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Whitney — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Whitney — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Whitney — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Whitney — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Whitney — 移动首屏
移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

为一个当代文化机构设计一个鲜明、高对比度的编辑界面。使用纯白 (#ffffff) 背景与纯黑 (#000000) 字体以达到最大视觉冲击。采用一种明亮、高色度的点缀色，特别是酸橙绿 (#d7ff2d)，严格用于主要行动号召，如订票。字体必须依赖于几何与粗体无衬线字体类别，利用粗体大写转换来建立导航和标题的强层次结构。布局应高度结构化、干净且宽敞，采用清晰的 1px 边框和充足的留白，而非柔和阴影或圆角。保持权威、直接的语调。关键禁忌：避免使用柔和的投影（使用清晰线条），避免使用圆角（保持边缘方正），避免使用装饰性衬线字体（坚持无衬线），避免使用粉彩背景（严格保持单色调）。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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