精選 · 開放 · 免費
Vitaarchitecture
一個精煉的建築作品集，平衡了嚴肅的極簡主義與複雜的字型排印細節。
EditorialCleanRefinementStudioPortfolio
01
設計氣質 DNA
建築感極簡編輯風格精煉
一個潔淨的畫廊空間，點綴著微妙的襯線字細節。
02
色彩
#000000Ink
#EFEFEFBG
#9E9E9EMuted
rgba(0,0,0,1.0)Line
極度克制，使用高對比的中性色調，讓建築攝影得以呼吸。
03
字型
didone-serif · grotesque-sans
- display
196px · 200 - headline
48px · 400 - body
16px · 400
大型、優雅的展示元素（如 '214' 數字）使用 didone-serif。 · 功能性 UI、導覽與標準段落文字使用 grotesque-sans。 · 所有字型排印維持緊密的負字距，以保留精煉的美學。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
寬裕的空白，搭配孤立的垂直 padding，例如 207px 上下
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
使用纖細、銳利的黑色線條，謹慎地用於分隔
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
單欄或高度結構化的不對稱網格，由大量空白空間主導
07
動效與互動
200msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
互動時的色彩漸變 · 元素的透明度轉換
互動元素上微妙的文字色彩變化。 · 立即回應，視覺回饋極小。
08
組件
- button 僅文字，hover 時搭配簡單的底線或狀態變化。
- card 以字型排印為主導，搭配寬裕的空白，無背景容器。
- hero 稀疏的文字排印，搭配大型 didone 數字與纖細的水平線。
09
文案語氣與禁用清單
- 語氣 自信、靜謐且高度精煉。
- 標題風格 極簡，常使用大型數字或單字。
- 按鈕文案 低調、功能性的文字。
- 不要使用陰影——截圖顯示完全扁平的表面。
- 不要使用 border-radius——截圖顯示銳利、未圓角的邊角。
- 不要使用鮮豔的顏色——截圖顯示嚴格的單色調/黑與白。
- 不要使用投影——截圖完全依賴扁平設計。
- 不要讓介面雜亂——截圖顯示極端的負空間。
- 不要使用無襯線字體作為展示文字——截圖使用 didone-serif 作為大型數字。
- 避免: 驚嘆號
- 避免: 行銷術語
- 避免: 鮮豔的行動號召
- 避免: 裝飾性的 UI 元素
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個精煉的建築作品集網站。它透過極度的克制、高端的極簡主義與畫廊般的作品展示來定位自己。關鍵色彩是非常淺的中性灰 (#EFEFEF) 背景搭配嚴格的黑色 (#000000) 墨水，營造出高對比、嚴肅的感受。字型排印使用了精緻的搭配：大型展示元素（如 '214' 數字）使用輕盈的 didone-serif，而導覽與內文則使用乾淨、功能性的 grotesque-sans。關鍵設計規則：保持寬裕、幾乎廣闊的空白；僅使用纖細、銳利的線條進行分隔；且永遠不要引入陰影、border-radius 或鮮豔的顏色。語調是自信、靜謐且 premium 的。
en · zh-CN · zh-TW · ja · ko