精選 · 開放 · 免費
Graza
頂級橄欖油，以趣味包裝與獨特、質樸的視覺識別重新定義。
brandfood
01
設計氣質 DNA
橄欖油可擠壓廚房頂級趣味感
一個具備趣味感與觸感質感的高端手工食品品牌。
02
色彩
#D1E030Accent
#3C422EInk
#F6E6D9BG
#4E5340Muted
rgba(60, 66, 46, 1)Line
以深橄欖綠與柔和蜜桃色為主的質樸暖色調基底，輔以鮮明的黃綠色作為強調。
03
字型
transitional-serif · typewriter
- display
72px · 500 - body
16px · 400
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
垂直間距採用充裕的間隙，常見為 35px 或 68px，讓大型影像與大膽的字型排印得以呼吸。
05
表面 (圓角 / 陰影 / 邊線)
sm · 10px
md · 20px
lg · 20px
pill · 9999px
邊框主要用於描邊與區隔，通常為 1px solid 深綠色。
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
全版攝影主視覺區塊，後接寬裕的格狀版面配置用於產品卡片。
07
動效與互動
250msmicro
250mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
互動元素的背景色與透明度平滑過渡。 · hover 狀態的變形過渡效果。
按鈕、連結等元素會微幅改變背景色、邊框顏色或進行變形。 · 透過背景色或變形改變提供即時回饋。
08
組件
- button 粗體、藥丸造型按鈕，搭配強烈的強調色與大寫文字。
- card 產品卡片具備大型影像、細微圓角與清晰的價格/類別標籤。
- chip 不適用
- input 不適用
- hero 全出血攝影背景，覆蓋上大型、靠左對齊的襯線體標題。
09
文案語氣與禁用清單
- 語氣 自信、親切且略帶俏皮。
- 標題風格 大型、優雅的襯線體字型排印，常採用句首大寫或全小寫。
- 按鈕文案 直接、大寫，並常設定於高對比的藥丸造型中。
- 不要使用深色背景 — 截圖顯示淺色、溫暖的蜜桃色背景（#F6E6D9）
- 不要使用無襯線字型作為主要標題 — 截圖顯示展示文字採用過渡襯線字型
- 不要使用細微或柔和的強調色 — 截圖顯示鮮明的黃綠色強調色（#D1E030）
- 不要所有地方都使用銳利的直角 — 截圖顯示圓角（20px）與藥丸造型
- 不要在關鍵訊息上使用密集、小號的文字 — 截圖顯示大型、粗體字型（72px）
- 不要使用冷色調、灰色調的中性色 — 截圖顯示質樸、溫暖的色調，如深橄欖綠（#3C422E）
- 避免: 避免使用冷調、企業化的語言 — 截圖顯示溫暖、對話式的語氣
- 避免: 避免密集文字區塊 — 截圖顯示充裕的間距與大型影像
- 避免: 避免深色模式 — 截圖顯示一致的淺色暖調背景
- 避免: 避免過於複雜的使用者介面模式 — 截圖顯示直接、以影像為主導的版面
- 避免: 避免標題使用無襯線字型 — 截圖顯示展示文字採用襯線體
- 避免: 避免使用柔和、低對比的強調色 — 截圖顯示鮮明的黃綠色強調色
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Graza 是一個頂級、具趣味感的橄欖油品牌，目標消費者重視品質與設計。網站採用溫暖、質樸的色調，以柔和的蜜桃色（#F6E6D9）與深橄欖綠（#3C422E）為核心，並以鮮明的黃綠色（#D1E030）作為行動呼籲的強調色。字型排印結合了優雅的過渡襯線展示字體與打字機風格的內文字型。關鍵禁忌：避免深色模式、避免標題使用無襯線字型、避免柔和強調色、避免銳利直角、避免密集文字、避免冷色調中性色。版面依賴大型、全出血攝影圖片與充裕的空白區域，營造出編輯風格的高端質感。
en · zh-CN · zh-TW · ja · ko