精選 · 開放 · 免費

Howmanyplants

一個為植物愛好者打造的溫暖圖文編輯平台，融合大膽字體與手工風格圖形。

01

設計氣質 DNA

一家為植物愛好者打造的奇思妙想策展書店，充滿手工插圖與個性化字體。

02

色彩

以近白色畫布為基礎的溫潤大地色調，點綴著活力的黃綠金色與俏皮的粉彩強調色。

03

字型

geometric-sans · humanist-sans · transitional-serif

• display96px · 400
• heading36px · 400
• body14px · 400

全大寫的導覽列與側邊欄標籤創造強烈的幾何節奏。 · 巨大的展示文字與重疊的插圖實體交織互動。 · 混合幾何無襯線字體與打字機風格襯線字體，增添編輯個性。

04

間距

寬裕的留白節奏，搭配充裕的內邊距（64px）以框住編輯內容。

05

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

硬朗的實心邊框（2px 至 4px），採用深墨色或橄欖金色，常用於俏皮的偏移背景陰影。

rgb(191, 179, 59) 6px 6px 0px 0px

06

版面

類似瀑布流的拼貼佈局，文字與自訂插圖實體重疊，並突破傳統網格邊界。

07

動效與互動

標準的 220 毫秒狀態過渡，用於基本互動。

全球自訂的灑水壺游標出現，取代預設指標。 · 互動元素採用標準的指標狀態。

08

組件

• button 採用厚實邊框與偏移背景陰影的文字連結樣式，創造具觸感的 3D 按鈕效果。
• card 由獨特背景色矩形或外框定義的內容區塊，常與剪裁插圖層疊。
• chip 用於分類或導覽的小型全大寫文字標籤，依靠字體而非實心容器呈現。
• input 極簡的無邊框搜尋互動，隱藏於主要導覽列標題中。
• hero 動態的巨型字體構圖，標題在插圖書架上拼出品牌名稱。

09

文案語氣與禁用清單

• 語氣 俏皮、鼓勵人心且溫暖權威。
• 標題風格 大膽、對話式且字體表現力強。
• 按鈕文案 以實心邊框框住，並搭配具觸感的陰影以模擬實體按鈕。

• 避免使用乾淨空曠的極簡主義——截圖顯示的是密集重疊的插圖與文字拼貼。
• 避免使用細微的陰影——截圖顯示的是厚實、實心的 6px 偏移方塊陰影。
• 避免使用深色模式或厚重的漸層——截圖顯示的是明亮、近白色的畫布搭配實色粉彩。
• 避免使用標準的 UI 網格佈局——截圖顯示文字與圖片實體重疊並突破邊界。
• 避免全球使用標準的系統游標——截圖顯示的是自訂的灑水壺游標。
• 避免使用純文字的 CTA 按鈕——截圖顯示的是帶有實色偏移背景填充的外框方塊。
• 避免: 臨床般的無菌感
• 避免: 過於正式的企業語言
• 避免: 極簡主義的空曠空間
• 避免: 標準的 UI 元件模式

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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