# The online bank

> # The Online Bank — Style Reference

Ngân hàng trực tuyến — Style Reference

## Prompt Content

```
# The online bank — Style Reference
> Kho kỹ thuật số trong màu teal đại dương sâu thẳm — một ngân hàng tạo nên sự điềm tĩnh qua khoảng trắng tĩnh lặng và một màu sắc duy nhất đầy tự tin.

**Theme:** light

N26 mang đến một không gian ngân hàng số điềm tĩnh, đầy tự tin, neo giữ bởi một màu teal đậm duy nhất chiếm lĩnh viewport, trong khi phần còn lại của giao diện lùi vào khoảng trắng off-white ấm áp. Hệ thống phân cấp thị giác được xây dựng trên sự tương phản: mực đen đặc (#1b1b1b) trên nền gần trắng (#faf8f5), với teal xuất hiện như một dấu chấm câu có chủ đích cho các hành động chính và khoảnh khắc thương hiệu, chứ không phải trang trí. Typography mang một sự căng thẳng đặc trưng giữa N26 sans-serif nhỏ gọn, hơi tracking dùng cho navigation và nội dung body, và N26-Extended display face rộng hơn, tạo không gian thở cho headline ở kích thước 58–80px. Các component mang cảm giác kiến trúc và tối giản — border mảnh, padding rộng rãi, border-radius nhỏ trên controls, border-radius lớn trên hình ảnh — phản ánh tư duy thiết kế ngân hàng châu Âu, nơi sự tin tưởng được truyền tải qua sự kiềm chế thay vì trang trí cầu kỳ.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Deep Teal | `#088177` | `--color-deep-teal` | Điểm nhấn teal hỗ trợ cho các chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên thành màu CTA chính |
| Ink | `#1b1b1b` | `--color-ink` | Body text chính, heading, icon strokes, link text, và nav labels — một màu gần đen pha chút than, tránh sự khô cứng của màu đen thuần trên nền trắng ấm |
| Canvas Warmth | `#faf8f5` | `--color-canvas-warmth` | Nền trang — một màu off-white ấm áp, giống giấy, mang lại cho toàn bộ giao diện chất lượng biên tập, con người, khác biệt với màu trắng SaaS lâm sàng |
| Surface White | `#ffffff` | `--color-surface-white` | Bề mặt hỗ trợ sáng cho nền tinh tế và phân cách section. Không nâng lên thành màu CTA chính |
| Hairline | `#e9e9e9` | `--color-hairline` | Border mảnh, divider giữa các khối nội dung, và đường viền input field — đủ nhạt để lùi lại nhưng đủ rõ để cấu trúc thông tin |
| Border Soft | `#d9d9d9` | `--color-border-soft` | Màu trung tính hỗ trợ cho UI thứ cấp, divider, và label mờ. Không nâng lên thành màu CTA chính |
| Pure Black | `#000000` | `--color-pure-black` | Dành riêng cho icon fills và các element hiếm hoi cần độ tương phản tối đa — được sử dụng có chừng mực cùng với Ink mềm hơn |
| Teal Mist | `#d8edeb` | `--color-teal-mist` | Bề mặt pha teal nhạt cho accent backgrounds, highlight panels, và các lớp nền mờ gợi nhắc màu thương hiệu mà không lấn át |
| Blush Neutral | `#f5e1e3` | `--color-blush-neutral` | Bề mặt pha hồng ấm để phân biệt danh mục trong layout biên tập — được dùng như một giải pháp thay thế tinh tế cho các section pha teal |

## Tokens — Typography

