精選 · 開放 · 免費
Fablepets
一個為現代、注重設計的寵物裝備打造的優質電商平台。
ConsumerProductPhotographicCleanMobile UI
01
設計氣質 DNA
優質寵物裝備現代家居功能性設計簡潔自然
一個現代家居品牌，專注於無縫融入當代室內設計。
02
色彩
#B0C7FAAccent
#030E28Ink
#515357Ink soft
#FFFFFFBG
#F7F7F7BG soft
#D9DAE0Muted
rgba(3,14,40,1.0)Line
高對比的簡潔基底，搭配柔和藍色點綴與深海藍主文字色。
03
字型
transitional-serif · geometric-sans
- display
64px · 500 - body
16px · 400
使用 Gelica（襯線字體）作為展示與標題文字，營造優質、具編輯感的視覺。 · 使用 Moderat（無襯線字體）作為內文、導覽與 UI 元素，確保可讀性。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
標準 4px 基底網格，垂直節奏採用一致的比例縮放。
05
表面 (圓角 / 陰影 / 邊線)
sm · 2px
md · 4px
lg · 12px
pill · 9999px
1px solid rgba(3,14,40,1.0)
0px 4px 8px rgba(0,0,0,0.04) · 0px 0px 2px rgba(0,0,0,0.06) · 0px 0px 1px rgba(0,0,0,0.04)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
全寬首頁橫幅區塊，後接 12 欄網格的產品版面。
07
動效與互動
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
互動元素在 hover 與 focus 狀態下具有流暢的過渡效果。
按鈕與連結在互動時有細微的背景顏色或透明度變化。 · 立即提供視覺回饋，並採用標準過渡時間。
08
組件
- button 實心主按鈕，具有充足的內距與圓角。
- card 產品卡片，配有柔和陰影、簡潔排版與突出的攝影圖片。
- chip 萊姆綠色標籤，用於「暢銷品」標示。
- input 簡潔的輸入欄位，配有淺色邊框。
- hero 大型分割版面首頁橫幅，搭配高品質攝影與醒目的襯線字標題。
09
文案語氣與禁用清單
- 語氣 俏皮而不失優質感，專注於寵物生活的樂趣與設計。
- 標題風格 大型、優雅的襯線字體，傳達品質與風格。
- 按鈕文案 清晰、以行動為導向，並以高對比方式醒目置放。
- 避免將大型內文全部大寫——截圖顯示標題採用首字母大寫，內文則為標準大小寫。
- 避免使用鮮豔的霓虹色彩——截圖顯示採用柔和的藍、綠與海軍藍調色盤。
- 避免使用過於複雜的陰影效果——截圖顯示採用非常細微、柔和的陰影。
- 避免 UI 元素使用寬闊、方塊狀的邊框——截圖顯示採用纖細、簡潔的邊框或無邊框。
- 避免所有文字都使用厚重、粗大的字體——截圖顯示襯線字標題與無襯線字內文之間有清晰的層級對比。
- 避免使用混亂的網格版面——截圖顯示採用結構清晰、簡潔的 12 欄對齊。
- 避免: 過度專業的術語
- 避免: 雜亂的版面
- 避免: 過於鮮豔的霓虹色調
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
此網站是一個現代寵物裝備的優質電商平台，定位於家居裝飾與功能性寵物產品的交集。設計採用簡潔的白色基底，搭配柔和的藍色點綴與深海藍主文字色。排版以過渡襯線字體呈現優雅標題，以幾何無襯線字體呈現內文。務必避免使用過於複雜的陰影、混亂的網格版面或鮮豔的霓虹色彩，因為網站優先考量的是克制、高品質的攝影，以及結構清晰、簡潔的美學。
en · zh-CN · zh-TW · ja · ko