# Monzo

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

- taxonomy: warm-paper · coral-accent, deep-navy, fintech, friendly-finance, hero-photo, rounded, warm-tones · complexity=medium
- page types: landing, marketing
- best for: 핀테크 챌린저 뱅크 랜딩, 친근한 금융 서비스 마케팅, 따뜻한 톤의 B2C 서비스, 신뢰감 있는 스타트업 홈페이지
- avoid for: 하이테크 다크 대시보드, 게이밍·엔터테인먼트 플랫폼, 미니멀 개발자 도구, 럭셔리 프리미엄 브랜드
- provenance: website (Monzo | Your New Favourite Bank) — confidence: colors=computed-css, typography=computed-css, radius=computed-css, color_roles=vision-inferred, taxonomy=vision-inferred, dark=vision-inferred, light=computed-css

## Design rules

# Monzo — Design Specification
## Overview
Monzo's design is warm fintech. Coral red (#ff4f40) brand accent on white/navy/soft-green alternating sections. Friendly typography (Agrandir/DM Sans), large hero photos, pill buttons. Human-centered banking.
## Color Architecture
- Coral #ff4f40 = brand accent (sparingly)
- Deep navy #112231 = primary text and dark sections
- Soft green #e3ebe4 = warm section backgrounds
- White = main canvas
## Agent Prompt Guide
> Friendly fintech landing. White canvas, coral accent, navy text. Section alternation. Large hero photos. Pill buttons. Warm and trustworthy.
## Known Gaps
- Agrandir is proprietary (DM Sans fallback)
- Dark mode synthesized
- Cookie banner and hero carousel simplified


## Tokens (theme.css — use these values verbatim, do not re-derive)

```css
/* Monzo — theme.css (generated, do not edit) */
:root {
  --radius: 16px;
  --radius-selector: 8px;
  --radius-field: 8px;
  --font-sans: Agrandir, Helvetica Neue, Arial, sans-serif;
  --font-mono: monospace;
  --spacing: 8px;
  --shadow: 0px 1px 24px 0px color-mix(in oklab, oklch(0 0 0) 8%, transparent);
  --ks-display-weight: 700;
  --background: oklch(1.000 0.000 0);
  --foreground: oklch(0.199 0.031 246.0);
  --card: oklch(1.000 0.000 0);
  --card-foreground: oklch(0.199 0.031 246.0);
  --popover: oklch(1.000 0.000 0);
  --popover-foreground: oklch(0.199 0.031 246.0);
  --primary: oklch(0.245 0.037 246.6);
  --primary-foreground: oklch(1.000 0.000 0);
  --secondary: oklch(0.932 0.013 149.2);
  --secondary-foreground: oklch(0.245 0.037 246.6);
  --muted: oklch(0.932 0.013 149.2);
  --muted-foreground: oklch(0.405 0.025 228.2);
  --accent: oklch(0.673 0.215 28.9);
  --accent-foreground: oklch(1.000 0.000 0);
  --destructive: oklch(0.577 0.215 27.3);
  --border: oklch(0.880 0.010 200);
  --input: oklch(0.940 0.005 200);
  --ring: oklch(0.673 0.215 28.9);
}

.dark {
  --background: oklch(0.199 0.031 246.0);
  --foreground: oklch(1.000 0.000 0);
  --card: oklch(0.245 0.037 246.6);
  --card-foreground: oklch(1.000 0.000 0);
  --popover: oklch(0.250 0.030 246);
  --popover-foreground: oklch(1.000 0.000 0);
  --primary: oklch(1.000 0.000 0);
  --primary-foreground: oklch(0.199 0.031 246.0);
  --secondary: oklch(0.300 0.025 200);
  --secondary-foreground: oklch(0.932 0.013 149.2);
  --muted: oklch(0.300 0.020 246);
  --muted-foreground: oklch(0.600 0.015 246);
  --accent: oklch(0.673 0.215 28.9);
  --accent-foreground: oklch(1.000 0.000 0);
  --destructive: oklch(0.577 0.215 27.3);
  --border: oklch(0.350 0.020 246);
  --input: oklch(0.300 0.020 246);
  --ring: oklch(0.673 0.215 28.9);
}
```

## Golden example (exemplar.html — match this structure and token usage)

```html
<section style="background: var(--primary); color: var(--primary-foreground); padding: 6rem 2rem; text-align: center; position: relative; overflow: hidden;">
  <h1 style="font-size: 3.5rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 1rem;">Monzo for all<br>your money</h1>
  <p style="font-size: 1.125rem; opacity: 0.8; margin-bottom: 2rem; max-width: 500px; margin-left: auto; margin-right: auto;">Get clear on your spending. Unlock smarter ways to save. Invest with confidence.</p>
  <a href="#" style="display: inline-block; background: var(--background); color: var(--foreground); padding: 1rem 2rem; border-radius: 500px; font-weight: 600; font-size: 1rem; text-decoration: none;">Open a free bank account</a>
</section>
<section style="background: var(--secondary); padding: 4rem 2rem;">
  <div style="max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem;">
    <div style="background: var(--card); border-radius: 16px; padding: 2rem;">
      <div style="width: 48px; height: 48px; background: var(--accent); border-radius: 12px; margin-bottom: 1rem;"></div>
      <h3 style="color: var(--foreground); font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem;">Smart budgeting</h3>
      <p style="color: var(--muted-foreground); font-size: 1rem; line-height: 1.6;">Categorise your spending automatically and see where your money goes.</p>
    </div>
    <div style="background: var(--card); border-radius: 16px; padding: 2rem;">
      <div style="width: 48px; height: 48px; background: var(--accent); border-radius: 12px; margin-bottom: 1rem;"></div>
      <h3 style="color: var(--foreground); font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem;">Instant notifications</h3>
      <p style="color: var(--muted-foreground); font-size: 1rem; line-height: 1.6;">Get notified the moment you spend, so you always know what's happening.</p>
    </div>
  </div>
</section>
```

## Apply

- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/monzo.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only.
- other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references.
- single HTML/artifact: embed the theme.css block in a `<style>` tag and follow the exemplar's markup pattern.
- dark mode: toggle the `.dark` class (both variants are in the tokens above).
- before finishing: re-check every Don't in the Design rules section above against your output.