精选 · 开放 · 免费

MoMA

一种以摄影为主导的极简编辑设计，让艺术自由呼吸。

museumculture
MoMA 网站截图
↓ 下载设计系统包 (41 MB)在 OpenDesign 中打开

原站: https://www.moma.org

📦 浏览包内文件 →

01

设计气质 DNA

现代艺术博物馆机构策展

为世界顶级现代艺术博物馆打造的简洁、权威的机构声音。

02

色彩

#00B7F2Accent
#000000Ink
#767676Ink soft
#FFFFFFBG
#EEEEEEBG soft
rgba(0,0,0,1)Line

高对比度的黑白配色，为彩色摄影营造出类似画廊的中性画布。

03

字体

grotesque-sans

所有主要文本使用 MoMA Sans (grotesque-sans)。 · 在大号展示文本上使用紧凑的负字间距，以强调机构权威性。 · 保持粗重标题与常规正文之间的高对比度。

04

间距

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

基于4px的基础网格，确保多列布局的一致性对齐。

05

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

sm · 0px
md · 0px
lg · 0px
pill · 0px

极少使用边框；仅用作板块分隔的粗水平线。

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

以大幅、全宽的主视觉摄影和严格左对齐的文本块为锚点的12列网格布局。

07

动效与交互

220msmicro
300mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

悬停状态的微妙透明度过渡；图片加载的简单线性揭示效果。

文本链接和交互元素在悬停时改变颜色或透明度。 · 标准交互状态；按钮通过 transform 轻微下压。

08

组件

09

文案语气与禁用清单

10

包内真实截图

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

抓自真实页面 · 真 computed styles

11

System Prompt

MoMA.org 是现代艺术博物馆的数字主页，采用极简、权威、以摄影为主导的编辑设计。调色板严格遵循高对比度，使用纯白背景（#FFFFFF）和深黑文本（#000000），并以单一明亮的青蓝色（#00B7F2）作为售票功能的点缀。排版使用定制的 grotesque-sans 字体系列，特点是粗重的字重、大号展示标题，并带有紧凑的负字间距（展示文本为 -1.2px）。布局是一个整洁、不加修饰的12列网格，具有棱角分明的边缘、零圆角边框半径且无投影，营造出类似画廊的氛围。关键禁忌：不要在任何元素上使用圆角。不要为标题使用装饰性或衬线字体。不要使用投影或复杂渐变。确保所有大号排版使用负字间距以营造机构感。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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