精选 · 开放 · 免费

The Broad

一个高对比度、以展览为核心的博物馆网站，运用醒目的红色点缀和简洁的无衬线字体来展示艺术作品。

01

设计气质 DNA

一个拥有醒目图形标识和宽敞白墙的、简洁的机构化画廊空间。

02

色彩

采用中性白/灰画布的高对比度展览设计，并用占主导地位的高饱和度红色作为主要品牌色和行动号召色。

03

字体

grotesque-sans

• display36px · 700
• body14px · 400

在导航、标签和标题中大量使用文本大写转换。 · 严格限制在无衬线字体类别内，以保持简洁、机构化的外观。 · 标题行高保持紧凑，正文行高保持标准，以确保可读性。

04

间距

应用一致的4px基础网格，导航和交互元素使用标准内边距。

05

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

主要边框使用 1px solid #333F48，偶尔使用 2px 的点缀边框。

rgba(0, 0, 0, 0.06) 0px 13px 20px 0px · rgba(0, 0, 0, 0.26) 0px 3px 16px 0px

06

布局

包含大图和纯色文字块的分屏主视觉布局，过渡到用于内容展示的多列网格。

07

动效与交互

用于悬停状态的标准透明度和盒阴影过渡。

悬停时的微妙过渡，通常涉及盒阴影或轻微的透明度变化。 · 直接导航或状态更改，无复杂微交互。

08

组件

• button 实心主按钮，文字大写且内边距紧凑，搭配描边次级按钮。
• card 以图片为主的卡片，配有简洁的文字说明和对齐的状态指示器（例如“展出中”）。
• hero 一个大型分屏主视觉区域，包含一个全宽摄影区块和一个高对比度纯色信息面板。

09

文案语气与禁用清单

• 语气 邀请、清晰且机构化，专注于可访问性和信息传递。
• 标题风格 直接、大写且信息丰富，使用粗体字重建立层级。
• 按钮文案 行动导向且高度可见，使用纯色背景或高对比度边框。

• 不要使用装饰性衬线字体——截图显示的是严格的无衬线机构化风格。
• 不要使用柔和或柔和的点缀色——截图显示的是单一主导的鲜艳高饱和度红色 (#D6001C) 作为唯一的点缀色。
• 不要在主要组件上使用圆角——截图显示面板和大型按钮均为锐利的直角边缘。
• 不要用厚重的叠加层遮挡艺术品——截图显示的是干净、无遮挡的摄影作品。
• 不要为首要导航使用复杂的多列网格——截图显示的是清晰的单行顶部导航栏。
• 不要依赖微妙的色彩变化来表示交互——截图显示的是高对比度的按钮和清晰、独立的区域。
• 避免: 避免过于随意或俏皮的语言。
• 避免: 避免使用装饰性衬线字体。
• 避免: 避免使用分散对艺术品注意力的复杂渐变或阴影。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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