### N26 — Sans-serif chủ lực cho tất cả navigation, body copy, button, label, và UI micro-text. Weight 500 để nhấn mạnh, 700 cho primary action labels và key headings. Tracking dương nhẹ (0.008–0.019em) mang lại chất lượng có kiểm soát, dễ đọc cho kích thước nhỏ — cảm giác tùy chỉnh đến từ sự cởi mở có kiềm chế này chứ không phải từ display flourishes. · `--font-n26`
- **Thay thế:** Inter, DM Sans, hoặc system-ui
- **Weights:** 400, 500, 700
- **Kích thước:** 11px, 14px, 16px, 18px, 20px, 24px
- **Line height:** 1.33, 1.38, 1.43, 1.50, 1.60
- **Letter spacing:** 0.0080em ở 24px, 0.0100em ở 18px, 0.0160em ở 14px, 0.0190em ở 11px — tracking mở rộng khi kích thước giảm để cân bằng quang học
- **Vai trò:** Sans-serif chủ lực cho tất cả navigation, body copy, button, label, và UI micro-text. Weight 500 để nhấn mạnh, 700 cho primary action labels và key headings. Tracking dương nhẹ (0.008–0.019em) mang lại chất lượng có kiểm soát, dễ đọc cho kích thước nhỏ — cảm giác tùy chỉnh đến từ sự cởi mở có kiềm chế này chứ không phải từ display flourishes.

### N26-Extended — Display face dành riêng cho hero headlines, section titles, và large statement copy. Tỷ lệ rộng hơn ở 58–80px tạo khoảng thở, tương phản với N26 body face nhỏ gọn — sự đối lập này (UI type chặt chẽ + display type rộng rãi) là chữ ký typographic. Letter-spacing bình thường để các letterforms rộng tự tỏa sáng. · `--font-n26-extended`
- **Thay thế:** Inter Display, Söhne Breit, hoặc một giải pháp tỷ lệ rộng khác
- **Weights:** 400, 500
- **Kích thước:** 18px, 32px, 44px, 58px, 80px
- **Line height:** 1.10, 1.20, 1.25, 1.50
- **Vai trò:** Display face dành riêng cho hero headlines, section titles, và large statement copy. Tỷ lệ rộng hơn ở 58–80px tạo khoảng thở, tương phản với N26 body face nhỏ gọn — sự đối lập này (UI type chặt chẽ + display type rộng rãi) là chữ ký typographic. Letter-spacing bình thường để các letterforms rộng tự tỏa sáng.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|------|
| caption | 11px | 1.38 | 0.21px | `--text-caption` |
| body-sm | 14px | 1.5 | 0.22px | `--text-body-sm` |
| body | 16px | 1.5 | 0.16px | `--text-body` |
| subheading | 20px | 1.43 | 0.16px | `--text-subheading` |
| heading-sm | 24px | 1.38 | 0.19px | `--text-heading-sm` |
| heading | 32px | 1.25 | — | `--text-heading` |
| heading-lg | 44px | 1.2 | — | `--text-heading-lg` |
| display | 80px | 1.1 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Đơn vị cơ bản:** 4px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 56 | 56px | `--spacing-56` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 192 | 192px | `--spacing-192` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| images | 24px |
| inputs | 4px |
| buttons | 8px |
| small_elements | 4px |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 64-80px
- **Card padding:** 32-48px
- **Element gap:** 8-16px

## Components

### Primary Filled Button
**Vai trò:** Hành động chuyển đổi đầu trang, nav CTAs

Nền #088177 Deep Teal, chữ trắng, N26 weight 500 ở 14-16px, border-radius 8px, padding khoảng 8px 20px. Nằm ở top nav như hành động nổi bật nhất trên trang.

### Inverse Button
**Vai trò:** CTA đặt trên nền hero teal

Nền trắng, chữ #1b1b1b Ink, border-radius 8px, padding 12px 24px. Được dùng trên hero teal full-bleed để tạo tương phản đảo ngược trong khi vẫn giữ hình dạng button nhỏ gọn.

### Text Link Nav Item
**Vai trò:** Navigation items chính

N26 weight 500 ở 16px, chữ #1b1b1b, không gạch chân mặc định, padding ngang 8px. Khoảng cách rộng rãi giữa các item tạo nhịp điệu navigation yên tĩnh, không vội vã.

### Hero Band
**Vai trò:** Section mở đầu full-bleed

