# Somos incansáveis pra você não precisar ser | Nubank

> Somos incansáveis pra você não precisar ser | Nubank — Style Reference

## Prompt Content

```
# Somos incansáveis pra você não precisar ser | Nubank — Style Reference
> Tín hiệu violet trên nền marble trắng — một điểm nhấn sống động trên nền trắng kem sáng, mọi bề mặt đều được bo cong thành pill mềm mại.

**Theme:** mixed

Nubank vận hành trên hệ thống một điểm nhấn duy nhất: canvas sứ trắng, typography mực đen, và một sắc violet duy nhất đóng vai trò là điểm nhấn màu sắc duy nhất trong toàn bộ giao diện. Ngữ pháp thị giác được xây dựng trên các pill shapes — button, input và link đều được bo cong thành capsule 999px, mang đến cho hệ thống tính cách mềm mại, tròn trịa, dễ tiếp cận, làm dịu đi sự tương phản gay gắt của đen-trên-trắng. Typography mang sức nặng thẩm quyền: một geometric sans tùy chỉnh (Graphik) ở weight 400-500 với negative tracking mạnh, tạo nên những headline chặt chẽ, có cấu trúc, thì thầm thay vì la hét. Trang web thở — spacing rộng rãi dựa trên 8px, display size lớn (lên đến 56px), và các section ảnh tối tương phản với bề mặt trắng sáng khác. Mọi bề mặt tương tác đều là pill, mọi điểm nhấn đều là violet, và mọi màn hình đều giống như một trang từ một tạp chí được typeset tỉ mỉ.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Nubank Violet | `#820ad1` | `--color-nubank-violet` | Điểm nhấn violet hỗ trợ cho 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 |
| Deep Iris | `#290b4d` | `--color-deep-iris` | Điểm nhấn violet hỗ trợ cho 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 |
| Dusty Violet | `#714f8f` | `--color-dusty-violet` | Lớp phủ violet nhẹ, trạng thái violet bị vô hiệu hóa, nền brand mờ |
| Ink | `#000000` | `--color-ink` | Màu trung tính tối hỗ trợ cho text, icon và độ tương phản mạnh. Không nâng lên thành màu CTA chính |
| Snow | `#ffffff` | `--color-snow` | Bề mặt card, input fill, text trên nền tối, section trang trên nền mist |
| Mist | `#f4f4f4` | `--color-mist` | Canvas trang, nền section nhẹ, input field fill — tông màu sứ định nghĩa toàn bộ theme sáng |
| Stone | `#a2a2a2` | `--color-stone` | Secondary text, helper label, placeholder text, icon stroke ở trạng thái nghỉ |
| Concrete | `#b3b3b3` | `--color-concrete` | Hairline border, divider, UI separator tinh tế |
| Smoke | `#777777` | `--color-smoke` | Tertiary text, dòng phụ footer, metadata |
| Graphite | `#666666` | `--color-graphite` | Fill trung tính vừa, nền mờ cho section lồng nhau |

## Tokens — Typography

### Graphik — Toàn bộ text giao diện — heading, body, button, input, navigation. Geometric sans tùy chỉnh với weight giới hạn ở 400-500 là có chủ đích: không bao giờ xuất hiện bold, vì vậy độ tương phản weight được thay thế bằng độ tương phản kích thước, tạo ra một hệ thống thì thầm qua scale thay vì la hét qua độ đậm. · `--font-graphik`
- **Thay thế:** Inter, Geist, Manrope
- **Weights:** 400, 500
- **Kích thước:** 12, 14, 16, 18, 20, 22, 24, 36, 48, 56
- **Line height:** 1.0–2.8 (tight cho display, generous cho body)
- **Letter spacing:** -0.0300em ở 56px display → -0.0100em ở body 16px (tight hơn khi kích thước tăng)
- **OpenType features:** `"kern" — kerning luôn bật ở mọi weight và kích thước`
- **Vai trò:** Toàn bộ text giao diện — heading, body, button, input, navigation. Geometric sans tùy chỉnh với weight giới hạn ở 400-500 là có chủ đích: không bao giờ xuất hiện bold, vì vậy độ tương phản weight được thay thế bằng độ tương phản kích thước, tạo ra một hệ thống thì thầm qua scale thay vì la hét qua độ đậm.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| micro | 12px | 1.44 | -0.12px | `--text-micro` |
| caption | 14px | 1.44 | -0.14px | `--text-caption` |
| body-sm | 16px | 1.5 | -0.16px | `--text-body-sm` |
| body | 18px | 1.5 | -0.18px | `--text-body` |
| body-lg | 20px | 1.44 | -0.2px | `--text-body-lg` |
| subheading | 24px | 1.3 | -0.24px | `--text-subheading` |
| heading-sm | 36px | 1.2 | -0.648px | `--text-heading-sm` |
| heading | 48px | 1.1 | -0.96px | `--text-heading` |
| display | 56px | 1.1 | -1.68px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 8px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|------|
| 8 | 8px | `--spacing-8` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 112 | 112px | `--spacing-112` |
| 120 | 120px | `--spacing-120` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 999px |
| cards | 24px |
| images | 32px |
| inputs | 24px |
| buttons | 999px |
| smallButtons | 8px |

