精选 · 开放 · 免费

Monzo

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

fintechbank
Monzo 网站截图
↓ 下载设计系统包 (35 MB)在 OpenDesign 中打开

原站: https://monzo.com

📦 浏览包内文件 →

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

标题使用 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

组件

09

文案语气与禁用清单

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 — 移动首屏
移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

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

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko