精選 · 開放 · 免費
Letsbehonest Eu
一個永續時尚品牌,以高對比的編輯式攝影與溫暖大地色調為特色。
EditorialPhotographicCurationCleanPremium
01
設計氣質 DNA
永續時尚編輯隨興
時尚編輯雜誌的數位店面。
02
色彩
#892500Accent
#0E0E0EInk
#868686Ink soft
#EEE5D9BG
#F9F6F2BG soft
#B4B4B4Muted
rgba(134, 134, 134, 0.3)Line
溫暖的大地中性色調,以單一深紅色点缀和高對比攝影為基礎。
03
字型
geometric-sans · humanist-sans
- display
138px · 700 - h1
56px · 700 - body
14px · 400 - caption
11px · 400
導覽與次級標題使用大寫字母。 · 大寫元素保持寬鬆的字距(2px 以上)。 · 混合幾何與人文無襯線字體以建立層次。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
寬鬆的垂直間距,搭配明確的區段內邊距(例如頂部 114px)。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
極簡,使用 1px solid #868686 作為細微分隔線與互動元素。
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
全版寬度英雄圖像,接著是置中的單欄區段,並留有充足空白。
07
動效與互動
150msmicro
200mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
互動元素懸停時快速、細微的色彩過渡。 · 輪播幻燈片的平滑過渡。
細微的色彩變化或透明度轉變,通常為 0.15 秒 ease-out。 · 立即的視覺回應。
08
組件
- button 文字式或簡單矩形按鈕,採用大寫文字與寬鬆的水平內邊距。
- card 簡潔的產品卡片,以中性背景呈現全版高度模特兒攝影。
- hero 全版出血的高解析度編輯式攝影,搭配最小化的覆蓋文字與大型輪播箭頭。
09
文案語氣與禁用清單
- 語氣 自信、簡約,並聚焦於永續理念。
- 標題風格 簡短、有力,通常以大寫粗體字母呈現。
- 按鈕文案 簡潔而不突兀,通常為文字式。
- 勿使用純白背景——畫面顯示以溫暖的米色 (#EEE5D9) 作為主要底色。
- 勿將導覽設為小寫——畫面顯示所有導覽項目均為大寫。
- 勿使用複雜漸層——設計依賴純色與高品質攝影。
- 勿所有地方都使用無襯線字體——品牌標識採用粗體、緊湊的無襯線字體,而內文則更具人文風格。
- 勿為卡片添加陰影——產品卡片無邊框且與背景平齊。
- 勿為主要內容使用深色模式或深色背景——色彩配置以淺色和大地色為主。
- 避免: 使用過於鮮豔、霓虹或過度合成的色彩。
- 避免: 採用裝飾性或手寫字體。
- 避免: 在圖片上添加過多文字覆蓋,造成雜亂佈局。
- 避免: 使用複雜的陰影或漸層。
- 避免: 添加不必要的邊框或厚重的介面框架。
- 避免: 主要導覽使用小寫字母。
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
設計一個高端的編輯式時尚電子商務網站。核心美學建立在溫暖的大地色調上,主要背景為 #EEE5D9,並搭配鮮明的高對比点缀色 #892500。採用幾何與人文無襯線字體的組合,用於展示與內文,並確保導覽和關鍵標籤使用大寫字母。佈局必須以圖片為主,優先展示大型高解析度攝影,搭配寬鬆的空白與極簡的介面框架。避免雜亂的介面、厚重的陰影或看似合成的色彩。確保互動細微,使用快速的 0.15 秒色彩過渡。導覽勿使用小寫字母,卡片勿添加陰影,並勿使用純白背景。
en · zh-CN · zh-TW · ja · ko