精選 · 開放 · 免費
Nothing
一種以排版精準度和高對比度 UI 元素為核心的、冷峻的單色美學。
hardwareproduct
01
設計氣質 DNA
極簡主義技術感高級感單色調點陣感
一份高精度的技術藍圖或一個奢侈的工業零件
02
色彩
#000000Ink
#585A5AInk soft
#F5F5F5BG
#FFFFFFBG soft
#E5E7EBMuted
rgba(229,231,235,1)Line
高對比度的單色方案，嚴格遵循中性灰色階。
03
字型
geometric-serif · grotesque-sans · dot-matrix
- display-large
40px · 400 - display-medium
24px · 400 - body
16px · 400 - caption
11px · 400
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
標準 4px 基礎網格
05
表面 (圓角 / 陰影 / 邊線)
sm · 6px
md · 8px
lg · 12px
pill · 9999px
1px solid #E5E7EB
0px 0px 0px 1px rgba(229,231,235,1)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
彈窗垂直與水平置中，並帶有充裕的內距。
07
動效與互動
100msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
透過透明度進行淡入/淡出 · 在 hover 時進行微妙的變換
互動元素在 hover 時改變透明度或進行微妙變換。 · 所有可點擊元素使用標準的指標游標。
08
組件
- button 主要：黑底白字的膠囊型按鈕。次要：帶有 1px 實心底線的文字按鈕。
- card 帶有細微 1px 邊框和膠囊型按鈕的彈窗容器。
- chip 採用標準無襯線字型的文字標籤。
- input 極簡風格的文字輸入框，線條乾淨。
- hero 垂直堆疊的置中佈局，以顯示級排版為主導。
09
文案語氣與禁用清單
- 語氣 資訊性且直接。
- 標題風格 簡短、全大寫的陳述。
- 按鈕文案 清晰、行動導向、全大寫。
- 不要使用圓角容器 — 螢幕截圖顯示的是膠囊型按鈕（radius: 9999px）和略微圓角的彈窗邊角（6px-8px）。
- 不要使用多種顏色 — 螢幕截圖顯示的是嚴格的單色調色盤：黑色、白色和一種中性灰。
- 不要使用裝飾性的無襯線字體 — 螢幕截圖顯示的是用於標題的幾何襯線字體和用於內文的標準 grotesque-sans 字體。
- 不要使用厚重的陰影 — 螢幕截圖顯示的是細微的邊框或非常柔和、分散的陰影來增加深度。
- 不要為長段落使用置中對齊 — 螢幕截圖顯示的是嚴格置中的短式 UI 文案。
- 不要為主要 CTA 使用小寫字母 — 螢幕截圖顯示的是按鈕和顯示文字均採用全大寫。
- 避免: 含糊不清的措辭
- 避免: 過度友善或隨意的語言
- 避免: 複雜的句型
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
一個為高階硬體品牌設計的、極簡且高對比度的設計系統。關鍵色彩是純黑（#000000）和一種淺中性灰（#F5F5F5）。排版上，標題使用幾何襯線字體，內文使用乾淨的 grotesque-sans 字體。關鍵禁忌：避免使用彩色強調色，不要使用複雜的陰影，並且永遠不要使用小寫字母作為 CTA。佈局嚴格採用置中對齊和單色調。
en · zh-CN · zh-TW · ja · ko