精選 · 開放 · 免費
Counter Print
為設計專業人士打造的極簡、圖像優先精選書店。
EditorialCurationTypographyBooksPremium
01
設計氣質 DNA
精選設計書籍平面設計參考書籍
平面設計文獻的數位展廊
02
色彩
#1C1C1CInk
#FFFFFFBG
rgba(229,231,235,1.0)Line
嚴格的單色畫布，讓色彩豐富的書籍封面成為主要的視覺焦點。
03
字型
grotesque-sans
- display
63px · 700 - body
15px · 400
展示型標題使用緊密的負 letter-spacing 以增強衝擊力。 · 僅透過字重與尺寸，而非顏色，來維持嚴格的視覺層級。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
寬裕的垂直 padding 用於分隔不同的內容區塊，而緊密的水平間隙則用於群組化相關項目。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgb(229,231,235)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
依賴大型高品質攝影來填滿畫布的簡單網格佈局。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
互動元素上平滑的 opacity 與 transform 過渡效果。
細微的視覺變化，可能是 opacity 或 transform，由 transition 屬性指示。 · 立即回應，帶有標準的 cursor pointer 回饋。
08
組件
- button 藥丸形 border-radius 的幽靈/描邊按鈕，用於「查看全部」等次要操作。
- card 邊對邊的圖片卡片，與其網格欄位齊平，強調產品攝影。
- hero 雙欄分割佈局，展示大型產品攝影與粗體、簡潔的文字分類。
09
文案語氣與禁用清單
- 語氣 專業、極簡且高度精選。
- 標題風格 粗體、緊密字距且具描述性。
- 按鈕文案 低調，使用清晰、功能性的語言與藥丸形描邊按鈕。
- 不要使用裝飾性或襯線字體作為 UI 元素——截圖顯示使用嚴格的幾何/無襯線系統。
- 不要為按鈕或高亮使用鮮豔的強調色——截圖顯示嚴格的單色 UI，無主導的強調色。
- 不要套用厚重的陰影或柔和的光暈——截圖顯示完全平面的表面，無陰影使用。
- 不要為主要內容卡片使用圓角——截圖顯示產品圖片與佈局區塊為銳利的直角。
- 不要使用左右對齊的文字或密集的文字區塊——截圖顯示左對齊文字，並有寬裕的垂直間距。
- 不要添加不必要的邊框或分隔線——截圖使用留白與網格對齊來分隔各區塊。
- 避免: 過度促銷的語言
- 避免: 雜亂的佈局
- 避免: 裝飾性字體
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
一個精選平面設計書店的極簡、高級電子商務設計。UI 使用嚴格的單色調色盤（#FFFFFF 背景，#1C1C1C 墨色），以確保色彩豐富的書籍封面 remain 成為焦點。排版依賴乾淨、緊密字距的無襯線字體（Helvetica/Arial），搭配粗體、大尺寸的標題。關鍵禁忌：切勿使用裝飾性字體，切勿套用厚重陰影，切勿引入與產品競爭的鮮豔強調色。佈局為網格基礎，帶有寬裕的 padding，次要操作使用幽靈/藥丸按鈕。互動模式細膩，依賴平滑的 opacity 與 transform 過渡效果。
en · zh-CN · zh-TW · ja · ko