精選 · 開放 · 免費

Albacondos

一個以寬廣攝影圖像、大量留白與優雅克制的排版為特色的 premium 住宅房地產網站。

01

設計氣質 DNA

高端房地產開發商，展示 premium 都市居住空間。

02

色彩

帶有深沉暖色調的單色系色彩調性，視覺吸引力完全來自大尺寸攝影圖像。

03

字型

geometric-sans · humanist-sans

• display95px · 500
• headline40px · 300
• body16px · 300

主要字體為幾何無襯線體（Montserrat 系列），主字重為 300 · 輔助字體為用於品牌元素的裝飾性無襯線體 · 導覽列與功能標籤廣泛使用大寫轉換 · 大型數字顯示則採用寬鬆字距，以營造寬敞感

04

間距

垂直節奏由極度寬裕的 115px padding 區塊建立，創造出平靜且舒適的版面。

05

表面 (圓角 / 陰影 / 邊線)

膠囊形按鈕與小型標籤元件使用 1px 實心邊框。

06

版面

不對稱的瀑布流式網格，打破標準欄位對齊，創造出如雜誌般的編輯式流動感。

07

動效與互動

Clip-path 轉換被大量用於圖像的戲劇性、電影感揭示效果。 · 淡入與淡出模式，持續時間介於 0.4s 至 1.5s，以實現流暢的頁面轉換。

透明度與背景色變換，搭配流暢的 0.4s ease-out 轉換。 · 立即的游標回應，搭配延遲的 transform 轉換。

08

組件

• button 膠囊形輪廓按鈕，採用大寫文字與寬鬆的水平內距。
• card 極簡卡片，主要由大型高解析度攝影內容定義，而非厚重的邊框或陰影。
• chip 小型膠囊形標籤，帶有細 1px 邊框與大寫文字，用於分類標示。
• input 極簡的表單欄位，與淺色背景無縫融合。
• hero 全視窗的電影感圖像，作為主要視覺焦點，搭配絕對定位的排版文字。

09

文案語氣與禁用清單

• 語氣 精緻、自信且寧靜。
• 標題風格 極簡風格，常使用大型數字顯示（時間戳）而非傳統文字標題。
• 按鈕文案 低調的膠囊形按鈕，採用大寫字距。

• 不要使用明亮、飽和的強調色——截圖顯示為嚴格的單色系調性，以攝影為主導。
• 不要在卡片上使用厚重的陰影——截圖顯示為扁平、無邊框的元件，僅由圖像定義。
• 不要使用密集、擁擠的版面——截圖顯示有大量留白（115px 垂直內距）與舒適的間距。
• 不要使用過度風格化或裝飾性的襯線字體作為標題——截圖顯示所有排版均使用嚴格的幾何無襯線體。
• 不要在 UI 元件上使用複雜、多步驟的 border-radius——截圖顯示為嚴格的膠囊形（完全圓角）按鈕。
• 不要使用繁雜、複雜的背景——截圖顯示所有文字較多的區段均使用純色灰白背景 (#F5F4F3)。
• 避免: 避免使用明亮、飽和的色彩或刺眼的漸層。
• 避免: 避免依賴厚重的陰影或複雜的陰影邊框。
• 避免: 避免使用擁有多個小元素的複雜網格；優先使用大型攝影區域。
• 避免: 避免使用裝飾性或過度風格化的襯線字體。
• 避免: 避免使用密集、小字體；所有元素之間應保持寬裕的留白。
• 避免: 避免使用圓角半徑小的圓角矩形；堅持使用嚴格的膠囊形或直角。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko