精選 · 開放 · 免費

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) 作為主要操作的強調色。字體為自定義、高度可讀的 humanist-sans 字族，標題使用粗字重以傳達權威感，內文則使用常規字重。版面寬敞且具響應式，留有充裕的邊距並採用中央內容欄。關鍵禁忌：勿使用襯線字體，勿使用低對比度色彩，勿在按鈕上使用銳利圓角。整體風格給人高級、親和且值得信賴的感受。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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