精選 · 開放 · 免費

Guillermo Rauch

一位知名科技人物的超簡潔、字體驅動的個人檔案庫。

01

設計氣質 DNA

極簡主義的技術日誌或簡潔的學術閱讀清單。

02

色彩

極度克制，使用高對比黑白色調，並以微妙的灰色處理中繼資料。

03

字型

geometric-sans · monospace

• display18px · 700
• body14px · 400
• caption12px · 400

04

間距

嚴格的垂直間距基於 4px 增量，主要使用 8px 和 24px 作為列表項目與區塊間距。

05

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

微小的 1px 實線邊框主要用於標籤，顏色定義為 rgb(229,231,235)。

06

版面

嚴格的三欄式表格佈局用於列表項目：年份（左）、標題（中）、計數（右）。

07

動效與互動

所有元素使用微妙過渡（0.15s）處理 hover 狀態與邊框顏色變化。

游標變為指針，並帶有 0.15s 微妙過渡。 · 標準連結導覽。

08

組件

• button 極簡的文字連結，無可見的 padding 或背景，除非是標籤格式。
• card 由包含年份、標題與計數的行所組成的概念性卡片。
• chip 小型藥丸狀標籤，帶有 1px 邊框與些微 padding，見於頁尾。
• input 無可見的輸入元件。
• hero 簡潔的頁首，左側放置網站標題，右側放置導覽連結。

09

文案語氣與禁用清單

• 語氣 專業、直接且低調。
• 標題風格 簡潔、粗體且左對齊。
• 按鈕文案 微妙的文字連結，常帶有圖示（如 X）。

• 不要使用多種顏色——截圖顯示嚴格的單色黑白灰色板。
• 不要為卡片或容器添加陰影——截圖顯示完全扁平、無陰影的設計。
• 不要使用裝飾性邊框或粗重的分隔線——截圖改用垂直間距與對齊。
• 不要使用複雜的網格或重疊元素——截圖顯示嚴謹、線性的三欄式列表佈局。
• 不要過度使用粗體文字——截圖僅對主要網站標題使用 700 字重。
• 不要在主要容器上使用圓角——截圖使用銳利邊角作為主要列表樣式。
• 避免: 浮誇的行銷語言
• 避免: 視覺雜亂
• 避免: 裝飾性圖片

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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