精選 · 開放 · 免費
Foster + Partners
一個為世界知名建築事務所打造的極簡、攝影驅動型作品集。
architecturestudio
01
設計氣質 DNA
高端建築具聲望的結構性的精準的攝影驅動的
一個具全球聲望的建築事務所，呈獻其視覺作品集。
02
色彩
#FFFFFFInk
#1A1A1ABG
#333333BG soft
#F5F5F5BG quiet
rgba(255, 255, 255, 0.15)Line
單色暗色調 UI，搭配高對比白色排版，以退讓的姿態讓建築攝影成為主角。
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
主視覺影像轉場使用流暢的 crossfade。 · 互動元素的 opacity 與 transform 變化。
文字顏色或背景透明度的細微變化。 · 立即導航或狀態切換。
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 背景、#333333 柔和色、#FFFFFF 墨色）所定義。排版依賴簡潔的人文無襯線體（Open Sans），提供中性優雅的聲音。佈局為非對稱，優先採用全出血影像與充裕留白，營造畫廊般的體驗。互動細膩，使用柔和的透明度與顏色轉場。關鍵禁忌：絕不引入高飽和度強調色，避免裝飾性襯線體，勿用介面元素填滿 UI，避免厚重陰影，標題使用句首字母大寫，並維持非對稱佈局。系統應感覺像一個具聲望、寧靜、以視覺為主導的建築檔案庫。
en · zh-CN · zh-TW · ja · ko