精選 · 開放 · 免費
Wemakethings De
大膽的排版聲明，由嚴格的單色網格支撐。
EditorialBold TypographyMonochromeProductRestrained
01
設計氣質 DNA
精準工藝德國工程極簡主義清晰度
工業藍圖
02
色彩
#000000Ink
#FFFFFFBG
rgba(0,0,0,1)Line
使用純黑與純白的純粹單色二元系統。
03
字型
geometric-sans
- display
864px · 400 - heading
80px · 500 - body
24px · 400 - nav
16px · 500
排版是主要的結構與表達元素 · 巨大的背景文字必須始終為描邊且不可互動 · 導覽連結採用大寫幾何無襯線體
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
嚴格的網格，搭配寬裕的 padding
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 0px
細 1px 實心黑線，用於定義網格邊界與底線活動狀態
06
版面
1920container
12columns
24pxgutter
768 / 1024breakpoints
全寬區塊，由 1px 黑色邊框交錯，創造技術藍圖網格
07
動效與互動
220msmicro
400mssmall
600msmedium
cubic-bezier(0.22, 1, 0.36, 1)easing
流暢的頁面過渡 · 基於網格的黏性捲動效果
在定義的網格儲存格內，細微底線或色彩反轉 · 即時狀態變換，無過度反饋
08
組件
- button 基於文字並帶有箭頭指示，大寫幾何無襯線體，1px 邊框處理
- card 由細黑邊框定義的網格儲存格
- chip 無
- input 無
- hero 大膽的大寫粗體排版，疊加在巨大的描邊背景字元上
09
文案語氣與禁用清單
- 語氣 自信、直接、權威、極簡
- 標題風格 全大寫、粗體、簡潔、大尺度幾何無襯線體
- 按鈕文案 大寫文字搭配最小箭頭指示，融入網格
- 不要使用漸層或複雜陰影 — 截圖顯示平面的單色表面
- 不要使用圓角 — 截圖顯示所有元素嚴格為 0px 圓角半徑
- 不要使用多種字體族 — 截圖顯示獨家使用幾何無襯線體
- 不要使用明亮的強調色 — 截圖顯示嚴格的黑白調色板
- 不要使用狹小、擁擠的排版 — 截圖顯示巨大、擴展的展示文字
- 不要使用標準卡片佈局 — 截圖顯示文字直接疊加在巨大的描邊背景字型上
- 避免: 驚嘆號
- 避免: 浮誇的行銷用語
- 避免: 柔和圓潤的 UI 元素
- 避免: 漸層填充
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
此設計系統服務於高端自行車與生活風格品牌，透過絕對的單色調克制與巨大、自信的排版來定位自身。調色板嚴格二元：白色背景 (#FFFFFF) 與純黑文字 (#000000)，無次要色或強調色。排版類別獨家使用幾何無襯線體，應用於從微小的導覽連結到巨大的 864px 背景浮水印等所有尺度。佈局由細 1px 黑色邊框定義的嚴格網格界定，類似技術藍圖。關鍵限制：永不使用圓角（圓角半徑始終為 0px），永不引入色彩（設計嚴格單色），永不使用柔和陰影或漸層。互動模式細微，依賴於銳利、精確的過渡與在剛性結構框架內的清晰視覺層級。
en · zh-CN · zh-TW · ja · ko