精選 · 開放 · 免費
Vacation Inc
靈感源自復古風格的防曬品牌,具備俏皮的 1980 年代泳池畔美學。
ProductConsumerPhotographicPlayfulWarm
01
設計氣質 DNA
復古俏皮防曬泳池畔懷舊
一本復古的度假手冊,在網頁上躍然呈現。
02
色彩
#333333Ink
#ebe6dcBG
#d8d4cbMuted
rgba(51,51,51,1.0)Line
溫暖的米白色背景搭配深灰色文字,確保高可讀性。
03
字型
transitional-serif · humanist-sans
- display
48px · 400 - heading
30px · 400 - body
16px · 400 - small
18px · 400
大型促銷與展示文字使用過渡襯線體。 · 內文與導覽使用人文無襯線體。 · 展示型文字保持負字距。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
基於 4px 格線的統一間距,主要區塊間使用較大間距。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
4px solid #333333
rgba(0, 0, 0, 0.1) 1px 1px 5px 0px · rgba(0, 0, 0, 0.75) 2px 2px 2px 0px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
不對稱格線,搭配重疊影像與寬裕的留白。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0, 0.75, 1)easing
互動元素上的顏色與變形平滑過渡。
細微的色彩變化或影像縮放。 · 標準指標游標。
08
組件
- button 全寬、圓角藥丸造型的按鈕,採用溫潤的黃色背景。
- card 以影像為主的卡片,搭配細邊框與復古標籤(如「圖 1」)。
- input 底部帶有邊框、無背景填充的簡潔輸入框。
- hero 全寬背景影像,搭配細 4px 邊框與疊加文字。
09
文案語氣與禁用清單
- 語氣 機智、懷舊,且帶有俏皮的權威感。
- 標題風格 優雅的大號襯線字體。
- 按鈕文案 藥丸形按鈕,搭配粗體無襯線文字。
- 請勿使用純白背景——截圖顯示應使用溫潤的米白色(#ebe6dc)。
- 請勿為主要按鈕使用明亮、高飽和度的強調色——截圖顯示應使用溫潤的柔和黃色(#f1d27a)。
- 請勿使用粗重的無襯線體作為展示文字——截圖顯示應使用細體過渡襯線字體。
- 請勿使用緊湊間距的 12 欄對稱佈局——截圖顯示應使用寬裕的間距與不對稱對齊。
- 請勿為主要按鈕使用銳利的矩形圓角——截圖顯示應使用完全圓角的藥丸造型。
- 請勿使用深色模式或黑色背景——截圖顯示應使用明亮、如紙質般的背景。
- 避免: 現代極簡主義
- 避免: 冷色或臨床感的配色
- 避免: 過於複雜的佈局
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
設計一個俏皮、復古風格的防曬品牌消費者網站。美學基調為懷舊的 1980 年代泳池畔奢華感,使用溫潤的米白色背景(#ebe6dc)與深灰色文字(#333333)。字體結合了展示文字用的細體過渡襯線體,與內文用的人文無襯線體。主要操作按鈕為全寬、藥丸造型,並填充溫潤的柔和黃色。佈局寬敞且不對稱,常融入復古攝影與復古圖形元素(如條碼或虛線邊框)。避免使用現代極簡主義、純白背景或高對比的霓虹強調色。整體感覺是精緻而奇趣。
en · zh-CN · zh-TW · ja · ko