精选 · 开放 · 免费
Mollie
为现代企业提供支付基础设施
fintechpayments
01
设计气质 DNA
支付欧洲增长B2B基础设施
一家以规模和信任为核心的欧洲版 Stripe
02
色彩
#D55A00Accent
#111111Ink
#FFFFFFBG
#F4F4F4BG quiet
#A6A6A6Muted
rgba(166,166,166,0.6)Line
高对比度的单色，搭配策略性的橙色点缀
03
字体
geometric-sans · humanist-sans · monospace
- display
64px · 400 - heading
48px · 400 - body
16px · 400
展示型排版使用紧凑的字间距 · 字体字重范围为400至500，用于建立层次 · 行高设置慷慨，以提升可读性
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
基于4px增量的垂直节奏
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 24px
pill · 999px
使用 rgba(166,166,166,0.6) 的细微1px边框
0px 4px 8px 0px rgba(0, 0, 0, 0.08) · 0px 16px 32px 0px rgba(0, 0, 0, 0.08) · 0px 0px 1px 0px rgba(0, 0, 0, 0.15)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽的头部和首屏区域，搭配受约束的内容区
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0.0, 0.2, 1)easing
细微的hover状态过渡 · 平滑的页面滚动
交互元素上细微的颜色过渡 · 通过状态变化提供即时视觉反馈
08
组件
- button 高对比度的主要按钮（黑底白字）和次要按钮（灰底）
- card 大圆角图片卡片，带充足内边距和细微阴影
- chip 在截图中未显示
- input 简洁的下划线式输入框
- hero 大字号排版居中叠加在全宽生活方式图片上，配以覆盖的UI卡片
09
文案语气与禁用清单
- 语气 专业、可信赖、自信
- 标题风格 大字号、加粗的陈述，强调规模和可靠性
- 按钮文案 直接且面向行动（立即开始、联系销售）
- 避免使用鲜艳或霓虹色——截图显示以黑、白、灰为主的柔和色调
- 避免使用装饰性或衬线展示字体——截图显示标题使用干净的几何无衬线字体
- 避免用过多元素使布局杂乱——截图显示充足的留白和聚焦的内容
- 避免使用小而拥挤的排版——截图显示字号大、易读且行高慷慨的文字
- 避免在所有元素上使用尖锐的矩形角——截图显示慷慨的圆角（最大24px）
- 避免使用细长的按钮——截图显示实心、有分量的主要按钮，对比清晰
- 避免: 充满行话的语言
- 避免: 过多的感叹号
- 避免: 过于随意的语气
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Mollie 是一个为各类企业设计的欧洲支付处理平台。视觉系统采用高对比度的单色板（黑、白、灰），并策略性地使用橙色作为强调。排版采用几何无衬线展示字体，标题字间距紧凑，正文则使用人文主义无衬线字体。布局强调充足的留白和有冲击力的大尺寸图片。关键设计规则包括：绝不使用鲜艳的霓虹色，保持干净的几何排版，并确保元素之间有足够的间距。网站将自身定位为值得信赖的专业基础设施合作伙伴，因此需要采用高端且克制的视觉方案。
en · zh-CN · zh-TW · ja · ko