精選 · 開放 · 免費
Cupofcouple
一本精緻的數位期刊,以編輯般的精準度記錄時尚、旅行與設計。
EditorialStudioPhotographicPremiumPortfolio
01
設計氣質 DNA
視覺日記創意工作室生活方式時尚建築
一個精心策展的高端生活方式攝影畫廊。
02
色彩
#000000Ink
#F0F0F0BG
#808080Muted
rgba(0,0,0,0.8)Line
極簡的單色調色板,搭配嚴格的幾何邊框,以優先呈現攝影作品。
03
字型
didone-serif · humanist-sans
- display
56px · 400 - heading
32px · 400 - body
16px · 400 - small
10px · 400
標題使用優雅的 didone 衬線體,具有高對比筆畫。 · 導航與元數據使用簡潔的大寫無衬線體,並搭配寬鬆的字間距。 · 正文維持一致的 400 字重,以營造精緻、低對比的視覺效果。
04
間距
4px
8px
12px
16px
18px
24px
32px
48px
60px
卡片內部使用寬裕的內邊距,網格則採用結構化的垂直間距。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 0px
使用 rgba(0, 0, 0, 0.8) 的細長 1px 邊框,以建立嚴謹的網格結構。
1px 0px 0px 0px rgba(240, 240, 240, 1)
06
版面
1440container
12columns
768 / 1024breakpoints
嚴謹的矩形網格,可見的邊框線條作為結構性分隔線。
07
動效與互動
220msmicro
250mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover 時的平滑透明度過渡(0.25 秒線性,0.2 秒延遲)。 · 互動元素的通用 0.3 秒過渡。
文字連結與圖片上的微妙透明度變化。 · 標準的指標游標互動。
08
組件
- button 僅文字的大寫連結,無背景填充。
- card 以圖片為主的卡片,帶有細長的內部邊框,並由髮絲般的網格線分隔。
- chip 極簡的文字標籤,以垂直管道符號(|)分隔。
- input 簡單的文字輸入欄位,無可見邊框或背景,標籤為「搜尋...」。
- hero 一個巨大的、置中的展示衬線體標誌,作為視覺焦點。
09
文案語氣與禁用清單
- 語氣 精緻、極簡且經過策展。
- 標題風格 優雅的衬線體排版,全大寫以創造高視覺衝擊力。
- 按鈕文案 低調的、基於文字的導航,無顯著按鈕。
- 不要使用鮮豔的強調色——截圖顯示的是嚴格的單色調色板。
- 不要使用圓角——截圖顯示的是銳利、零圓角的邊緣。
- 不要使用投影來創造深度——截圖使用細長邊框來界定結構。
- 不要使用粗體字重——截圖顯示所有文字均使用一致的 400 字重。
- 不要為標題使用無衬線體——截圖顯示所有標題均使用衬線體排版。
- 不要使用雜亂的佈局——截圖使用寬敞的、基於網格的結構與髮絲般的分隔線。
- 避免: 鮮豔的色彩
- 避免: 圓角
- 避免: 用於提升層次的陰影
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
一個精緻的編輯作品集與視覺日記,適用於創意工作室。設計採用淺灰色背景與深灰色/黑色排版的單色調色板,無強調色。具有嚴謹的、零圓角網格結構,細長邊框界定各區塊。排版對比優雅的 didone 衬線體(用於標題)與 humanist 無衬線體(用於導航)。切勿使用圓角、投影或鮮豔的強調色;應維持極簡、結構化的美學。關鍵色彩:背景 #F0F0F0,墨色 #000000,線條 rgba(0,0,0,0.8)。
en · zh-CN · zh-TW · ja · ko