精選 · 開放 · 免費

Thebrowser Company

為開發者工具打造的精緻、編輯驅動呈現，兼具文學美感。

01

設計氣質 DNA

復古文學雜誌遇上現代軟體工藝

02

色彩

嚴格的雙色調調色板，依靠溫暖的米白與深黑色實現最大的編輯對比度

03

字型

transitional-serif · geometric-mono

• display36px · 400
• caption14px · 400
• micro10px · 400

所有主要文案與標題使用過渡襯線字體 · 所有 UI 標籤、導航與微文案使用幾何等寬字體 · 等寬標籤應用大寫字母與充裕的字間距

04

間距

以居中垂直節奏配合充裕留白，強調編輯式的呼吸空間

05

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

1px solid rgba(0,0,0,0.15)

06

版面

單欄居中佈局，具備極端的垂直內距與居中元素

07

動效與互動

互動元素上流暢的顏色與填充過渡

互動元素上細微的顏色變化或填充改變 · 即時狀態變化

08

組件

• button 無背景的純文字按鈕，依靠 hover 過渡
• card 不可見
• chip 不可見
• input 不可見
• hero 對稱居中構圖，包含文字標誌與雙行襯線字標題

09

文案語氣與禁用清單

• 語氣 工藝感、靜謐且自信
• 標題風格 詩意、襯線字體，並以輕柔斜體強調
• 按鈕文案 克制、等寬、大寫字母標籤

• 勿使用明亮、飽和的背景色——截圖顯示為溫暖、柔和的米白色 (#EDEEE7)
• 勿使用厚重的陰影或 3D 效果——截圖顯示完全扁平、無邊框的表面
• 勿使用無襯線字體作為標題——截圖顯示為斜體的過渡襯線字體標題
• 勿將所有內文置中對齊——截圖顯示為居中佈局，但暗示長篇內容採用左對齊排列
• 勿在主要容器上使用圓角——截圖顯示整體採用銳利、幾何的邊緣
• 勿使用激進的行動呼籲按鈕——截圖顯示為克制的、等寬的文字連結
• 避免: 鮮豔的色彩
• 避免: 標題中激進的大寫字母使用
• 避免: 密集的資訊區塊
• 避免: 厚重的圖形疊加
• 避免: 雜亂的導航

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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