精选 · 开放 · 免费
Foster + Partners
一个专为世界知名建筑事务所打造的、以摄影驱动的极简主义作品集。
architecturestudio
01
设计气质 DNA
高端建筑卓越结构精准摄影驱动
一家享誉全球的建筑工作室展示其视觉作品集。
02
色彩
#FFFFFFInk
#1A1A1ABG
#333333BG soft
#F5F5F5BG quiet
rgba(255, 255, 255, 0.15)Line
采用单色暗色界面与高对比度白色排版，后者退居次席，让建筑摄影成为绝对主角。
03
字体
humanist-sans
- display
48px · 500 - heading
33px · 500 - body
16px · 400
标题采用句子式大写，以保持沉静优雅的格调。 · 文字以白色为主，确保在深色背景上的可读性。 · 字体粗细变化极少，使界面保持简洁不杂乱。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
充足的留白营造出平静、如博物馆般的浏览体验。
05
表面 (圆角 / 阴影 / 边线)
sm · 2px
md · 4px
lg · 8px
pill · 25px
使用纤细的半透明白色边框进行微妙的分隔。
rgb(128, 128, 128) 0px 0px 5px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
以大型沉浸式图像为优先的非对称网格布局。
07
动效与交互
150msmicro
400mssmall
500msmedium
cubic-bezier(0.25, 0.25, 0.75, 0.75)easing
主视觉图切换时使用平滑的交叉渐变。 · 交互元素上的不透明度与变换属性变化。
文字颜色或背景不透明度的细微变化。 · 即时导航或状态切换。
08
组件
- button 极简的药丸形按钮，带有微妙的背景透明度。
- card 以图片为主的网格项，常使用渐变叠加层以增强文字可读性。
- chip 用于分类的小型圆角标签。
- input 集成在页头中的极简无边框搜索框。
- hero 占据全视口的摄影幻灯片，文字锚定在底部。
09
文案语气与禁用清单
- 语气 权威、优雅且含蓄。
- 标题风格 直接、陈述事实，并采用句子式大写。
- 按钮文案 简洁实用，常以图标或小型药丸按钮形式集成。
- 避免使用鲜艳或霓虹的强调色——截图显示的是严格的单色方案。
- 避免使用装饰性衬线字体——截图整体使用了简洁的人文主义无衬线体。
- 不要用过多的UI框架挤占界面——截图让建筑摄影占据主导。
- 避免使用硬边框阴影或3D效果——截图依赖平面表面与微妙透明度。
- 避免使用全大写标题——截图主要采用句子式大写以营造精致感。
- 避免使用僵硬、均匀的网格——截图展示了强调视觉层次的非对称布局。
- 避免: 夸张或促销性语言。
- 避免: 复杂的排版布局。
- 避免: 过度装饰的UI元素。
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个高端建筑工作室的作品集。其设计DNA由极简、摄影驱动的方法与严格的单色暗色调（背景#1A1A1A，文字#FFFFFF，弱化#333333）定义。排版依赖简洁的人文主义无衬线体（Open Sans）来传递中性、优雅的声音。布局为非对称式，优先使用全出血图像和充足留白，以唤起画廊般的体验。交互效果微妙，使用柔和的不透明度与颜色过渡。关键禁忌：绝不引入高饱和度的强调色，避免装饰性衬线体，不使用过多界面元素挤占UI，避免厚重阴影，标题使用句子式大写，并保持非对称布局。整个系统应给人一种卓越、平静、以视觉为主导的建筑档案馆之感。
en · zh-CN · zh-TW · ja · ko