精選 · 開放 · 免費
Numbered Studio
一個大膽、以照片為核心的機構網站，字體漂浮在全幅編輯風格圖像之上。
AgencyPhotographicPremiumTypographyStudio
01
設計氣質 DNA
編輯風格極簡時尚前衛奢華作品集
高端時尚雜誌內頁與設計工作室作品集的結合
02
色彩
#FFFFFFInk
#111111BG
rgba(255, 255, 255, 0.2)Line
高對比的單色調色盤，內容本身提供所有的色彩變化。
03
字型
didone-serif · grotesque-sans
- display
75px · 400 - heading
55px · 400 - body
15px · 400 - small
13px · 700
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
元素周圍留有大量、電影感的內距，依賴寬裕的負空間而非嚴格的格線系統。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 0px
使用1px solid rgba(255, 255, 255, 0.2)作為細微的分隔線，其餘則依賴圖像邊緣。
06
版面
1columns
768 / 1024breakpoints
全視窗的攝影主視覺區塊垂直堆疊，並置中放置文字覆層。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.77, 0, 0.175, 1)easing
內容揭示時的平滑淡入過渡 · 滾動時緩慢的背景過渡
文字連結上的細微游標變化或透明度轉換 · 立即導覽或滾動，按下時無微動畫
08
組件
- button 極簡的文字連結作為按鈕，大寫、小型、高對比
- card 全幅攝影面板搭配文字覆層
- hero 全螢幕沉浸式攝影，大型襯線字體直接覆蓋在圖像上
09
文案語氣與禁用清單
- 語氣 自信、內斂且精緻
- 標題風格 大型、宣言式的襯線體聲明，引人注目
- 按鈕文案 極簡的大寫文字連結，通常僅為「CONTACT」或「VIEW」
- 不要使用彩色背景——截圖顯示所有文字直接覆蓋在攝影圖像上
- 不要在容器上使用圓角——截圖顯示銳利、矩形的全幅面板
- 不要使用擁擠的小型字體——截圖顯示巨大的展示型字體主導了整個佈局
- 不要為文字添加陰影——截圖顯示平面、清晰的白色文字置於圖像上
- 不要使用多欄格線來組織內容——截圖顯示單一、垂直堆疊的流動
- 不要依賴傳統的導覽列——截圖顯示極簡的漢堡選單與獨立的文字連結
- 避免: 鮮豔色彩
- 避免: 雜亂佈局
- 避免: 標準SaaS模式
- 避免: 繁複動畫
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是「Numbered Studio」的高端機構作品集，定位為高端的創意與技術合作夥伴。其視覺DNA由大規模的全幅攝影區塊主導，大型Didone襯線字體直接覆蓋在圖像上。色彩色盤是極簡的單色調，使用純白（#FFFFFF）作為所有文字顏色，置於當前背景圖像之上，網站基底為深色（#111111）。字體搭配採用表現力強的Didone襯線體作為展示字體，以及簡潔的 grotesque-sans 作為內文與導覽字體。關鍵的禁止事項：不要引入傳統導覽列或側邊欄；介面刻意保持極簡與電影感。不要使用彩色的UI元素或強調色；所有的色彩變化必須來自攝影本身。不要為任何容器應用圓角或陰影；表面嚴格由圖像邊緣和細微的細邊框定義。
en · zh-CN · zh-TW · ja · ko