精选 · 开放 · 免费
Zaha Hadid Architects
一个身临其境的、以摄影为核心的享誉世界的建筑工作室数字档案馆。
architecturestudio
01
设计气质 DNA
参数化雕塑感未来主义建筑
一座可交互的参数化建筑结构
02
色彩
#ffffffInk
#000000BG
#1d1d1dBG soft
#d0d0d0Muted
rgba(0, 0, 0, 0.1)Line
高对比度的单色基底，完全服务于全出血的建筑摄影。
03
字体
geometric-sans · humanist-sans
- display
48px · 300 - heading
16px · 700 - body
12px · 400
主标签和导航链接严格使用大写字母 · 主品牌标识使用轻量字重（300），以保持优雅、轻盈的感觉
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
不规则的、基于模块的布局，由图像构图而非严格的垂直韵律驱动
05
表面 (圆角 / 阴影 / 边线)
sm · 2px
md · 6px
lg · 8px
pill · 50px
1px solid rgba(255, 255, 255, 0.15)
4px 4px 8px 0px rgb(0, 0, 0) · 0px 32px 68px 0px rgba(0, 0, 0, 0.3)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
自由形式的覆盖层模块，定位在全视窗摄影背景之上
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
带方向箭头导航的背景图片轮播 · 基于滚动的垂直展开，揭示额外的模块
所有交互元素的鼠标指针变为手形；文字链接有细微的透明度变化 · 触发模块展开或背景切换
08
组件
- button 透明的文字链接，采用大写样式，并带有可选的细底部边框
- card 半透明的深色叠加层，包含文字和辅助图像
- input 简约的文本输入框，配有极简的 'Go' 触发按钮
- hero 全视窗建筑摄影，配以悬浮的、相互重叠的信息模块
09
文案语气与禁用清单
- 语气 权威、有远见且具有机构感
- 标题风格 粗体、大写且极简
- 按钮文案 低调的大写文字链接或简单的 'Go' 按钮
- 不要使用明亮的点缀色——截图显示了严格的黑、白、灰单色调色板。
- 不要将所有文本居中对齐——截图显示主要文本模块采用左对齐文本。
- 不要使用过重的字体字重——截图显示标志使用字重 300，正文使用 400。
- 不要使用标准的网格布局——截图显示在照片上使用自由、重叠的模块化布局。
- 不要使用纯色背景——截图显示整个背景是一张摄影图像。
- 不要在内容模块中使用大的内边距——截图显示使用如 6px 10px 这样的紧凑内边距。
- 避免: 友好或随意的语言
- 避免: 过于描述性或冗长的句子
- 避免: 明亮、饱和的色彩点缀
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个高端建筑工作室的作品集网站。它使用全视窗的摄影背景，并配以深色、半透明的悬浮内容模块。调色板严格单色：#000000、#ffffff 和 #d0d0d0。字体结合了用于展示的几何无衬线体（geometric-sans）和用于正文的人文主义无衬线体（humanist-sans），主要使用大写字母，字号较小（12px）。关键禁忌：不要引入明亮的点缀色。不要使用标准、统一的网格布局。不要为主品牌使用过重的字体字重。布局高度实验性和以摄影为主，要求模块在高对比度的图像上自由悬浮。
en · zh-CN · zh-TW · ja · ko