精選 · 開放 · 免費
Raus Life
具有寧靜自然美學的高端小屋預訂平台。
CalmPremiumCleanConsumer
01
設計氣質 DNA
度假小屋逃離自然寧靜
結合現代極簡與有機溫暖質感的頂級自然度假數位管家。
02
色彩
#dd5000Accent
#23212cInk
#ffffffBG soft
#fdf9edBG quiet
#006434Muted
rgba(35,33,44,1)Line
採用深碳灰、純白與大地森林綠,呈現沉穩優雅的色調。
03
字型
grotesque-sans · monospace
- display
56px · 400 - h1
36px · 400 - body-lg
22px · 400 - body
18px · 400 - body-sm
16px · 400
所有展示與標題字級皆使用負字距,營造緊緻現代感。 · 內文字重維持 400,確保清晰易讀的親和力。 · 大寫文字僅限用於標籤與標記。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
以 4px 基礎網格建立一致節奏,主要容器內距寬裕。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 12px
lg · 20px
pill · 999px
採用 1px 細邊框,多使用主色墨水色調,常用於互動元件的底線。
rgba(0, 0, 0, 0.3) 0px 32px 68px 0px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
全寬區塊搭配集中式內容區域。
07
動效與互動
200msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
覆蓋層與模態框採用透明度與變換的平滑轉場。
細微背景色變化或底線浮現效果。 · 即時視覺回饋與轉場狀態。
08
組件
- button 圓潤膠囊形按鈕,交替使用實心填充(綠/碳灰)與描邊樣式。
- card 簡潔卡片採用 20px 圓角與柔和陰影,多搭配大型攝影圖像。
- chip 小型大寫標籤採用圓角設計。
- input 簡潔下劃線輸入欄位置於預訂列中。
- hero 全寬攝影背景搭配覆蓋文字與半透明預訂介面。
09
文案語氣與禁用清單
- 語氣 親切、寧靜而精緻。
- 標題風格 簡短啟發性的短語,聚焦體驗感受。
- 按鈕文案 直接具行動力,常搭配箭頭指示。
- 勿使用鮮豔霓虹色——截圖顯示深碳灰、森林綠與溫暖橙的配色方案。
- 勿使用圓潤泡泡字體——截圖顯示簡潔幾何無襯線體。
- 勿使用厚重投影——截圖顯示平面設計,僅在 Cookie 模態框使用深層陰影。
- 勿使用擁擠版面——截圖顯示充足留白與清晰視覺層級。
- 勿使用尖銳直角——截圖顯示卡片採用 20px 圓角、按鈕採用 99px 圓角。
- 勿使用複雜漸層——截圖顯示多為純色填充與簡單線性淡出。
- 避免: 喧鬧高能量的文案。
- 避免: 過度技術性的術語。
- 避免: 強勢的銷售策略。
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
設計寧靜高端的小屋預訂平台。配色以深碳灰(#23212c)與純白(#ffffff)為基調,森林綠(#006434)用於主要操作,溫暖橙(#dd5000)作為促銷強調色。字體採用簡潔現代的無襯線體,展示文字使用緊湊字距。版面寬敞採用 4px 網格與充足內距。運用圓潤膠囊形按鈕與帶柔和陰影的卡片。避免鮮豔色彩、複雜版面與尖銳直角,以維持寧靜自然的美學風格。
en · zh-CN · zh-TW · ja · ko