精選 · 開放 · 免費
Albacondos
一個以寬廣攝影圖像、大量留白與優雅克制的排版為特色的 premium 住宅房地產網站。
PremiumPhotographicEditorialCalmRefined
01
設計氣質 DNA
奢華建築都市精緻現代生活
高端房地產開發商,展示 premium 都市居住空間。
02
色彩
#000000Ink
#F5F4F3BG
#737373Muted
rgb(115, 115, 115)Line
帶有深沉暖色調的單色系色彩調性,視覺吸引力完全來自大尺寸攝影圖像。
03
字型
geometric-sans · humanist-sans
- display
95px · 500 - headline
40px · 300 - body
16px · 300
主要字體為幾何無襯線體(Montserrat 系列),主字重為 300 · 輔助字體為用於品牌元素的裝飾性無襯線體 · 導覽列與功能標籤廣泛使用大寫轉換 · 大型數字顯示則採用寬鬆字距,以營造寬敞感
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
垂直節奏由極度寬裕的 115px padding 區塊建立,創造出平靜且舒適的版面。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 22px
pill · 999px
膠囊形按鈕與小型標籤元件使用 1px 實心邊框。
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
不對稱的瀑布流式網格,打破標準欄位對齊,創造出如雜誌般的編輯式流動感。
07
動效與互動
400msmicro
600mssmall
1000msmedium
cubic-bezier(0.76, 0, 0.24, 1)easing
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
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
你正在為一家名為 'ALBA' 的 premium 都市住宅開發商進行設計。其視覺語言定義為:寬廣的電影感攝影圖像,搭配大量的留白與嚴格的單色系色彩調性。主要背景為溫潤的灰白色 (#F5F4F3),文字為純黑 (#000000)。排版極度依賴輕字重 (300) 的幾何無襯線體,以營造精緻、輕盈的感覺。UI 元素,特別是按鈕與標籤,嚴格採用膠囊形狀,帶有細 1px 輪廓與大寫字距。複雜的 clip-path 動畫用於圖像揭示。關鍵限制:避免任何明亮的強調色、陰影或擁擠的多欄位網格。始終優先使用大型攝影區域與極大的垂直間距 (115px 內距),以維持奢華與寧靜感。切勿使用裝飾性或厚重的展示字體。
en · zh-CN · zh-TW · ja · ko