← OpenDesign 精選 · 開放 · 免費
Stripe Press
一個將書籍呈現為策展作品的優質出版品牌。
Editorial Books Premium Typography
01
設計氣質 DNA
知性 策展 出版 工藝 進步
一個為進步思想而設的現代數位圖書館。
02
色彩
#FFFFFFInk
#D0D1D4Ink soft
#201819BG
#504F4FMuted
rgba(255,255,255,0.1)Line
深沉溫暖的背景營造出優質畫廊氛圍，讓多彩的書籍物件成為焦點。
03
字型
transitional-serif
display 56px · 600heading 25px · 600body 16px · 400所有編輯內容使用 Ivar Headline 與 Ivar Text（過渡襯線體）。 · 所有文字元素保持一致的輕字間距（0.32px）。 · 書脊使用襯線體與等寬字體的混合排版。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
由內容區塊與書脊間距驅動的垂直節奏。
05
表面 (圓角 / 陰影 / 邊線)
sm · 2px
md · 3px
lg · 0px
pill · 999px
極簡；主要使用 1px 實線白色與低不透明度作為分隔線。
0 4px 24px rgba(0,0,0,0.4) 用於書脊
06
版面
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
全視窗垂直捲動，聚焦於堆疊的 3D 書籍物件。
07
動效與互動
150ms micro
200ms small
500ms medium
cubic-bezier(0.25, 0.1, 0.25, 1.0) easing
書脊顯現時的流暢捲動連結過渡。 · 頁面載入與導航時的透明度與變形動畫。
互動元素上的細微透明度變化或輕微移動。 · 標準指標游標指示互動性。
08
組件
button 極簡的文字型或簡單膠囊形按鈕。 card 3D 渲染的書籍物件作為互動卡片。 chip 無可見元素。 input 無可見元素。 hero 深色背景上的堆疊 3D 書脊。 09
文案語氣與禁用清單
語氣 知性、精緻且嚴肅。 標題風格 正式的大寫或首字母大寫襯線文字。 按鈕文案 低調且極簡。 不要使用無襯線字體作為標題——截圖顯示使用襯線字體。 不要使用明亮、霓虹背景——截圖顯示深沉、柔和背景。 不要使用複雜格線佈局——截圖顯示堆疊垂直佈局。 不要在主要容器上使用圓角——截圖顯示銳利邊角。 不要使用多種競爭的強調色——截圖顯示顏色僅限於書籍物件。 不要使用厚重的陰影——截圖顯示 3D 物件上的細微、真實光效。 避免: 俏皮語言 避免: 鮮豔色彩 避免: 厚重裝飾元素 10
包內真實截圖
桌面首屏（hero） 桌面滚动分段（90% viewport 步进） 桌面滚动分段（90% viewport 步进） 桌面滚动分段（90% viewport 步进） 桌面滚动分段（90% viewport 步进） 桌面滚动分段（90% viewport 步进） 桌面滚动分段（90% viewport 步进） 桌面滚动分段（90% viewport 步进） 桌面滚动分段（90% viewport 步进） 桌面滚动分段（90% viewport 步进） 移动首屏 擷取自真實頁面 · 真 computed styles
11
System Prompt
Stripe Press 是一個具有深沉知性美學的優質數位出版品牌。主要背景是深溫暖黑（#201819），搭配白色（#FFFFFF）與柔和灰色（#D0D1D4）文字。字體完全使用過渡襯線體，特別是 Ivar 字族，保持正式與編輯語調。關鍵互動涉及流暢的 150ms 過渡與捲動連結動畫。重要禁忌：永遠不要使用無襯線字體作為標題，永遠不要使用明亮霓虹背景，永遠不要使用複雜格線佈局，永遠不要在容器上使用圓角，永遠不要使用多種競爭的強調色，永遠不要使用厚重陰影。佈局是在全視窗容器中垂直堆疊的 3D 書籍物件。
更多精選 en · zh-CN · zh-TW · ja · ko
