精選 · 開放 · 免費
Drepute
一個乾淨、具氛圍感的預發布頁面，搭配強烈的攝影主視覺與清晰的行動呼籲。
EditorialPhotographicCleanCalmPremium
01
設計氣質 DNA
預發布極簡氛圍感專業
一個讓產品自行說話的高級預發布等候室。
02
色彩
#ffffffInk
#161616BG
#a9a9a9Muted
rgba(0, 0, 0, 0.3)Line
以攝影背景為主的高對比單色調色盤。
03
字型
transitional-serif · humanist-sans
- display
62px · 400 - h2
44px · 400 - body
16px · 400
04
間距
4px
8px
16px
24px
32px
48px
56px
64px
96px
基於 8px 的網格，章節內邊距寬裕（垂直 56px）。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 4px
lg · 0px
pill · 999px
1px solid #000000
rgba(0, 0, 0, 0.3) 0px 2px 6px 0px · rgba(0, 0, 0, 0.25) 0px 3px 18px 0px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
全寬攝影主視覺，後接置中的內容章節。
07
動效與互動
150msmicro
300mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
頁面載入元素使用 1 秒 ease-in 過渡效果
按鈕背景過渡效果。 · 互動元素使用標準指標游標。
08
組件
- button 實心白色背景、黑色大寫文字與小圓角。
- input 深色背景搭配細白邊框。
- hero 全視窗高度，文字置中，搭配大型背景圖片。
09
文案語氣與禁用清單
- 語氣 極簡且具期待感。
- 標題風格 簡短、大型的襯線字體，置中於頁面上。
- 按鈕文案 直接且功能性（例如「了解更多」、「接受」）。
- 不要使用明亮或霓虹色調色盤——截圖顯示為深色、具氛圍感的攝影主題
- 不要使用小型、擁擠的文字——截圖顯示為寬裕的間距與大型標題
- 不要使用複雜的網格佈局——截圖顯示為簡潔的單欄置中佈局
- 不要使用圓形、氣泡狀按鈕——截圖顯示為銳利、長方形且圓角極小的按鈕
- 不要使用裝飾性或手寫字體——截圖顯示為清晰的襯線與無襯線字體搭配
- 不要使用繁雜的導航——截圖顯示為乾淨的標題列，僅有一個按鈕
- 避免: 冗詞
- 避免: 冗長句子
- 避免: 繁雜的 UI 模式
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個名為 Drepute 的品牌的極簡預發布頁面。設計以深色、具氛圍感的攝影背景與高對比白色字體為特點。色彩調色盤幾乎全為單色調，包含深木炭背景 (#161616) 與純白文字 (#ffffff)。字體結合過渡襯線用於標題，人文無襯線用於內文。主要互動為簡單的按鈕懸停與頁面過渡。關鍵設計規則包括：保持高對比單色調色盤、使用寬裕的留白與章節內邊距 (56px)，並避免使用任何明亮的強調色或複雜的多欄佈局。
en · zh-CN · zh-TW · ja · ko