精选 · 开放 · 免费

Tate

泰特美术馆的精致文化网站，采用大胆排版、鲜明首屏区域与清晰的网格化布局。

01

设计气质 DNA

如同配有大胆编辑摄影的极简画廊图录。

02

色彩

高对比度中性色（黑/白/灰）搭配单一醒目的黄色作为焦点，让摄影作品提供主要视觉丰富度。

03

字体

geometric-sans · humanist-sans

• display46px · 400
• h222px · 400
• body17px · 400
• caption14px · 400
• nav14px · 400

章节标题采用加大字距（全大写）建立层级。 · 正文保持17px的舒适阅读尺寸。 · 首屏标题虽大但使用常规字重。

04

间距

宽松的垂直节奏，内容块之间保持统一的16px/32px间距。

05

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

极少使用边框，主要为导航项或交互元素提供细微下划线（1px）。

rgb(128, 128, 128) 0px 0px 5px 0px

06

布局

严格的12栏网格系统，采用居中最大宽度容器。

07

动效与交互

交互元素采用标准 hover 过渡。 · 移动菜单显示采用微妙的淡入淡出过渡。

链接和按钮在 hover 时背景色或颜色发生微妙变化。 · 标准按钮按压反馈。

08

组件

• button 实心黑色或蓝绿色块，搭配白色文字和右箭头，强调明确的行动号召。
• card 图片优先的卡片，背景样式极简或无背景，依赖网格项间充裕的留白。
• hero 分屏式首屏：一侧为全出血鲜艳图片，另一侧为纯色块（如黄色）搭配高对比度文字。

09

文案语气与禁用清单

• 语气 机构化、教育性，同时亲切易懂。
• 标题风格 大胆、全大写且具描述性，聚焦主题或地点。
• 按钮文案 直接且行动导向，常与“→”箭头搭配以指示前进方向。

• 避免使用投影营造层次——设计依赖纯色块与留白建立层级。
• 避免使用多种冲突的点缀色——配色严格限定为黑、白、灰与特定黄色/蓝绿色。
• 避免使用衬线字体——排版严格采用无衬线体，强调现代、简洁美感。
• 避免使用大圆角——按钮和卡片采用极简或尖角。
• 避免布局中堆砌密集文字块——保持充裕间距，聚焦图像。
• 避免使用粗体字重——即使最大的展示文本也使用常规（400）字重。
• 避免: 过于随意或口语化的语言。
• 避免: 与艺术无关的复杂术语。
• 避免: 过度使用感叹号。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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