精選 · 開放 · 免費
Regrocery
一個高級零浪費雜貨平台，運用富有表現力的字體排印與溫潤攝影，讓永續生活顯得毫不費力且提升質感。
ConsumerCleanPremiumPhotographicRefined
01
設計氣質 DNA
零浪費永續無包裝高級簡潔
為環保意識消費者打造的高級編輯風格雜誌
02
色彩
#F74C25Accent
#211D1CInk
#F7F6F2BG
#EFEDF7BG soft
rgba(247, 76, 37, 1.0)Line
溫潤中性色提供簡潔有機的基底，單一高能量橙紅色驅動行動。
03
字型
didone-serif · humanist-sans
- display
100px · 400 - heading
30px · 400 - body
20px · 400
展示標題與大標題採用緊湊字距，營造精緻現代感 · 襯線字體專用於大型表現力標題 · 無襯線字體處理所有功能性與導覽文字
04
間距
4px
8px
10px
16px
20px
30px
40px
95px
運用大量留白讓攝影與字體排印得以呼吸
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 999px
pill · 999px
1px 細實線條採用主要強調色
0px 0px 20px 0px rgba(0,0,0,0.05)
06
版面
1280container
12columns
20pxgutter
768 / 1024breakpoints
不對稱分割搭配大型攝影主視覺區域，與置中或左對齊文字區塊相結合
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.22, 1, 0.36, 1)easing
hover 狀態的流暢有機過渡 · 搭配自訂緩動函數的背景色過渡
互動元素的細微色調與背景過渡變化 · 所有可點擊項目立即視覺回饋並顯示指標游標
08
組件
- button 帶細邊框與高對比強調色的膠囊狀按鈕
- card 圓角圖片容器，以有機形態打破網格限制
- hero 全出血沉浸式攝影疊加大尺寸展示字體
09
文案語氣與禁用清單
- 語氣 自信、精緻且聚焦永續
- 標題風格 簡短有力的短語搭配表現力襯線字體
- 按鈕文案 直接且行動導向，常使用膠囊狀外框按鈕
- 勿使用雜亂佈局——截圖顯示大量留白與大型影像
- 勿使用純幾何無襯線字體作標題——截圖顯示表現力 Didone 襯線體
- 勿使用刺眼原色——截圖顯示特定溫潤橙紅強調色
- 勿使用方形按鈕邊角——截圖顯示膠囊狀圓角邊框
- 勿隱藏導覽列——截圖顯示簡潔持久的頂部導覽欄
- 勿使用平淡冷調背景——截圖顯示溫潤米白與細膩漸層
- 避免: 強勢行銷術語
- 避免: 雜亂佈局
- 避免: 泛用企業語言
- 避免: 過於複雜的介面
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（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
Regrocery 是一個高級零浪費雜貨平台，具有精緻的編輯美學。採用溫潤米白 (#F7F6F2) 與淺灰 (#EFEDF7) 背景，搭配大膽橙紅 (#F74C25) 強調色與深棕黑 (#211D1C) 墨色。字體結合用於簡潔導覽與內文的人文無襯線體，以及用於具衝擊力標題的大型表現力 Didone 襯線體。佈局強調大量留白與全出血攝影。關鍵限制：切勿使用雜亂佈局；避免以無襯線字體作展示標題；勿以泛用色彩取代標誌性溫潤橙紅強調色；互動按鈕勿使用方形邊角；避免冷調臨床白色背景；勿使用泛用企業字體或語言。
en · zh-CN · zh-TW · ja · ko