精选 · 开放 · 免费

Albacondos

一个以广阔摄影、慷慨留白和优雅克制的排版定义的高端住宅房地产网站。

01

设计气质 DNA

展示高端都市生活空间的豪华房地产开发商。

02

色彩

具有深暖色基调的单色调色板，完全依赖大尺寸摄影图片来提供视觉吸引力。

03

字体

geometric-sans · humanist-sans

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

主字体采用几何无衬线字体（Montserrat系列），主要使用300字重 · 辅以另一种展示型无衬线字体用于品牌元素 · 广泛使用大写转换应用于导航和功能标签 · 为大数字显示使用宽松的字距以营造宽敞感

04

间距

通过115px的极其慷慨的内边距块建立垂直韵律，营造宁静、透气的布局。

05

表面 (圆角 / 阴影 / 边线)

胶囊形按钮和小型标签组件使用1px实线边框。

06

布局

非对称的、类似砌体风格的网格，打破标准列对齐，创造编辑式的、杂志般的阅读流。

07

动效与交互

广泛使用剪裁路径过渡来实现图像上戏剧性的电影式揭示效果。 · 使用持续时间为0.4秒至1.5秒的淡入淡出模式，以实现平滑的页面过渡。

使用平滑的0.4秒缓出过渡进行透明度和背景色变化。 · 立即的光标指针响应，带有延迟的变换过渡。

08

组件

• button 胶囊形轮廓按钮，采用大写文字和慷慨的水平内边距。
• card 极简主义卡片，主要通过大型、高分辨率的摄影内容来定义，而非厚重的边框或阴影。
• chip 带有1px细边框和大写文字的小型胶囊形标签，用于分类标记。
• input 极简的表单字段，与浅色背景无缝融合。
• hero 全视口电影感图像，作为主要焦点，并配有绝对定位的排版。

09

文案语气与禁用清单

• 语气 精致、自信且宁静。
• 标题风格 极简主义，常使用大数字显示（时间戳）代替传统文本标题。
• 按钮文案 低调的胶囊形按钮，采用大写和宽松字距。

• 不要使用明亮、饱和的强调色——截图显示这是一个由摄影主导的严格单色调色板。
• 不要在卡片上使用厚重的投影——截图显示的是扁平的、无边框的元素，仅通过图像定义。
• 不要使用密集、杂乱的布局——截图显示的是巨大的留白（115px垂直内边距）和透气的间距。
• 不要在展示中使用风格化严重或装饰性的衬线字体——截图显示所有排版都使用严格的几何无衬线字体。
• 不要为UI组件使用复杂的多步圆角——截图显示的是严格的胶囊形（完全圆角）按钮。
• 不要使用繁杂、复杂的背景——截图显示所有文字密集的区域都使用纯色灰白背景（#F5F4F3）。
• 避免: 避免使用明亮、饱和的颜色或刺眼的渐变。
• 避免: 避免依赖厚重的投影或复杂的投影边框。
• 避免: 避免使用包含多个小元素的杂乱网格；优先使用大型摄影区域。
• 避免: 避免使用装饰性或风格化严重的衬线字体。
• 避免: 避免使用密集、小号的文字；在所有元素之间保持慷慨的留白。
• 避免: 避免使用小圆角的圆角矩形；坚持使用严格的胶囊形或直角。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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