精選 · 開放 · 免費

Readwise Reader

一個簡潔、以排版為核心的平台，用於重溫與學習閱讀重點。

01

設計氣質 DNA

如同私人圖書館助理，提醒你曾讀過的精華內容。

02

色彩

以高對比單色調為基底，搭配單一功能藍用於操作與連結。

03

字型

transitional-serif · humanist-sans · monospace

• display50px · 800
• h228px · 700
• body16px · 400

標題採用過渡襯線體，營造文學與教育氛圍。 · 內文使用人文主義無襯線體，維持高可讀性與現代美感。 · 設定寬鬆行高，以利長篇內容的舒適閱讀。

04

間距

以 4px 為基礎的統一網格，內容區塊採用充裕內距（24px-35px）。

05

表面 (圓角 / 陰影 / 邊線)

使用細微的 1px 邊框，主要作為導覽底線與輸入框狀態。

06

版面

置中單欄佈局，交錯安排圖片與文字區塊。

07

動效與互動

hover 時進行簡約的背景色與色彩過渡。 · 互動元素採用流暢的 opacity 與 transform 過渡效果。

透過 0.2 秒過渡改變背景色或色彩。 · 透過狀態變換提供即時反饋。

08

組件

• button 實心藍色填充、白色文字、圓角，或採用深色邊框的輪廓樣式。
• card 主要用於產品截圖中，展示嵌套的介面元素。
• chip 小型圓角標籤，以不同背景色彩區分類別。
• input 標準表單欄位，帶有細微邊框與清晰的 focus 狀態。
• hero 大型置中標題、輔助說明文字，以及主要操作按鈕。

09

文案語氣與禁用清單

• 語氣 具教育性、鼓勵性，並專注於個人成長。
• 標題風格 清晰、強調效益的大型襯線字體陳述。
• 按鈕文案 直接且行動導向，例如「免費開始使用」。

• 勿使用深色背景作為主介面 — 截圖顯示以白色為主的背景。
• 勿使用等寬字體作為內文 — 截圖顯示使用人文主義無襯線體以確保可讀性。
• 勿使用霓虹色或過度鮮豔的強調色 — 截圖顯示使用功能性的柔和藍（#478CD0）。
• 勿在主要按鈕上使用複雜漸層 — 截圖顯示採用實心填充。
• 勿在卡片上使用高對比陰影 — 截圖顯示採用簡潔的邊框式或平面 UI。
• 勿在標題上使用壓縮或裝飾性字體 — 截圖使用清晰的過渡襯線體。
• 避免: 過度專業術語
• 避免: 過於企業化的語氣
• 避免: 激進的銷售手法

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko