精選 · 開放 · 免費
Leifproducts
一個精緻的澳洲植物品牌,運用寬廣的攝影畫面與克制的排版,喚起寧靜、自然的奢華感。
EditorialPhotographicCalmRefinedClean
01
設計氣質 DNA
極簡沿海自然精緻植物
精心策展的植物誌日誌,結合沿海奢華度假村的質感。
02
色彩
#000000Ink
#262525Ink soft
#FAFAF9BG
#B2B2B2Muted
rgb(214, 209, 199)Line
高對比的中性色(黑色、米白色、柔和灰色)作為純淨基底,讓質樸自然的攝影作品成為視覺核心。
03
字型
geometric-sans · grotesque-sans · monospaced
- display
52px · 500 - body
16px · 500 - caption
12px · 500
導覽與分類標籤使用大寫字母搭配寬鬆字距。 · 大型展示標題維持緊密的負字距。 · 描述性氣味筆記與分類使用等寬字體。
04
間距
4px
8px
12px
16px
20px
24px
32px
48px
64px
113px
結合 4px 基礎增量與寬裕的 113px 垂直內距,創造出獨特、輕盈的節奏感。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 6px
lg · 8px
pill · 999px
1px solid rgb(214, 209, 199) 或 rgb(38, 37, 37)
rgba(0, 0, 0, 0.1) 0px 2px 20px 0px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
簡潔的多欄非對稱網格,偏重大型攝影區塊搭配寬裕留白與緊湊的文字區塊。
07
動效與互動
220msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover 狀態與互動元素使用 0.3 秒轉場。 · 更廣泛的 UI 狀態變化使用 0.5 秒轉場。
互動元素上的細微透明度或顏色變化。 · 透過填滿/未填滿的無線電按鈕指示狀態變化。
08
組件
- button 純黑色矩形按鈕,搭配白色大寫文字。
- card 以影像為核心的卡片,具有簡約的文字覆層與細微邊框。
- chip 圓形無線電按鈕式選擇器,搭配大寫文字標籤。
- input 極簡輸入框,具有細微底線與等寬文字。
- hero 分割式版面,包含一張主導性的全高影像與專屬文字欄。
09
文案語氣與禁用清單
- 語氣 寧靜、引人遐思且精緻。
- 標題風格 簡短、具氛圍感的短語,營造情緒或場所感。
- 按鈕文案 直接、大寫且具行動導向的指令。
- 勿使用明亮或飽和的強調色——截圖顯示嚴格的中性、單色調色板。
- 勿使用裝飾性或高度風格化的字體——截圖顯示簡潔的幾何與無襯線字體。
- 勿過度填滿版面——截圖顯示寬裕的留白與元素間的充足呼吸空間。
- 勿在所有地方使用重度圓角——截圖顯示銳利邊緣或極其細微的 6-8px 圓角。
- 勿使用複雜的多色漸層——截圖顯示純色平面背景。
- 勿依賴厚重陰影製造深度——截圖主要採用平面設計搭配最小化、細微的陰影。
- 避免: 喧鬧的促銷語言
- 避免: 雜亂或擁擠的版面
- 避免: 鮮豔的霓虹色彩
- 避免: 活潑或古怪的排版
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
Leif Products 是一個精緻的澳洲植物品牌,運用編輯式、攝影驅動的設計來傳達寧靜與自然的奢華感。其調色板依賴高對比的中性色,包括米白色背景 (#FAFAFA)、純黑色文字 (#000000) 與細微的暖灰色 (#EDEDE7)。排版在展示用的幾何無襯線體、內文用的怪誕無襯線體與描述細節用的等寬字體之間交替,維持清晰且有結構的層次。關鍵是避免使用鮮豔的強調色、過度使用圓角或擁擠的版面;應優先考慮寬裕的留白、大型攝影焦點,以及具有細微 0.3 秒轉場的簡約、極簡 UI 元素。
en · zh-CN · zh-TW · ja · ko