精选 · 开放 · 免费
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