精选 · 开放 · 免费
Pleo
集中的企业支出与费用管理平台
fintechsaas
01
设计气质 DNA
财务效率企业支出自动化管控
现代化的财务操作系统
02
色彩
#FFFFFFAccent
#000000Ink
#333333Ink soft
#F5F5F5BG soft
#888888Muted
rgba(0, 0, 0, 0.1)Line
采用高对比度的单色方案,以确保清晰度与信任感
03
字体
neo-grotesque-sans · monospace
- display
64px · 400 - h2
45px · 400 - body
23px · 400 - caption
16px · 400
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
使用充裕的垂直节奏,章节内边距为80px
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 4px
lg · 8px
pill · 159984px
交互元素使用1px实线rgba(0, 0, 0, 0.1)边框
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中的单列主视觉区域,后接交替排列的内容区块
07
动效与交互
130msmicro
230mssmall
400msmedium
cubic-bezier(0.4, 0, 1, 1)easing
hover时平滑的颜色和背景过渡
微妙的颜色过渡或背景变化 · 即时响应,延迟最小化
08
组件
- button 药丸形状,高对比度(黑底白字或白底黑字)
- card 带有圆角的微妙背景区块
- hero 大尺寸加粗标题,配合简洁的支持文本和双行动号召按钮
09
文案语气与禁用清单
- 语气 直接、赋能且专业
- 标题风格 祈使句式,强调收益
- 按钮文案 清晰且可操作
- 不要使用装饰性渐变——截图为扁平纯色背景
- 不要使用卡片投影——截图为扁平表面搭配细微边框
- 不要使用过粗的字重——截图为统一的400字重排版
- 不要使用鲜艳的强调色——截图为严格的单色方案
- 不要在主视觉区域使用复杂的多栏布局——截图为居中的单列主视觉区域
- 不要使用小圆角的矩形——截图为完整的药丸形按钮
- 避免: 行业术语
- 避免: 复杂的金融术语
- 避免: 激进的销售语言
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个专注于企业费用管理的高级金融科技SaaS平台。设计采用精致、极简的美学风格,使用严格的单色方案(黑色、白色和浅灰色)来传达信任与效率。排版采用简洁的新怪诞体无衬线字体,搭配大尺寸、高对比度的主视觉区域。关键十六进制颜色为#000000、#FFFFFF和#F5F5F5。关键设计约束包括:不使用装饰性渐变或厚重投影,使用统一的400字重字体,采用药丸形按钮而非标准圆角矩形。避免复杂的多栏主视觉布局或鲜艳的强调色。
en · zh-CN · zh-TW · ja · ko