OpenDesign·你的设计资产库

网页参考

Mollie

为现代企业提供支付基础设施

FintechPayments
Mollie 网站截图

01

设计气质 DNA

支付欧洲增长B2B基础设施

一家以规模和信任为核心的欧洲版 Stripe

02

色彩

#D55A00Accent
#111111Ink
#FFFFFFBG
#F4F4F4BG quiet
#A6A6A6Muted
rgba(166,166,166,0.6)Line

高对比度的单色,搭配策略性的橙色点缀

03

字体

geometric-sans · humanist-sans · monospace

  • display64px · 400
  • heading48px · 400
  • body16px · 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

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

Mollie 是一个为各类企业设计的欧洲支付处理平台。视觉系统采用高对比度的单色板(黑、白、灰),并策略性地使用橙色作为强调。排版采用几何无衬线展示字体,标题字间距紧凑,正文则使用人文主义无衬线字体。布局强调充足的留白和有冲击力的大尺寸图片。关键设计规则包括:绝不使用鲜艳的霓虹色,保持干净的几何排版,并确保元素之间有足够的间距。网站将自身定位为值得信赖的专业基础设施合作伙伴,因此需要采用高端且克制的视觉方案。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。