厳選・オープン・無料

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

コンテンツセクションにゆったりとした垂直パディング（64px）を持つ、一貫した4pxベーススケール。

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）を用いています。タイポグラフィは、権威を伝えるための見出しには重いウェイトを使用し、本文には通常のウェイトを使用する、カスタムで非常に読みやすいヒューマニストサンセリフファミリーです。レイアウトは広々としてレスポンシブで、ゆったりとしたパディングと中央揃えのコンテンツカラムを備えています。重要な制約事項：セリフフォントを使用しない、低コントラストの色を使用しない、ボタンに鋭い角を使用しない。全体的な印象は、高級感があり、親しみやすく、信頼できるものです。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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