精選 · 開放 · 免費
Maisonnue
現代房產投資與房地產趨勢的深色主題數位指南。
ConsumerDark ModeCleanMobile UI
01
設計氣質 DNA
房產指南房地產投資深色 UI行動優先
房地產投資的數位導覽，採用高對比、行動優先的介面呈現。
02
色彩
#ff2a2aAccent
#ffffffInk
#717171Ink soft
#000000BG
rgba(255, 255, 255, 1)Line
以純黑與純白為基調的高對比深色主題，搭配鮮明的紅色作為互動狀態的強調色。
03
字型
geometric-sans · humanist-sans
- display
20px · 700 - body
16px · 400
主要導覽連結與標題採用全大寫字形。 · 內文採用清晰的無襯線字體，以確保在深色背景上的可讀性。 · 標題使用稍重的字重並增加字距以強調。
04
間距
4px
8px
10px
16px
20px
24px
32px
50px
以 4px 格線為基礎，採用緊湊且一致的垂直節奏，列表項目之間留有明確間距。
05
表面 (圓角 / 陰影 / 邊線)
sm · 6px
md · 10px
lg · 15px
pill · 100px
細薄的 1px 實線，使用白色或柔和的灰色，謹慎地用於定義容器與分隔線。
0 4px 6px rgba(0, 0, 0, 0.3)
06
版面
600container
1columns
20pxgutter
768 / 1024breakpoints
單欄、行動優先的版面，置中於螢幕，針對垂直滾動瀏覽進行優化。
07
動效與互動
150msmicro
300mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
互動元素在懸停與點擊時，套用細微的 'ease-in-out' 過渡效果。 · 按鈕點擊回饋使用變換縮放效果。
互動列表項目產生細微的背景色彩或透明度變化。 · 按鈕上快速套用變換縮小效果，模擬實體按壓感。
08
組件
- button 全寬、藥丸形按鈕，採用紅色背景、白色文字與圓角設計，用於主要操作。
- card 簡潔的列表式行組件，包含圖示、文字與尾端操作圖示，以細微線條分隔。
- hero 全寬、置中的橫幅圖片，帶有深色遮罩與顯著的金色/白色排版。
09
文案語氣與禁用清單
- 語氣 資訊性、直接且專業，聚焦於引導與投資價值。
- 標題風格 直接且大寫，常重複品牌名稱以加強印象。
- 按鈕文案 導向行動且強調，使用如「下載」、「登入」或「註冊」等強烈詞彙。
- 不要使用淺色或粉彩色調背景 — 截圖顯示純 #000000 黑色背景。
- 不要使用裝飾性或手寫字體作為內文 — 截圖使用 Arial 與 Montserrat 以確保清晰度。
- 不要使用柔和或細微的強調色 — 截圖使用高飽和度的 #ff2a2a 紅色作為強調。
- 不要建立寬版或多欄版面 — 截圖顯示嚴格的單欄、行動裝置優化介面。
- 不要使用首字放大或複雜的排版裝飾 — 文字版面嚴格功能性且簡潔。
- 不要使用低對比的色彩組合 — 設計優先採用高對比的白底黑字以確保可讀性。
- 避免: 過度的行銷術語
- 避免: 複雜的句型結構
- 避免: 模糊的行動呼籲
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
設計一個深色主題、行動優先的現代房產投資數位指南。使用純黑 (#000000) 背景，搭配白色 (#ffffff) 與柔和灰色 (#717171) 文字以確保高可讀性。主要強調色應採用鮮明的紅色 (#ff2a2a)，用於互動狀態與行動呼籲。使用幾何與人文無襯線字體類別（如 Montserrat 與 Arial），並建立清晰的排版層級。版面必須嚴格採用單欄並置中。關鍵禁忌：不要使用淺色背景、不要使用裝飾性襯線字體、不要建立寬版多欄版面。介面應感覺功能化、直接且專業。
en · zh-CN · zh-TW · ja · ko