큐레이션 · 오픈 · 무료

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

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 요소를 위한 부드러운 페이드인. · hover 시 은은한 배경색 트랜지션. · 상호작용 상태를 위한 트랜스폼 애니메이션.

은은한 배경색 변화와 커서 변경. · 상태 변화를 통한 즉각적인 시각적 피드백.

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 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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