Nền #088177 Deep Teal trải rộng toàn bộ chiều rộng viewport, nội dung căn giữa với padding dọc 80px. Headline display N26-Extended ở 58-80px màu trắng, body subtext ở 18px màu trắng, theo sau là inverse button. Bản thân dải màu là hero — không có hình ảnh, không gradient.

### Risk Disclosure Strip
**Vai trò:** Panel thông tin quy định/tuân thủ

Nền trắng, border hairline #e9e9e9, body text N26 nhỏ ở 14px màu #1b1b1b. Layout hai cột với chỉ số rủi ro 1/6 và 6/6. Padding 16-24px, không bo góc — mang tính tiện ích và thông tin.

### Brand Wordmark
**Vai trò:** Logo và brand mark trong nav

N26 dạng condensed, weight 500, khoảng 20-24px, màu #1b1b1b. Dấu gạch ngang/dấu ngã phía trên chữ N là brand mark đặc trưng. Liên kết đến homepage từ bất kỳ trang nào.

### Card Surface
**Vai trò:** Card nội dung trên nền ấm

Nền #ffffff trên canvas #faf8f5, không shadow, border-radius 24px cho card thiên về hình ảnh hoặc 8px cho card thông tin nhỏ gọn. Padding trong 32-48px. Độ nổi đến từ tương phản màu sắc, không phải shadow.

### App Download QR
**Vai trò:** Element thu hút tải app dạng nổi

Card trắng nhỏ với border-radius 8px, fixed-position góc dưới phải, hình ảnh QR code với chú thích 'Get the app' ở 14px N26 weight 500. Luôn dễ tiếp cận mà không làm gián đoạn luồng nội dung chính.

### Locale Selector
**Vai trò:** Bộ chọn ngôn ngữ/quốc gia trong nav

Element inline với chữ #1b1b1b ở 14px, chỉ báo cờ nhỏ, styling tối giản — xuất hiện như một text link đơn giản thay vì dropdown chrome.

### Hairline Divider
**Vai trò:** Phân cách section và cấu trúc nội dung

Đường kẻ ngang 1px solid #e9e9e9. Được dùng giữa các hàng risk disclosure và để phân cách khối nội dung mà không cần thêm spacing.

## Do's and Don'ts

### Nên
- Dùng #088177 Deep Teal cho filled primary action buttons và brand sections full-bleed — đây là màu sắc duy nhất được phép chiếm ưu thế trên một màn hình.
- Đặt tất cả nền trang là #faf8f5 Canvas Warmth; dành #ffffff cho bề mặt card cần nổi lên khỏi canvas.
- Áp dụng N26-Extended ở 44-80px với line-height 1.10-1.25 cho display headlines; tỷ lệ rộng cần kích thước lớn để đọc chính xác.
- Dùng border-radius 8px cho button và interactive controls; dành 24px cho image cards và media lớn.
- Duy trì section gap 64-80px để giữ nhịp điệu rộng rãi, không vội vã như thấy trong chuyển tiếp hero-to-content.
- Dùng #e9e9e9 cho tất cả hairline borders và divider — không bao giờ nặng hơn 1px trên nền ấm.
- Áp dụng tracking dương nhẹ (0.008-0.019em) cho tất cả N26 text ở 24px trở xuống để cân bằng quang học ở kích thước nhỏ.

