精選 · 開放 · 免費
Matter
一款現代、獲獎的稍後閱讀應用程式，專為專注閱讀與成長而設計。
productivityreading
01
設計氣質 DNA
稍後閱讀簡約現代獲獎精心打造
一款優質的數位閱讀夥伴
02
色彩
#6D7EECAccent
#FFFFFFInk
#969698Ink soft
#0D0D0DBG
#1E1F22BG soft
rgba(150, 150, 152, 1)Line
深色、高對比的畫布，兼顧可讀性與視覺舒適。
03
字型
geometric-sans · monospace
- display
56px · 500 - h2
40px · 700 - h3
32px · 700 - body
16px · 400 - small
14px · 400 - micro
12px · 400
所有標題與 UI 元素使用幾何無襯線字體。 · 大型展示文字保持緊湊的負字距追蹤。 · 確保墨色與背景之間的高對比度，以利閱讀。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
一致的 4px 基礎網格，搭配充裕的留白以強調內容。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 30px
1px solid rgba(150, 150, 152, 0.1)
0px 4px 12px rgba(0, 0, 0, 0.3)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
置中內容，採用單欄佈局，適用於長文閱讀與見證區塊。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
互動元素上的細微懸停過渡效果。 · 流暢的滾動與頁面過渡效果。
互動元素上的細微背景或透明度變化。 · 立即反饋，帶有輕微的縮放或色彩變化。
08
組件
- button 藥丸形按鈕，使用實色強調色並搭配高對比文字。
- card 深色、圓角容器，帶有細微邊框，用於見證區塊與應用程式畫面。
- chip 小型、圓角標籤，採用低對比度的背景與文字。
- input 極簡的文字輸入框，邊框簡潔無裝飾元素。
- hero 大型置中標題，附帶簡短說明與社會證明標誌。
09
文案語氣與禁用清單
- 語氣 專業、自信，並著重於使用者價值。
- 標題風格 直接、行動導向，並強調效益。
- 按鈕文案 簡潔、清晰，並帶有鼓勵性。
- 不要使用淺色背景——截圖顯示的是深色主題。
- 不要使用襯線字體作為內文——截圖使用的是無襯線字體。
- 不要使用繁忙或混亂的佈局——截圖顯示的是簡潔、置中的內容。
- 不要使用廣泛的色彩範圍——截圖依賴有限的調色板。
- 不要使用小巧、擁擠的按鈕——截圖使用充裕的內距與藥丸形狀。
- 不要使用低對比度的文字——截圖維持高對比度以利閱讀。
- 避免: 避免過於隨意或俚語過多的語言。
- 避免: 避免雜亂或繁忙的佈局。
- 避免: 避免分散注意力的動畫或效果。
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
一款現代、獲獎的稍後閱讀應用程式，專為專注閱讀與成長而設計。設計採用深色、高對比的畫布，主強調色為 #6D7EEC，墨色為 #FFFFFF，背景色為 #0D0D0D。字體為幾何無襯線，標題採用緊湊的字距追蹤，並搭配充裕的留白以利閱讀。重要禁忌：避免淺色背景、避免使用襯線字體作為內文、避免雜亂佈局、避免廣泛的色彩範圍、避免小巧按鈕，以及避免低對比度文字。整體感覺冷靜、精緻，並著重於內容。
en · zh-CN · zh-TW · ja · ko