精選 · 開放 · 免費
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 簡潔文字欄位與極簡「前往」觸發按鈕
- hero 全視窗建築攝影,搭配浮動重疊的資訊模組
09
文案語氣與禁用清單
- 語氣 權威、前瞻、制度化
- 標題風格 粗體、大寫、極簡
- 按鈕文案 低調大寫文字連結或簡潔「前往」按鈕
- 勿使用鮮豔強調色 — 截圖顯示嚴格黑、白、灰單色調色盤
- 勿將所有文字置中對齊 — 截圖顯示主要內容模組採左對齊文字
- 勿使用粗體字重 — 截圖顯示標誌字重 300、內文字重 400
- 勿使用標準格線佈局 — 截圖顯示照片上自由重疊的模組化佈局
- 勿使用實色背景 — 截圖顯示整個背景為攝影影像
- 勿在內容模組使用大內距 — 截圖顯示緊湊內距如 6px 10px
- 避免: 親切或隨意的語氣
- 避免: 過度描述或冗長的句子
- 避免: 鮮豔飽和的色彩強調
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是頂級建築工作室作品集網站。採用全視窗攝影背景搭配深色半透明浮動內容模組。色盤嚴格單色:#000000、#ffffff 與 #d0d0d0。字體組合幾何無襯線體用於標題、人文無襯線體用於內文,主要大寫且採用小型 12px 尺寸。關鍵禁忌:勿引入鮮豔強調色。勿使用標準統一格線佈局。勿對主要品牌識別使用粗體字重。佈局高度實驗性且具攝影性,要求模組自由浮動於高對比影像之上。
en · zh-CN · zh-TW · ja · ko