精選 · 開放 · 免費
Hartzlerdairy
一個高品質手工乳品品牌網站，採用大膽字體、大型產品攝影，以及乾淨的白色美學，並以綠松石色與深綠色作為點綴。
ProductCleanEditorialCurationPhotographic
01
設計氣質 DNA
手工製作高品質家族經營新鮮傳統
一個高品質的在地乳品品牌，以大膽、自信的字體與高品質攝影展示其產品。
02
色彩
#56DDDBAccent
#333333Ink
#FFFFFFBG
#035542Muted
rgba(51, 51, 51, 0.1)Line
極簡色彩配置，以留白空間與產品攝影作為主要視覺基石。
03
字型
geometric-sans · humanist-sans
- display
333px · 900 - display-md
290px · 900 - body
14px · 400
產品標籤與導覽選單使用大寫字體 · 大型展示字體保持緊湊的字距 · 品牌元素與強調色使用深綠色
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
充足的間距，讓產品有呼吸空間
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 20px
pill · 100px
主要卡片無可見邊框
0 4px 20px rgba(0, 0, 0, 0.1)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
全寬首頁區塊，搭配重疊的產品攝影與大型背景文字
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
互動元素的細微 hover 過渡效果 · 滾動觸發的產品揭示動畫
互動元素帶有細微的顏色變化或縮放效果 · 立即回應並提供視覺反饋
08
組件
- button 大型圓角綠松石色標籤，搭配大寫文字
- card 白色背景上的產品攝影，帶有細微陰影效果
- chip 圓形「精選」徽章，搭配手寫體標誌
- hero 全視窗產品展示區，搭配巨型背景字體
09
文案語氣與禁用清單
- 語氣 自信、高品質且具手工質感
- 標題風格 大膽、大寫、大尺寸字體
- 按鈕文案 圓角綠松石色標籤，搭配簡潔的無襯線字體
- 不要使用細體或輕量字體 — 畫面截圖顯示全程使用粗體、厚重字重
- 不要使用小型首頁標題文字 — 畫面截圖顯示 333px 的巨型展示字體
- 不要使用深色背景 — 畫面截圖顯示以白色背景為主
- 不要使用多種強調色 — 畫面截圖顯示一致的綠松石色與深綠色
- 不要隱藏產品攝影 — 畫面截圖以產品為核心焦點
- 不要使用裝飾性元素 — 畫面截圖顯示乾淨、簡約的設計
- 避免: 避免雜亂的佈局
- 避免: 避免過於活潑或休閒的字體
- 避免: 避免複雜的配色方案
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個高品質手工乳品品牌網站，採用大膽字體與乾淨的產品攝影。使用白色背景，搭配綠松石色（#56DDDB）與深綠色（#035542）強調色。字體方面，展示文字使用幾何無襯線字體，內文使用人文主義無襯線字體。設計強調大型產品攝影與巨型背景文字。關鍵約束條件：避免深色背景，保持充足留白空間，標籤使用大寫字體，並保持簡約設計，讓產品成為焦點。佈局應透過充足間距與清晰的字體層次，讓產品有呼吸空間。
en · zh-CN · zh-TW · ja · ko