精選 · 開放 · 免費
Brightland
結合大膽襯線字體與溫暖、陽光生活攝影的高端 DTC 食品品牌。
fooddtc
01
設計氣質 DNA
手工藝高端食品儲藏室潔淨成分生活風格
一個將編輯攝影與溫暖、親切美學相結合的高端食品儲藏室品牌。
02
色彩
#F6BE00Accent
#1B1B1BInk
#F9F2EABG soft
#FFFFFFBG quiet
#999999Muted
rgba(27, 27, 27, 0.12)Line
以標誌性金黃色和純淨黑色文字為基調，搭配柔和米白色背景的高對比溫暖色調。
03
字型
transitional-serif · humanist-sans
- display
56px · 700 - heading
16px · 400 - body
16px · 400
04
間距
4px
8px
10px
15px
18px
24px
28px
32px
互動元素與彈窗保持一致的 18px padding，flex 項目間距為 8-18px。
05
表面 (圓角 / 陰影 / 邊線)
sm · 8px
md · 18px
lg · 9999px
pill · 9999px
rgba(0, 0, 0, 0.1) 0px 1px 3px 0px · rgba(0, 0, 0, 0.4) 0px 9999px 0px 9999px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
桌面版採用雙欄分割（50/50），在行動裝置上則收縮為單欄，並突出顯示圖片區塊。
07
動效與互動
200msmicro
400mssmall
800msmedium
ease-in-outeasing
彈窗的透明度與 transform 平滑過渡 · 互動元素的 hover 狀態
膠囊型按鈕的視覺回饋 · 選擇偏好或關閉彈窗
08
組件
- button 膠囊型，實心黃色背景、黑色文字，並帶有充足的水平 padding。
- card 彈出式視窗，柔和米白色背景、大圓角（18px）及細微的陰影效果。
- hero 結合大膽襯線字體的折扣標題與產品生活風格照片的宣傳覆蓋層。
09
文案語氣與禁用清單
- 語氣 溫暖、友善且自信
- 標題風格 大膽、富有情感的襯線字體，聚焦於價值與品質
- 按鈕文案 直接、以行動為導向且高度可見
- 勿使用純白背景 — 示範截圖顯示的是溫暖的米白色（#F9F2EA）
- 勿使用幾何無襯線字體作為標題 — 示範截圖顯示的是過渡襯線字體
- 勿使用方形按鈕 — 示範截圖顯示的是半徑為 9999px 的膠囊型按鈕
- 勿使用柔和或粉彩色的主要強調色 — 示範截圖顯示的是高飽和度的金黃色
- 勿使用刺眼的藍色或冷色調 — 示範截圖顯示的是溫暖、大地色系的色調
- 勿使用細線、低對比度的邊框 — 示範截圖顯示的是定義清晰、帶有微妙透明度的 1px 邊框
- 避免: 冰冷的技術性語言
- 避免: 過度激進的折扣訊息
- 避免: 複雜的行業術語
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個名為 Brightland 的高端 DTC 食品品牌網站。其設計核心在於溫暖、陽光的美學，結合了編輯攝影與大膽字體。色調以標誌性金黃色（#F6BE00）與純淨黑色（#1B1B1B）為基調，搭配柔和米白色背景（#F9F2EA）。字體方面，主要標題使用醒目的過渡襯線字體，內文與 UI 元素則使用簡潔的人文無襯線字體。佈局簡潔寬敞，桌面版常採用雙欄分割。關鍵限制：切勿使用純白背景或冰冷的藍色調。避免在展示文字中使用幾何無襯線字體，因品牌依賴襯線字體的優雅感。勿使用方形按鈕；所有互動元素應採用膠囊型，以維持親切、友善的感覺。
en · zh-CN · zh-TW · ja · ko