精選 · 開放 · 免費
Increase
为科技企业提供的企业级银行API。
fintechapi
01
設計氣質 DNA
企业银行业务APIs基础设施开发者
为金融基础设施量身打造的精密仪表板。
02
色彩
#31F2CCAccent
#1A2B3BInk
#687887Ink soft
#FFFFFFBG
#F5F6F7BG soft
#E4E5E9BG quiet
#314352Muted
rgba(26, 43, 59, 0.1)Line
以深海军蓝为基底营造信赖感,搭配鲜明青绿与酸橙渐变点缀现代科技感的洁净专业色盘。
03
字型
grotesque-sans · monospace
- display
72px · 700 - h2
40px · 700 - 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(26, 43, 59, 0.1)
rgba(12, 25, 39, 0.05) 0px 6px 8px 0px · rgba(12, 25, 39, 0.06) 0px 16px 20px 0px · rgba(12, 25, 39, 0.1) 0px 50px 60px 0px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
采用12栏网格的最大宽度容器,使主内容居中显示。
07
動效與互動
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元件悬停状态的流畅过渡 · 交互时细微的颜色与阴影变化
细腻的颜色过渡或轻微的阴影提升效果。 · 即时的视觉反馈,通常通过颜色或缩放变化实现。
08
組件
- button 深色药丸形状的主要按钮配白色文字;白色次要按钮配深色边框与图示。
- card 洁白卡片配以细微投影与12px圆角。
- chip 小型圆角药丸状标签。
- input 配以细腻边框与圆角的简洁文字输入框。
- hero 搭配动态重叠几何渐变的大型震撼性字体排印。
09
文案語氣與禁用清單
- 語氣 专业、权威且面向开发者。
- 標題風格 直接有力的陈述,强调企业级可靠性。
- 按鈕文案 行动导向,搭配明确的方向箭头。
- 避免使用衬线字体——界面截图为显示文字与正文均采用 grotesque-sans
- 避免使用复杂有机的插图——界面截图采用大胆的扁平几何渐变
- 避免使用无明确层次的宽松版面——界面截图为紧密结构化的网格
- 避免使用明亮霓虹色作为主要UI元素——界面以深海军蓝为基底搭配鲜明点缀色
- 避免为每个元素添加厚重的投影——界面仅在卡片与按钮上使用细微阴影
- 避免使用杂乱的导航栏——界面展示简洁的顶部导航
- 避免: 过于随意的俚语
- 避免: 华丽的形容词
- 避免: 模糊的营销用语
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
这是为面向企业开发者的专业金融科技SaaS产品设计的界面。色盘以深海军蓝(#1A2B3B)为基底营造信赖感,搭配鲜明的青绿色(#31F2CC)与酸橙绿渐变注入现代活力。字体排印方面,显示文字与正文采用 grotesque-sans,程式码片段使用 monospace。版面基于网格系统,空间充裕且高度易读。关键约束:避免使用衬线字体、防止界面杂乱,并绝不采用过于俏皮或有机的视觉元素。务必以深海军蓝作为主要按钮与文字颜色以维持权威感。
en · zh-CN · zh-TW · ja · ko