### Không nên
- Không bao giờ thêm accent colors phụ — toàn bộ hệ thống chỉ chạy trên Ink, trắng, và một màu teal. Thêm một hue thứ hai sẽ phá vỡ kỷ luật thương hiệu.
- Không dùng #000000 cho body text — luôn dùng #1b1b1b Ink để có độ tương phản mềm hơn trên nền ấm.
- Không áp dụng N26-Extended cho body copy hoặc UI micro-text — nó chỉ là display face và mất khả năng đọc dưới 24px.
- Không bao giờ dùng drop shadows để tạo độ nổi — N26 đạt được sự phân lớp chỉ thông qua tương phản màu nền (#faf8f5 → #ffffff → bề mặt pha màu).
- Không đặt body text dưới 14px — type scale bắt đầu từ 11px chỉ dành cho legal/caption text.
- Không bao giờ dùng border-radius lớn hơn 8px trên button hoặc nhỏ hơn 24px trên hero imagery — radius scale có chủ đích và hẹp.
- Không đặt nút màu trên hero teal — luôn dùng inverse button trắng trên nền màu thương hiệu để duy trì mối quan hệ đảo ngược.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|---------|---------|
| 1 | Canvas | `#faf8f5` | Nền trang cơ bản — off-white ấm áp mang lại cho toàn bộ giao diện chất lượng biên tập, giống giấy |
| 2 | Surface | `#ffffff` | Card, panel nâng cao, và khối nội dung cần độ nổi thị giác từ canvas |
| 3 | Teal Mist | `#d8edeb` | Bề mặt pha teal nhạt cho accent panels và section danh mục |
| 4 | Blush | `#f5e1e3` | Bề mặt pha hồng ấm để phân biệt danh mục biên tập |
| 5 | Brand Band | `#088177` | Brand hero sections full-bleed và primary action fills — bề mặt có độ nổi cao nhất |

## Elevation

N26 cố tình tránh drop shadows. Độ nổi đạt được hoàn toàn thông qua phân lớp màu nền: canvas ấm (#faf8f5) làm nền, card trắng nổi lên nhờ tương phản tông màu, và brand band teal đậm là lớp thị giác cao nhất. Cách tiếp cận không shadow này củng cố chất lượng biên tập, giống giấy và tránh pattern card-with-shadow SaaS chung chung.

## Imagery

Homepage thiên về text với tối thiểu hình ảnh. Hero band teal chỉ dựa vào typography — không có background image, illustration, hoặc photographic element. Photography, khi xuất hiện trên các trang sâu hơn, được xử lý như những crop chặt chẽ, có kiểm soát với border-radius 24px, không overlay hoặc duotone treatments. Ngôn ngữ thị giác về cơ bản là typographic và color-driven, với brand teal đóng vai trò là 'hình ảnh' chính trên hero.

## Layout

Mô hình trang được căn giữa và giới hạn max-width ở khoảng 1200px, với hero band phá vỡ thành full-bleed cho section teal. Pattern hero là một headline căn giữa trên một trường màu đặc — không split layout, không media. Bên dưới hero, nội dung chảy trong các stack căn giữa với khoảng thở dọc rộng rãi 64-80px giữa các section. Navigation là một top bar tối giản với brand mark bên trái, primary nav links ở giữa, và action buttons (login + primary CTA) bên phải. Mật độ tổng thể rộng rãi và mang tính biên tập hơn là dày đặc thông tin.

## Agent Prompt Guide

**Tham khảo màu nhanh**
- Primary text: #1b1b1b
- Background (canvas): #faf8f5
- Surface (cards): #ffffff
- Border/hairline: #e9e9e9
- Brand accent: #088177
- primary action: không có màu CTA riêng biệt

**Ví dụ Component Prompts**

Không quan sát thấy màu primary action riêng biệt; sử dụng các neutral button treatments đã trích xuất thay vì tự tạo màu CTA filled.

2. **Nav Bar**: Nền #faf8f5, chiều cao 64px, padding ngang 48px. Brand mark bên trái bằng N26 ở 20px weight 500 #1b1b1b. Nav items ở giữa bằng N26 weight 500 ở 16px #1b1b1b, gap 32px giữa các item. Bên phải: 'Log in' text link bằng N26 weight 500 ở 14px #1b1b1b, sau đó 'Open free bank account' filled button với nền #088177, chữ trắng, N26 weight 500 ở 14px, border-radius 8px, padding 8px 20px.

3. **Content Card**: Nền #ffffff trên canvas #faf8f5, border-radius 24px, padding trong 32-48px. Không shadow. Heading bằng N26 weight 700 ở 24px #1b1b1b, body text bằng N26 weight 400 ở 16px #1b1b1b, line-height 1.50.

4. **Info Strip**: Nền #ffffff, border trên và dưới 1px solid #e9e9e9, padding dọc 16-24px, layout hai cột với column gap 32px. Cột trái: N26 weight 500 ở 24px #1b1b1b. Cột phải: N26 weight 400 ở 14px #1b1b1b.

5. **App Download Widget**: Nền #ffffff, border-radius 8px, padding 16px, fixed-position góc dưới phải. Hình ảnh QR code 80x80px, chú thích 'Get the app' bằng N26 weight 500 ở 14px #1b1b1b bên dưới.

## Similar Brands

- **Revolut** — Cùng chiến lược một accent màu teal hoặc tím trên nền trung tính sáng, với hero band chiếm lĩnh viewport thông qua màu sắc thay vì hình ảnh
- **Monzo** — Cách tiếp cận chung: dùng một màu thương hiệu sống động làm hero full-bleed, với giao diện sáng đơn sắc còn lại và trang trí tối thiểu
- **Klarna** — Tương tự hero thiên về typographic với một dải màu thương hiệu đặc, nền sáng sạch sẽ, và button styling nhỏ gọn
- **Wise (TransferWise)** — Cùng chủ nghĩa tối giản sản phẩm tài chính: canvas off-white ấm áp, một accent thương hiệu duy nhất, spacing rộng rãi, và hero driven bởi typography biên tập

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-deep-teal: #088177;
  --color-ink: #1b1b1b;
  --color-canvas-warmth: #faf8f5;
  --color-surface-white: #ffffff;
  --color-hairline: #e9e9e9;
  --color-border-soft: #d9d9d9;
  --color-pure-black: #000000;
  --color-teal-mist: #d8edeb;
  --color-blush-neutral: #f5e1e3;

  /* Typography — Font Families */
  --font-n26: 'N26', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-n26-extended: 'N26-Extended', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 11px;
  --leading-caption: 1.38;
  --tracking-caption: 0.21px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: 0.22px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: 0.16px;
  --text-subheading: 20px;
  --leading-subheading: 1.43;
  --tracking-subheading: 0.16px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.38;
  --tracking-heading-sm: 0.19px;
  --text-heading: 32px;
  --leading-heading: 1.25;
  --text-heading-lg: 44px;
  --leading-heading-lg: 1.2;
  --text-display: 80px;
  --leading-display: 1.1;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-192: 192px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 64-80px;
  --card-padding: 32-48px;
  --element-gap: 8-16px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-3xl: 24px;

  /* Named Radii */
  --radius-images: 24px;
  --radius-inputs: 4px;
  --radius-buttons: 8px;
  --radius-smallelements: 4px;

  /* Surfaces */
  --surface-canvas: #faf8f5;
  --surface-surface: #ffffff;
  --surface-teal-mist: #d8edeb;
  --surface-blush: #f5e1e3;
  --surface-brand-band: #088177;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-deep-teal: #088177;
  --color-ink: #1b1b1b;
  --color-canvas-warmth: #faf8f5;
  --color-surface-white: #ffffff;
  --color-hairline: #e9e9e9;
  --color-border-soft: #d9d9d9;
  --color-pure-black: #000000;
  --color-teal-mist: #d8edeb;
  --color-blush-neutral: #f5e1e3;

  /* Typography */
  --font-n26: 'N26', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-n26-extended: 'N26-Extended', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 11px;
  --leading-caption: 1.38;
  --tracking-caption: 0.21px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: 0.22px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: 0.16px;
  --text-subheading: 20px;
  --leading-subheading: 1.43;
  --tracking-subheading: 0.16px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.38;
  --tracking-heading-sm: 0.19px;
  --text-heading: 32px;
  --leading-heading: 1.25;
  --text-heading-lg: 44px;
  --leading-heading-lg: 1.2;
  --text-display: 80px;
  --leading-display: 1.1;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-192: 192px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-3xl: 24px;
}
```