精选 · 开放 · 免费
Qonto
一个综合性企业财务平台,提供账户、工具及AI赋能的管理服务。
fintechsaas
01
设计气质 DNA
企业账户财务管理公司创立AI智能体信任
一个将现代银行服务与AI驱动的财务自动化相结合的高级金融科技平台,专为企业打造。
02
色彩
#FFFFFFInk
#626262Ink soft
#050505BG
#1A1A1ABG soft
#CCCCCCMuted
rgba(204,204,204,1.0)Line
采用高对比度单色系配色方案,以近黑色背景搭配纯白文字,营造高级感。
03
字体
geometric-sans
- display
56px · 700 - h2
48px · 700 - body-lg
18px · 400 - body
16px · 400 - caption
14px · 400 - overline
12px · 400
展示文本使用紧凑的负字距(-1px)以增强视觉冲击力 · 正文文本保持充裕的行高(1.5)以确保可读性 · 所有文本采用几何无衬线字体类别,以保持现代统一感
04
间距
4px
8px
12px
16px
24px
32px
48px
56px
64px
80px
96px
以一致的4px为基准,间距为4、8、12、16、24的倍数,用于组件密度控制
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 24px
pill · 33554432px
1px实线边框,使用rgb(204,204,204)作为柔和分隔线,rgb(255,255,255)用于交互元素
0px 0px 20px 0px rgba(255,255,255,0.08) · 1px 0px 10px 2px rgba(0,0,0,0.1)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
12列栅格,拥有充裕的留白和主导视口的大型首屏区域
07
动效与交互
200msmicro
300mssmall
500msmedium
cubic-bezier(0.25, 0.46, 0.45, 0.94)easing
background-size过渡效果用于图片揭示 · 宽度动画用于加载状态 · 平滑的变换动画用于交互元素
微妙的背景色过渡,使用0.5秒的ease-out缓动 · 通过变换状态提供即时视觉反馈
08
组件
- button 高对比度按钮,圆角半径24px,在深色背景上使用白色背景,在浅色背景区块上使用黑色背景
- card 大型圆角容器(圆角半径24px),带有柔和阴影,用于功能区块
- chip 小型圆角标签,圆角半径12px,用于标签和徽章
- input 简洁的输入框,1px边框,圆角
- hero 全视口首屏区域,采用大号排版(56px)及产品摄影图
09
文案语气与禁用清单
- 语气 专业、自信、直接,以明确的价值主张为核心
- 标题风格 简短有力的陈述句,以句号结尾以示强调(例如:‘企业账户。’)
- 按钮文案 以行动为导向,使用清晰的动词(例如:‘开设账户’、‘找到合适的方案’)
- 不要使用彩色渐变——截图显示的是纯黑背景配白色文字
- 不要添加过多动画——截图显示的是微妙过渡和静态布局
- 不要使用装饰性字体——截图全程使用简洁的几何无衬线字体
- 不要使布局过于拥挤——截图保持了充裕的内边距(56px)和间距
- 不要在标题中使用小号字体——截图在首屏区域使用56px的展示字体
- 不要混合多种强调色——截图保持严格的黑/白/灰配色方案
- 避免: 避免使用过多感叹号——截图显示的是平静、以句号结尾的陈述
- 避免: 避免使用复杂的金融术语——截图使用通俗的商业语言
- 避免: 避免罗列过多功能——截图每个区块只呈现一个明确的价值点
- 避免: 避免界面拥挤——截图保持了充裕的留白
- 避免: 避免使用花哨的颜色——截图采用克制的单色系配色
- 避免: 避免使用随意的语言——截图全程保持专业语调
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(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平台。其设计DNA采用高对比度单色系配色方案,以近黑色背景(#050505, #1A1A1A)搭配纯白文字(#FFFFFF)来确立其高级定位。排版采用几何无衬线字体类别,标题使用紧凑字距,正文使用充裕行高。关键十六进制颜色包括背景色#050505、主要文本色#FFFFFF以及柔和元素色#CCCCCC。布局采用12列栅格,栏间距24px,并配有大型首屏区域(56px标题)。关键禁忌:避免彩色渐变、过多动画和装饰性字体。在所有组件中保持克制、自信的语调,使用以句号结尾的标题,并保持充裕的留白。
en · zh-CN · zh-TW · ja · ko