### Layout

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

## Components

### Primary Violet Pill Button
**Vai trò:** Main call-to-action trên toàn site

Pill violet (#820ad1) đặc với text trắng ở 16px weight 500. Radius 999px, horizontal padding 24px, vertical padding 12-16px. Có icon mũi tên cho hành động có hướng. Dạng capsule bo tròn là signature — Nubank không có button hình chữ nhật.

### Ghost Dark Pill Button
**Vai trò:** Secondary action trên nền tối/ảnh

Fill tối bán trong suốt (#000000 hoặc rgba 0,0,0,0.5) với text trắng, radius 999px. Dùng làm 'Saiba mais' trên ảnh product card. Luôn là pill-shaped, không bao giờ hình chữ nhật.

### Small Radius Button
**Vai trò:** Compact inline action

Biến thể radius 8px của hệ thống pill cho không gian nhỏ gọn. Fill violet với text trắng. Dùng khi pill đầy đủ quá rộng.

### Product Hero Card
**Vai trò:** Full-bleed hero với form chồng lên

Nền ảnh tối trải dài toàn bộ viewport width, với text display trắng lớn (48-56px) bên trái và một card trắng nổi (#ffffff) bên phải chứa heading, input field và CTA violet. Card có radius 24px và padding 32px. Sự kết hợp giữa ảnh tối + form trắng nổi này là signature hero pattern của Nubank.

### Product Carousel Card
**Vai trò:** Showcase card trong carousel 3 card

Card ảnh bo tròn (32px radius) với photo fill, tên sản phẩm trắng căn giữa chồng lên (24px weight 500), và ghost dark pill button ('Saiba mais') ở dưới cùng. Các card chồng lên nhau nhẹ trong carousel. Chiều cao khoảng 400px, tỷ lệ khung hình xấp xỉ 3:4.

### Pill Input Field
**Vai trò:** Text input cho form (CPF, email, v.v.)

Input bo tròn với radius 24px, fill xám nhạt (#f4f4f4), placeholder text màu Stone (#a2a2a2), body text 16px. Không có border nhìn thấy được mặc định. Cảm giác mềm mại và dễ tiếp cận thay vì lạnh lùng.

### Navigation Bar
**Vai trò:** Navigation cấp cao nhất của site

Nền mist nhạt (#f4f4f4), logo 'nu' của Nubank màu violet ở bên trái cùng, nav items ngang màu đen (16px weight 500) với dropdown caret, icon tìm kiếm, ghost outlined button 'Login Empresas', và filled violet pill button 'Quero ser Nubank' ở bên phải cùng. Không có border nặng — nằm gọn gàng trên canvas.

### Dark Footer
**Vai trò:** Footer toàn site với link và thông tin liên hệ

Nền đen (#000000) full-width, link text trắng trong grid 4 cột, social icons trên một hàng, legal copy ở dưới cùng với text nhỏ màu Stone. Section heading màu trắng weight 500, số điện thoại màu trắng. Bề mặt tối là đối trọng thị giác với trang sáng.

### Inline Text Link
**Vai trò:** Hyperlink trong body text

Text violet (#820ad1), không gạch chân ở trạng thái nghỉ, gạch chân khi hover. Weight khớp với text xung quanh. Nằm tự nhiên trong body copy mà không thay đổi trọng lượng thị giác.

## Do's and Don'ts

### Do
- Sử dụng pill radius 999px cho mọi button, input và tag — button hình chữ nhật phá vỡ brand
- Áp dụng Nubank Violet (#820ad1) làm điểm nhấn màu sắc duy nhất trong bất kỳ view nào; không bao giờ đưa vào hue thứ hai
- Đặt letter-spacing thành -0.0100em hoặc chặt hơn trên tất cả text; positive tracking sẽ phá hủy cảm giác có cấu trúc
- Sử dụng Graphik weight 400 cho body và 500 cho emphasis; không bao giờ dùng bold (700) — hệ thống không có nó
- Thả card trắng nổi trên canvas mist (#f4f4f4) với padding 24-32px để tạo chiều sâu mà không cần shadow
- Giữ section ảnh tối full-bleed; để chúng phá vỡ container 1200px để tạo dấu câu thị giác
- Đặt kích thước display headline ở 48-56px với line-height 1.10 để phù hợp với scale editorial kiểu tạp chí

### Don't
- Không thêm drop shadow, elevation hoặc hiệu ứng glow — Nubank chỉ sử dụng độ tương phản bề mặt
- Không dùng góc nhọn trên interactive elements; pill là hình dạng dễ nhận biết nhất của brand
- Không đưa vào màu nhấn thứ hai hoặc background tint ngoài violet, trắng, mist và đen
- Không dùng bold hoặc extra-bold weights; hệ thống type dừng ở 500 và dựa vào kích thước cho hierarchy
- Không đặt fill violet trên vùng nền lớn — violet chỉ dành cho actions và small accents
- Không dùng positive letter-spacing; tất cả text nên cảm thấy được siết chặt về mặt quang học
- Không trộn lẫn icon styles; sử dụng một họ icon dựa trên stroke duy nhất ở weight 1.5-2px

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|---------|---------|
| 0 | Mist Canvas | `#f4f4f4` | Nền trang cơ bản — bề mặt sứ mà mọi thứ nổi trên đó |
| 1 | Snow Card | `#ffffff` | Product card, form card, input field — nâng lên khỏi mist canvas |
| 2 | Ink Surface | `#000000` | Lớp phủ hero ảnh tối, footer tối toàn phần — section tương phản mạnh |

## Elevation

Nubank tránh hoàn toàn drop shadow. Chiều sâu được truyền đạt qua độ tương phản bề mặt — card trắng nổi trên mist canvas, ảnh tối neo các section. Hình học pill và spacing rộng rãi làm công việc mà shadow sẽ làm trong một hệ thống thông thường.

## Imagery

Nhiếp ảnh chiếm ưu thế: ảnh full-bleed aerial và lifestyle lớn neo các hero section và product card. Ảnh hero sân vận động (aerial drone view của một đấu trường có brand) có scale editorial. Product carousel card sử dụng ảnh lifestyle thân mật — con người trong những khoảnh khắc tự nhiên (cười, bơi, làm việc). Tất cả ảnh đều được xử lý với full-bleed framing bên trong mask 32px-radius. Không có illustration, không có đồ họa trừu tượng, không có 3D render. Nhiếp ảnh tươi sáng, tông màu ấm và mang tính con người — đối lập với hình ảnh fintech lâm sàng.

## Layout

Container căn giữa max-width 1200px, nhưng hero section và footer là full-bleed. Hero pattern nhất quán: ảnh tối full-viewport bên trái, card form trắng nổi bên phải. Bên dưới fold, nhịp điệu xen kẽ giữa section trắng và carousel của product image card. Section spacing rộng rãi (gap 64px) tạo không gian thở. Navigation là top bar tối giản — không sidebar, không mega-menu, chỉ là horizontal links với caret indicators. Luồng tổng thể: hero tối full-bleed → product showcase trắng → thêm section nội dung trắng → footer tối full-bleed.

## Agent Prompt Guide

**Quick Color Reference**
- background: #f4f4f4 (Mist canvas)
- surface: #ffffff (Snow cards)
- text: #000000 (Ink primary)
- muted text: #a2a2a2 (Stone)
- border: #b3b3b3 (Concrete)
- accent: #820ad1 (Nubank Violet)
- primary action: không có màu CTA riêng biệt

**3-5 Example 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ạo ra màu CTA đặc.

2. *Tạo product carousel card*: Image container radius 32px với ảnh lifestyle full-bleed. Tên sản phẩm trắng căn giữa ở 24px Graphik weight 500. Ghost dark pill button ('Saiba mais') ở dưới cùng — fill bán trong suốt #000000, text trắng, radius 999px, vertical padding 12px.

3. *Tạo top navigation*: Thanh nền Mist (#f4f4f4), logo 'nu' của Nubank màu #820ad1 ở bên trái cùng, nav items ngang màu #000000 ở 16px Graphik weight 500 với dropdown caret, ghost outlined button 'Login' (border 1px #000000, radius 999px, padding 16px 24px), và filled violet pill button 'Quero ser Nubank' (#820ad1, text trắng, radius 999px) ở bên phải cùng.

4. *Tạo dark footer*: Nền #000000 full-width. Grid bốn cột link text trắng ở 16px Graphik weight 400. Column heading màu trắng weight 500. Hàng social icon (LinkedIn, YouTube, Facebook, Instagram, X) màu trắng. Legal copy ở dưới cùng màu #a2a2a2 ở 12px.

5. *Tạo inline violet link trong body text*: Màu #820ad1, 18px Graphik weight 400, không gạch chân ở trạng thái nghỉ, gạch chân khi hover. Nên nằm trong một đoạn body copy #000000 trên canvas #f4f4f4.

## Type System Philosophy

Hệ thống type của Nubank được định nghĩa bởi sự kiềm chế: weights dừng ở 500, letter-spacing luôn âm, và hierarchy đến từ các bước nhảy kích thước (18→24→36→48→56). Tỷ lệ 2.25x giữa body và display tạo ra độ tương phản cấp tạp chí. Tính năng 'kern' luôn bật, tối ưu hóa các cặp letter-spacing chặt chẽ. Điều này tạo ra text cảm thấy có cấu trúc và có chủ đích — giống như một ấn phẩm tài chính, không phải một tech startup.

## Similar Brands

- **Revolut** — Cùng ngôn ngữ pill-button và cách tiếp cận single-accent-on-light-canvas, mặc dù Revolut sử dụng đen làm accent chính thay vì violet
- **Monzo** — Hình học component bo tròn mềm mại tương tự và bề mặt sáng sạch, mặc dù Monzo thiên về màu sắc hơn với coral và vàng
- **Wise (TransferWise)** — Cùng chiến lược white-canvas-plus-one-bold-accent, với spacing rộng rãi và display typography tự tin
- **Klarna** — Chia sẻ hệ thống pill-button và nền sáng với một accent color duy nhất (pink cho Klarna so với violet cho Nubank)
- **Cash App** — Cùng cam kết với một brand color duy nhất làm điểm nhấn màu sắc duy nhất trong giao diện, với bề mặt trắng sạch

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-nubank-violet: #820ad1;
  --color-deep-iris: #290b4d;
  --color-dusty-violet: #714f8f;
  --color-ink: #000000;
  --color-snow: #ffffff;
  --color-mist: #f4f4f4;
  --color-stone: #a2a2a2;
  --color-concrete: #b3b3b3;
  --color-smoke: #777777;
  --color-graphite: #666666;

  /* Typography — Font Families */
  --font-graphik: 'Graphik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-micro: 12px;
  --leading-micro: 1.44;
  --tracking-micro: -0.12px;
  --text-caption: 14px;
  --leading-caption: 1.44;
  --tracking-caption: -0.14px;
  --text-body-sm: 16px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: -0.16px;
  --text-body: 18px;
  --leading-body: 1.5;
  --tracking-body: -0.18px;
  --text-body-lg: 20px;
  --leading-body-lg: 1.44;
  --tracking-body-lg: -0.2px;
  --text-subheading: 24px;
  --leading-subheading: 1.3;
  --tracking-subheading: -0.24px;
  --text-heading-sm: 36px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.648px;
  --text-heading: 48px;
  --leading-heading: 1.1;
  --tracking-heading: -0.96px;
  --text-display: 56px;
  --leading-display: 1.1;
  --tracking-display: -1.68px;

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

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-112: 112px;
  --spacing-120: 120px;

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

  /* Border Radius */
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-3xl: 24px;
  --radius-3xl-2: 32px;
  --radius-full: 999px;

  /* Named Radii */
  --radius-tags: 999px;
  --radius-cards: 24px;
  --radius-images: 32px;
  --radius-inputs: 24px;
  --radius-buttons: 999px;
  --radius-smallbuttons: 8px;

  /* Surfaces */
  --surface-mist-canvas: #f4f4f4;
  --surface-snow-card: #ffffff;
  --surface-ink-surface: #000000;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-nubank-violet: #820ad1;
  --color-deep-iris: #290b4d;
  --color-dusty-violet: #714f8f;
  --color-ink: #000000;
  --color-snow: #ffffff;
  --color-mist: #f4f4f4;
  --color-stone: #a2a2a2;
  --color-concrete: #b3b3b3;
  --color-smoke: #777777;
  --color-graphite: #666666;

  /* Typography */
  --font-graphik: 'Graphik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-micro: 12px;
  --leading-micro: 1.44;
  --tracking-micro: -0.12px;
  --text-caption: 14px;
  --leading-caption: 1.44;
  --tracking-caption: -0.14px;
  --text-body-sm: 16px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: -0.16px;
  --text-body: 18px;
  --leading-body: 1.5;
  --tracking-body: -0.18px;
  --text-body-lg: 20px;
  --leading-body-lg: 1.44;
  --tracking-body-lg: -0.2px;
  --text-subheading: 24px;
  --leading-subheading: 1.3;
  --tracking-subheading: -0.24px;
  --text-heading-sm: 36px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.648px;
  --text-heading: 48px;
  --leading-heading: 1.1;
  --tracking-heading: -0.96px;
  --text-display: 56px;
  --leading-display: 1.1;
  --tracking-display: -1.68px;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-112: 112px;
  --spacing-120: 120px;

  /* Border Radius */
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-3xl: 24px;
  --radius-3xl-2: 32px;
  --radius-full: 999px;
}
```