精选 · 开放 · 免费
Modern Treasury
面向开发者的支付编排 API。
fintechsaas
01
设计气质 DNA
基础设施支付API金融科技
资金流动的清晰建筑蓝图。
02
色彩
#29735CAccent
#151515Ink
rgba(21, 21, 21, 0.8)Ink soft
#FFFFFFBG
#F8F5F4BG soft
#F0F8F9BG quiet
rgba(0, 0, 0, 0.5)Muted
高对比度的中性色,搭配一个可信赖的绿色点缀。
03
字体
grotesque-sans · humanist-sans · monospace
- display
48px · 500 - h2
32px · 400 - body
16px · 400 - caption
14px · 400
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
4px 网格
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(21, 21, 21, 0.8)
inset 0 0 0 1px rgb(21, 21, 21) · 0 20px 25px -5px lab(0 0 0 / 0.04) · 0 4px 6px -1px rgba(0, 0, 0, 0.1)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中内容,文本块最大宽度为 680px。
07
动效与交互
150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
颜色过渡 · 背景色过渡 · 边框色过渡 · 填充色过渡
平滑的颜色过渡 · 即时反馈
08
组件
- button 直角矩形,带有小圆角,使用深色实心背景搭配浅色文字或带边框的轮廓。
- card 实色色块,带有微妙的内边距和圆角。
- chip 小型矩形标签,使用等宽字体和浅色背景。
- input 简洁的矩形字段,带有细微边框。
- hero 居中的大字号排版,带有明确的行动号召。
09
文案语气与禁用清单
- 语气 专业、以开发者为中心、高效。
- 标题风格 简短、行动导向的陈述。
- 按钮文案 直接且引人入胜。
- 不要使用柔和、圆角的‘友好’形状——截图显示的是尖锐的矩形界面组件。
- 不要使用明亮的红色或蓝色等原色——截图显示的是黑、白、绿构成的克制配色方案。
- 不要使用装饰性衬线字体——截图显示的是简洁、现代的无衬线字体排印。
- 不要使用复杂、多彩的渐变——截图显示的是实色色块和简洁的网格背景。
- 不要使用俏皮或卡通风格的插图——截图显示的是技术图表和简洁的数据可视化。
- 不要使用过多的投影——截图显示的是具有最小深度的平面表面。
- 避免: 营销术语
- 避免: 模糊的承诺
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Modern Treasury 是一个面向开发者的优质金融科技 SaaS 平台,具有简洁专业的界面。设计使用黑白分明的配色,以特定品牌绿 (#29735C) 为锚点。排版严格使用无衬线字体,优先考虑易读性和层级。关键约束:避免俏皮形状,避免原色,避免装饰性衬线,避免复杂渐变,避免卡通插图,避免过多投影。专注于技术清晰度和效率。
en · zh-CN · zh-TW · ja · ko