精选 · 开放 · 免费

SFMOMA

为世界级现代艺术博物馆打造的、以摄影为主导的大胆编辑设计。

01

设计气质 DNA

一个现代艺术画廊的数字门厅，优先展示大幅摄影和粗体排版，以唤起实体画廊的体验。

02

色彩

一个克制、高对比度的调色板，使用纯白底色和深炭黑墨色，单一、醒目的红色点缀色严格保留用于交互和会员元素。

03

字体

geometric-sans · humanist-sans

• display32px · 500
• body16px · 400
• caption14px · 400
• overline12px · 400

标题使用粗体display sans-serif字体，字重较大，行距紧凑。 · 正文使用高可读性的人文主义无衬线体。 · 标签和标记统一使用大写并增加字间距。

04

间距

充足的垂直间距，主要内容块顶部有120像素的大号内边距，以营造开放感和实体画廊空间感。

05

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

1px solid rgba(45, 48, 51, 1.0)

rgba(68, 73, 76, 0.2) 0px 3px 15px 0px

06

布局

主要采用单栏、全宽布局，使用横跨整个视口宽度的巨幅图像。

07

动效与交互

交互元素的 transform 和 box-shadow 平滑过渡（0.4秒）。 · 通用状态变化的0.2秒过渡。

交互元素上的颜色变化或细微变换，由指针光标指示。 · 即时响应，采用标准链接行为。

08

组件

• button 幽灵按钮或文本链接，使用醒目的红色点缀色，并带有标准指针光标。
• card 内容块由全幅大图和随后的文本块组成，无可见边框或背景容器。
• chip 用作标签或分类的大写文本标记。
• input 搜索图标触发器，在激活前不显示可见的输入框。
• hero 全出血摄影主视觉区，叠加半透明的白色大号展示字体。

09

文案语气与禁用清单

• 语气 机构性、权威性，同时具有亲和力和易访问性。
• 标题风格 大胆、简洁、有力，常使用display字重以立即抓住注意力。
• 按钮文案 行动导向且清晰，通常使用'会员'或'购票'等标准动词。

• 不要对容器或图像使用圆角——截图显示为锐利的方形边缘。
• 不要使用首字下沉或装饰性字体——截图使用简洁、现代的display无衬线体。
• 不要过度使用红色点缀色——截图将其严格限制在主要导航和交互元素上。
• 不要使用密集的多栏文本布局——截图依赖充足的留白和单栏阅读路径。
• 不要使用带阴影或边框的复杂卡片样式——截图使用无边框、图像前置的块。
• 不要使用深色模式或深色背景——截图显示为明亮、白色背景为主的界面。
• 避免: 过于随意的语言
• 避免: 杂乱的文本块
• 避免: 通用的库存摄影

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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