精选 · 开放 · 免费
Albacondos
一个以广阔摄影、慷慨留白和优雅克制的排版定义的高端住宅房地产网站。
PremiumPhotographicEditorialCalmRefined
01
设计气质 DNA
奢华建筑都市精致现代生活
展示高端都市生活空间的豪华房地产开发商。
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的极其慷慨的内边距块建立垂直韵律,营造宁静、透气的布局。
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
广泛使用剪裁路径过渡来实现图像上戏剧性的电影式揭示效果。 · 使用持续时间为0.4秒至1.5秒的淡入淡出模式,以实现平滑的页面过渡。
使用平滑的0.4秒缓出过渡进行透明度和背景色变化。 · 立即的光标指针响应,带有延迟的变换过渡。
08
组件
- button 胶囊形轮廓按钮,采用大写文字和慷慨的水平内边距。
- card 极简主义卡片,主要通过大型、高分辨率的摄影内容来定义,而非厚重的边框或阴影。
- chip 带有1px细边框和大写文字的小型胶囊形标签,用于分类标记。
- input 极简的表单字段,与浅色背景无缝融合。
- hero 全视口电影感图像,作为主要焦点,并配有绝对定位的排版。
09
文案语气与禁用清单
- 语气 精致、自信且宁静。
- 标题风格 极简主义,常使用大数字显示(时间戳)代替传统文本标题。
- 按钮文案 低调的胶囊形按钮,采用大写和宽松字距。
- 不要使用明亮、饱和的强调色——截图显示这是一个由摄影主导的严格单色调色板。
- 不要在卡片上使用厚重的投影——截图显示的是扁平的、无边框的元素,仅通过图像定义。
- 不要使用密集、杂乱的布局——截图显示的是巨大的留白(115px垂直内边距)和透气的间距。
- 不要在展示中使用风格化严重或装饰性的衬线字体——截图显示所有排版都使用严格的几何无衬线字体。
- 不要为UI组件使用复杂的多步圆角——截图显示的是严格的胶囊形(完全圆角)按钮。
- 不要使用繁杂、复杂的背景——截图显示所有文字密集的区域都使用纯色灰白背景(#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”的高端都市住宅开发商进行设计。其视觉语言由广阔的电影感摄影、慷慨的留白和严格的单色调色板定义。主背景为温暖的灰白色(#F5F4F3),文字为纯黑色(#000000)。排版严重依赖轻量(300)的几何无衬线字体,以营造精致、通透的感觉。UI元素,特别是按钮和标签,严格采用胶囊形设计,带有1px细轮廓和大写宽松字距。使用复杂的剪裁路径动画来实现图像揭示效果。关键限制:避免任何明亮的强调色、投影或杂乱的多列网格。始终优先考虑大型摄影区域和极端的垂直间距(115px内边距),以保持奢华和宁静感。绝不使用装饰性或厚重的展示字体。
en · zh-CN · zh-TW · ja · ko