精選 · 開放 · 免費
Tokyo Uk
打造由智慧驅動的數位體驗。
AgencyBold TypographyCurationPhotographicPremium
01
設計氣質 DNA
設計機構數位工作室工程智慧作品集
一家高端數位機構，透過電影級影像與大膽排版展現其作品。
02
色彩
#000000Ink
#ffffffBG
rgba(0,0,0,1)Line
鮮明的高對比色調，依賴大膽排版與大規模攝影，而非複雜的色彩系統。
03
字型
geometric-sans
- display
400px · 500 - h1
40px · 400 - body
16px · 400
首頁橫幅文字動態縮放以填滿視窗寬度 · 內文維持約 680px 的舒適閱讀寬度 · 導覽與副標題使用輕字重 (300)
04
間距
4px
8px
12px
16px
24px
32px
40px
48px
64px
80px
96px
120px
寬裕的留白，頂部內距 120px，格狀項目間距 80px。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 8px
pill · 999px
無可見邊框；依賴影像對比度與留白進行區隔。
06
版面
1400container
12columns
24pxgutter
768 / 1024breakpoints
全幅出血的首頁橫幅，後接響應式雙欄格狀版面以展示專案。
07
動效與互動
100msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
文字連結的 hover 轉場
文字連結與導覽的細微透明度或色彩轉場。 · 互動元素使用標準指標游標。
08
組件
- button 極簡的文字型導覽，無明確按鈕形狀。
- card 大型影像型專案卡片，下方配有簡潔文字描述。
- hero 電影級全視窗背景影像，搭配大規模覆蓋排版。
09
文案語氣與禁用清單
- 語氣 自信、專業且內斂。
- 標題風格 大規模、全大寫或粗體無襯線體的聲明，主導整個視窗。
- 按鈕文案 內斂的文字連結，而非顯眼的按鈕。
- 勿使用彩色強調色——截圖顯示嚴格的黑白配色。
- 勿為卡片添加陰影——截圖顯示平面的影像型卡片。
- 勿使用襯線字體——截圖顯示一致的幾何無襯線字族。
- 勿在首頁橫幅加入 UI 元素——截圖僅顯示大規模文字與背景影像。
- 勿使用小號文字作為標題——截圖顯示填滿螢幕的大規模展示文字。
- 勿使用明確的按鈕形狀——截圖顯示極簡的文字型導覽。
- 避免: 雜亂的版面配置
- 避免: 裝飾性圖形
- 避免: 突出的行動呼籲按鈕
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個高端數位機構作品集，採用嚴格的黑白配色 (#000000, #ffffff) 與大膽的幾何無襯線字體 (Aeonik)。版面嚴重依賴全幅出血攝影、大規模展示文字與寬裕的留白 (120px 內距，80px 間距)。關鍵是，無彩色強調、無陰影、無突出按鈕。設計保持克制，讓作品與大膽排版自行發聲。避免添加不必要的 UI 元素或裝飾性圖形。
en · zh-CN · zh-TW · ja · ko