OpenDesign·你的设计资产库

网页参考

Monzo

Monzo 是一家以数字为先的银行，旨在让用户对其资金拥有完全的掌控力和清晰的了解。

FintechBank
Monzo 网站截图

01

设计气质 DNA

银行业务信任清晰赋能安全

一款现代、友好的银行应用，其体验如同与一位值得信赖的朋友交谈般轻松自然。

02

色彩

#FF4F40Accent
#091723Ink
rgba(9,23,35,0.6)Ink soft
#FFFFFFBG
#F2F8F3BG soft
#E3EBE4BG quiet
rgba(9,23,35,0.1)Line

采用高对比度、干净的色板，以单一的鲜艳珊瑚色作为主要操作的强调色，确保清晰度和信任感。

03

字体

humanist-sans · geometric-mono

  • display48px · 800
  • h239px · 800
  • h331px · 800
  • body16px · 400
  • body-lg20px · 400

标题使用 800 字重，以最大化冲击力和权威感。 · 正文使用常规 400 字重，以实现最佳可读性。 · 展示型文本的字母间距会收紧，以呈现现代、统一的视觉效果。

04

间距

4px
8px
16px
24px
32px
48px
64px
96px
128px

采用一致的 4px 基础网格，并在内容区域设置了充足的垂直内边距（64px）。

05

表面 (圆角 / 阴影 / 边线)

sm · 4px
md · 8px
lg · 12px
pill · 500px

1px solid rgba(9,23,35,0.1)

0px 0px 10px rgba(0, 0, 0, 0.1)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

响应式网格，内容居中，并设有宽大的沉浸式主视觉区域。

07

动效与交互

200msmicro
300mssmall
800msmedium
cubic-bezier(0.22, 0, 0.12, 1)easing

UI 元素的平滑淡入动画。 · 悬停时的微妙背景颜色过渡。 · 交互状态下的变形动画。

微妙的背景颜色变化和光标更新。 · 提供即时的视觉反馈和状态变化。

08

组件

  • button 药丸形按钮，采用纯色填充或白色背景，并搭配高对比度文字。
  • card 带有微妙阴影（0px 0px 10px rgba(0,0,0,0.1)）和充足内部内边距的卡片。
  • chip 用于次要操作或标签的药丸形小元素。
  • input 带有清晰边框和标准内边距的简洁输入框。
  • hero 全宽、无边距的摄影主视觉，配有深色渐变叠加层和左对齐的文字。

09

文案语气与禁用清单

  • 语气 自信、清晰且令人安心。
  • 标题风格 采用直接、以利益为驱动的陈述，使用有力、简洁的语言。
  • 按钮文案 行动导向并予以鼓励，聚焦于价值（例如“免费”）。
  • 避免使用衬线字体——截图显示的是一套干净的无衬线字体系统。
  • 避免使用低饱和度或低对比度的色板——截图依赖深海军蓝（#091723）和白色来获得最佳可读性。
  • 避免在主要按钮上使用尖锐的圆角——截图显示的是药丸形（500px 圆角）按钮。
  • 避免使用装饰性背景——截图使用纯净的实色或摄影图像。
  • 避免在正文中使用全大写——截图使用首字母大写以提升可读性。
  • 避免在标题中使用纤细、轻盈的字重——截图在所有主要文本上都使用了粗重的字重（800）。
  • 避免: 过于复杂的行话
  • 避免: 激进的销售策略
  • 避免: 被动语态

10

包内真实截图

Monzo — 桌面首屏（hero）
桌面首屏（hero）
Monzo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Monzo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Monzo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Monzo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Monzo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Monzo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Monzo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Monzo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Monzo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Monzo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Monzo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Monzo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Monzo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Monzo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Monzo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Monzo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Monzo — 移动首屏
移动首屏

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

11

System Prompt

Monzo 是一家现代金融科技银行网站，其设计旨在实现清晰度、信任感和易用性。它采用干净、高对比度的色板，以深海军蓝（#091723）和亮白色（#FFFFFF）为主导，并使用单一的鲜艳珊瑚色（#FF4F40）作为主要操作的强调色。字体采用定制的、高度易读的无衬线字体族，标题使用粗重字重以传达权威感，正文则使用常规字重。布局宽敞且响应式，具有充足的内边距和居中的内容列。关键性的避免事项包括：避免使用衬线字体，避免使用低对比度的颜色，避免在按钮上使用尖锐的圆角。整体感觉是高端、平易近人且值得信赖的。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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