styles
← 갤러리

Monzo

코럴 레드(#ff4f40)와 딥 네이비(#112231)가 만드는 따뜻하고 친근한 디지털 뱅킹 — 금융인데 사람 냄새가 나는 브랜드 디자인이다.

warm-paper coral-accentdeep-navyfintechfriendly-financehero-photoroundedwarm-tones
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

영국 디지털 뱅크 몬조에서 추출한 warm-paper 스타일. 화이트 캔버스에 코럴 레드(#ff4f40)가 브랜드 액센트로 빛나고, 딥 네이비(#112231)가 신뢰감 있는 텍스트와 다크 섹션을 담당한다. 소프트 그린(#e3ebe4) 배경 블록이 자연스러운 온기를 더한다. 라운드한 반경과 큰 히어로 이미지가 금융 서비스의 차가움을 덜어낸다.

타입 스케일

hero Ag 스타일 견본 Style Specimen
h1 Ag 스타일 견본 Style Specimen
h2 Ag 스타일 견본 Style Specimen
h3 Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen
caption Ag 스타일 견본 Style Specimen

골든 예제 (exemplar)

Monzo for all
your money

Get clear on your spending. Unlock smarter ways to save. Invest with confidence.

Open a free bank account

Smart budgeting

Categorise your spending automatically and see where your money goes.

Instant notifications

Get notified the moment you spend, so you always know what's happening.

Do

  • Use coral red (#ff4f40) as brand accent — but sparingly
  • Deep navy (#112231) for text and dark sections
  • Alternate white, navy, and soft green section backgrounds
  • Large hero photos with overlay text
  • Friendly, warm typography at generous sizes

Don't

  • Don't overuse the coral — it's an accent, not a background
  • Don't make it feel corporate-cold — Monzo is friendly
  • Don't skip the trust badges and certifications
  • Don't use small body text — keep it at 18px+ for readability

컴포넌트 노트

button
Rounded (pill-like), dark navy primary or outlined ghost (2px coral border). Large touch targets.
card
Large radius (16px), photo-heavy with overlay text. Trust badges inline.
input
Rounded (8px), clean borders.
nav
Top bar with coral brand mark, segmented Personal/Business toggle, Sign up CTA.