精選 · 開放 · 免費

Allbirds

結合極簡使用者介面與自然攝影的簡潔、質樸電商設計。

01

設計氣質 DNA

一個注重透明度與天然材質的現代永續零售品牌。

02

色彩

以深沉柔化色調為基底的高對比自然色系

03

字型

humanist-sans · geometric-sans

• display40px · 500
• body16px · 400

Display：用於主視覺標題與主要宣傳文字。 · Body：用於一般內文與描述性文字。 · Mono：用於標籤與次要使用者介面元件。

04

間距

以4px為基準單位，各區塊間保持寬裕間距。

05

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

1px solid rgba(0,0,0,0.1)，用於細微分隔。

rgba(0,0,0,0.1) 0px 1px 3px 0px · rgba(0,0,0,0.1) 0px 20px 25px -5px

06

版面

全寬主視覺區域，搭配置中模態覆蓋層。

07

動效與互動

hover 狀態與背景色彩的平滑過渡。

細微的背景色調或透明度變化。 · 透過 transform 或色彩提供直接的視覺反饋。

08

組件

• button 實心填充按鈕，帶有輕微圓角。
• card 簡潔卡片，搭配大型產品攝影圖。
• chip 極簡標籤，採用大寫文字。
• input 標準表單輸入欄位，具有明確的 focus 狀態。
• hero 大型生活風格攝影圖，搭配置中的文字覆蓋層。

09

文案語氣與禁用清單

• 語氣 透明、親切且直接。
• 標題風格 簡短、有力、以效益為導向。
• 按鈕文案 直接且以行動為導向，並具有明確的視覺份量。

• 不要使用霓虹燈或高飽和度色彩 — 螢幕截圖顯示的是如 #E0DACF 這類柔和的泥土色調
• 不要使用過度緊縮的字體 — 螢幕截圖顯示的是人文主義無襯線體與幾何無襯線體類別
• 不要使用厚重的陰影效果 — 螢幕截圖顯示的是用於提升層次感的細微、柔和陰影
• 不要使用雜亂的佈局 — 螢幕截圖顯示的是寬裕的留白與單一模態焦點
• 不要在內文中使用全大寫 — 螢幕截圖保留大寫用於使用者介面標籤與簡短標題
• 不要在所有地方使用銳利的方形圓角 — 螢幕截圖顯示的是膠囊形狀與最高至16px的圓角混合使用
• 避免: 充斥術語的技術語言。
• 避免: 激進的銷售策略。
• 避免: 過於複雜的句子結構。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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