DESIGN.md inspired by Nubank

---
name: Nubank
tagline: 'Roxo #8d0de3 as the whole brand — white nuSansDisplay on dark purple, 999px pill CTAs, anti-bank warmth.'
updated_at: 2026-05-29T00:00:00.000Z
published_at: 2026-05-28T22:15:14.013Z
author: webdesignhot
source_url: https://nubank.com.br
spec: webdesignhot/0.2
profile: catalog
quality: curated
featured: false
categories: [fintech]
tags: [light, dark, bold, sans, fintech, purple, neobank, brazil]
preview_swatch: ['#8d0de3', '#ffffff', '#000000']
related: []
description: 'Nubank is Latin America''s largest neobank, and its entire visual identity collapses into one colour: Nu Roxo (Nubank purple) `#8d0de3` — an electric, slightly magenta-leaning violet that the brand calls simply "o roxo" (the purple). Where legacy Brazilian banks armour themselves in navy, gold, and marble, Nubank rejected all of it for a single saturated purple applied with conviction — on the iconic no-number card, on every CTA, on full-bleed hero panels, on the wordmark. The marketing site pairs a clean white canvas with deep-purple immersive sections: white running body and black ink on paper-light backgrounds, then white `nuSansDisplay` headlines stamped onto saturated `#8d0de3` hero panels. Type is the custom `nuSans` superfamily — `nuSansDisplay` for headlines (drawn large, ~80–112px, weight 600, with tight negative tracking) and `nuSansText` for body — a humanist-geometric sans that reads warm and approachable rather than corporate. Every actionable element is a fully-rounded 999px pill: the primary CTA is purple-filled with white text, the secondary is a purple-outline ghost. The posture is deliberately anti-traditional-bank — friendly, plain-spoken, Portuguese-first, optimistic. Nubank doesn''t whisper trust through gravitas; it earns it through clarity, generous whitespace, and the relentless confidence of a brand that bet everything on one purple.'


# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  accent: accent-pink
  muted: text-muted
  border: border
  ring: focus-ring
colors:
  bg: '#ffffff'                    # paper-white canvas — the default light ground
  bg-subtle: '#f5f2fa'             # faintest purple-tinted off-white for alternating bands
  bg-purple-tint: '#f3e9fd'        # pale lavender wash — info cards, soft callouts
  surface: '#ffffff'               # default card surface on the light canvas
  surface-purple: '#8d0de3'        # immersive full-bleed purple hero/section panel
  surface-purple-deep: '#6a0aab'   # deeper purple for layered panels / footers on dark
  surface-purple-deepest: '#3d0764' # near-black purple — deepest immersive ground
  text: '#000000'                  # primary ink on the light canvas
  text-body: '#1a1a1a'             # near-black running body
  text-muted: '#595959'            # captions, metadata on light
  text-subtle: '#8a8a8a'           # disabled, lowest hierarchy on light
  text-on-purple: '#ffffff'        # white headline + body on purple panels
  text-on-purple-muted: '#ecd9ff'  # soft lavender-white body on purple
  brand: '#8d0de3'                 # Nu Roxo — THE purple, the entire brand
  brand-bright: '#a32ff0'          # lighter purple for hover/active lift
  brand-deep: '#6a0aab'            # pressed/active deeper purple
  brand-soft: 'rgba(141, 13, 227, 0.10)' # purple at 10% — badge tint, hover wash on light
  on-brand: '#ffffff'              # white text on the purple CTA fill
  accent-pink: '#ff4d8b'           # rare warm-pink accent — promo, NuConta highlights
  accent-yellow: '#ffd23f'         # rare optimism-yellow — illustration, reward moments
  link: '#8d0de3'                  # default link in brand purple on light
  link-on-purple: '#ffffff'        # link on purple panels — white, underlined
  link-hover: '#6a0aab'            # deeper purple link hover on light
  border: '#000000'                # full-weight ink hairline / outline-button stroke
  border-soft: 'rgba(0, 0, 0, 0.10)' # default 1px hairline divider on light
  border-purple: '#8d0de3'         # purple outline for ghost CTA + focused inputs
  border-on-purple: 'rgba(255, 255, 255, 0.30)' # hairline divider on purple panels
  semantic-success: '#2db84f'      # confirmation green
  semantic-warning: '#f5a623'      # caution amber
  semantic-danger: '#e02d2d'       # error red
  semantic-info: '#8d0de3'         # info matches brand purple
  focus-ring: 'rgba(141, 13, 227, 0.45)' # 3px brand-purple focus ring
  shadow-ambient: 'rgba(17, 0, 33, 0.06)' # purple-tinted ambient on light
  shadow-soft: 'rgba(17, 0, 33, 0.10)'
  shadow-standard: 'rgba(17, 0, 33, 0.14)'
  shadow-elevated: 'rgba(17, 0, 33, 0.20)'

typography:
  display:
    family: 'nuSansDisplay, "nuSansDisplay Fallback", system-ui, -apple-system, Arial, Helvetica, sans-serif'
    weights: [500, 600, 700]
    opentype-features: ['kern']
  body:
    family: 'nuSansText, "nuSansText Fallback", system-ui, -apple-system, Arial, Helvetica, sans-serif'
    weights: [400, 500, 600]
  mono:
    family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'
    weights: [400, 500]
  scale:
    display-mega:    { size: 112, weight: 600, lineHeight: 0.90, tracking: '-1.4px',   family: display, opentype: 'kern' }
    display-hero:    { size: 80,  weight: 600, lineHeight: 0.95, tracking: '-1.2px',   family: display, opentype: 'kern' }
    display-lg:      { size: 56,  weight: 600, lineHeight: 1.02, tracking: '-0.9px',   family: display, opentype: 'kern' }
    h1:              { size: 40,  weight: 600, lineHeight: 1.08, tracking: '-0.6px',   family: display }
    h2:              { size: 32,  weight: 600, lineHeight: 1.15, tracking: '-0.4px',   family: display }
    h3:              { size: 24,  weight: 600, lineHeight: 1.25, tracking: '-0.2px',   family: display }
    h4:              { size: 20,  weight: 600, lineHeight: 1.30, tracking: '0',        family: display }
    title-sm:        { size: 18,  weight: 600, lineHeight: 1.35, tracking: '0',        family: body }
    body-lg:         { size: 18,  weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body:            { size: 16,  weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body-strong:     { size: 16,  weight: 600, lineHeight: 1.55, tracking: '0',        family: body }
    body-sm:         { size: 14,  weight: 400, lineHeight: 1.50, tracking: '0',        family: body }
    label:           { size: 13,  weight: 500, lineHeight: 1.40, tracking: '0',        family: body }
    caption:         { size: 12,  weight: 500, lineHeight: 1.40, tracking: '0.02em',   family: body }
    eyebrow:         { size: 13,  weight: 600, lineHeight: 1.30, tracking: '0.08em',   family: body }
    button:          { size: 16,  weight: 600, lineHeight: 1.20, tracking: '0',        family: body }
    nav-link:        { size: 15,  weight: 500, lineHeight: 1.40, tracking: '0',        family: body }
    legal:           { size: 12,  weight: 400, lineHeight: 1.50, tracking: '0',        family: body }

radius:
  none: 0
  micro: 2
  sm: 4
  md: 8
  lg: 12
  xl: 16
  xxl: 24
  pill: 9999

spacing:
  base: 4
  scale: { xxs: 4, xs: 8, sm: 12, base: 16, md: 24, lg: 32, xl: 48, xxl: 64, section: 96, hero: 128 }

layout:
  page-width: 1280
  prose-width: 720
  header-height: 64

components:
  button-primary:        { bg: brand, text: on-brand, padding: '16px 32px', height: 52, radius: pill, font: button }
  button-primary-sm:     { bg: brand, text: on-brand, padding: '12px 24px', height: 44, radius: pill, font: button }
  button-ghost:          { bg: transparent, text: brand, border: '1px solid border-purple', padding: '15px 31px', height: 52, radius: pill, font: button }
  button-on-purple:      { bg: bg, text: brand, padding: '16px 32px', height: 52, radius: pill, font: button }
  button-ghost-on-purple: { bg: transparent, text: on-brand, border: '1px solid border-on-purple', padding: '15px 31px', height: 52, radius: pill, font: button }
  button-text:           { bg: transparent, text: brand, font: button }
  card:                  { bg: surface, border: '1px solid border-soft', radius: lg, padding: 24 }
  card-purple:           { bg: surface-purple, text: text-on-purple, radius: xl, padding: 32 }
  card-soft:             { bg: bg-purple-tint, radius: lg, padding: 24 }
  input:                 { bg: bg, border: '1px solid border-soft', text: text, radius: md, padding: '14px 16px', height: 52 }
  badge-pill:            { bg: brand-soft, text: brand, radius: pill, padding: '4px 12px', font: caption }
  hero-band-purple:      { bg: surface-purple, text: text-on-purple, padding: hero, font: display-hero }
  hero-band-light:       { bg: bg, text: text, padding: hero, font: display-hero }
  top-nav:               { bg: bg, text: text, height: 64, font: nav-link }
  footer:                { bg: surface-purple-deepest, text: text-on-purple, padding: '64px 0', font: body-sm }

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
  ease-entrance: 'cubic-bezier(0, 0, 0.2, 1)'
  duration-fast: 150
  duration-standard: 240
  duration-slow: 320
  reduced-motion: 'respects prefers-reduced-motion: reduce — section parallax, card lifts, and illustration loops collapse to static states'

breakpoints:
  mobile: 640
  tablet: 1024
  desktop: 1280
  wide: 1536

shadows:
  ambient: 'rgba(17, 0, 33, 0.06) 0 1px 2px'
  soft: 'rgba(17, 0, 33, 0.10) 0 4px 12px'
  standard: 'rgba(17, 0, 33, 0.14) 0 8px 24px'
  elevated: 'rgba(17, 0, 33, 0.20) 0 24px 48px -8px'
  ring: '0 0 0 3px rgba(141, 13, 227, 0.45)'

accessibility:
  contrast-text-on-bg: 21.0
  contrast-body-on-bg: 18.1
  contrast-on-purple-on-brand: 5.7
  contrast-brand-on-bg: 5.7
  focus-ring: '3px solid rgba(141,13,227,0.45) with 2px offset'
  reduced-motion-honored: true
  min-target: 44

dark-mode: light-with-purple-immersion
---

## 1. Visual Theme & Atmosphere

Nubank's visual identity is the most single-minded colour bet in modern fintech: the **entire brand is one purple**, `#8d0de3` — an electric, slightly magenta-leaning violet the brand simply calls **"o roxo"** (the purple). It arrived in 2013 as a deliberate provocation. Brazilian banking was a fortress of navy, gold, and grey marble; Nubank answered with a single saturated purple stamped onto a credit card with no number on the front. That card became a status object, and the colour became the company. Today the purple is everywhere — the wordmark, every CTA, full-bleed hero panels, illustration, the card itself — applied not as an accent but as the **entire identity**. There is no "Nubank blue" or "Nubank secondary"; there is the purple, and there is white.

The site lives in two registers that alternate down the page. The **light register** is a clean paper-white canvas (`#ffffff`) carrying black ink (`#000000`) and near-black body, with purple reserved for links, CTAs, and small accents — calm, generous, optimistic. The **immersive register** flips to full-bleed `#8d0de3` purple panels where white `nuSansDisplay` headlines are drawn enormous (80–112px) and the whole viewport becomes the brand colour. The hero is one of these dark-purple immersive moments: a white headline at roughly 83–112px in nuSansDisplay weight 600, set against the saturated purple, with a white-filled pill CTA below. The rhythm of the page is this back-and-forth — paper-light explanatory sections, then a purple panel that reasserts the brand, then light again.

Type is the custom **nuSans** superfamily, commissioned to give the brand a voice that reads warm and human rather than institutional. **nuSansDisplay** handles headlines — a humanist-geometric sans with friendly curves and generous apertures, drawn large with tight negative tracking (-1.2px to -1.4px at hero sizes) so the words lock into a confident, poster-like block. **nuSansText** handles body copy, optimised for screen reading at 16–18px with a comfortable 1.55 line-height. The pairing feels approachable and plainspoken — the typographic equivalent of a bank that talks to you in plain Portuguese instead of legalese.

Geometry is **soft and rounded everywhere**. Every actionable element is a **fully-rounded 999px pill**: the primary CTA is purple-filled with white text; the secondary is a purple-outline ghost (transparent fill, purple stroke, purple text). On purple panels the logic inverts — the primary becomes a white-filled pill with purple text, the secondary a white-outline ghost. Cards use a comfortable 12–16px radius. Nothing is hard-cornered; the brand's friendliness is encoded in its curves.

The overall posture is **deliberately anti-traditional-bank**: friendly, confident, optimistic, Portuguese-first. Where legacy banks project gravitas through marble and seriousness, Nubank projects trust through **clarity and warmth** — generous whitespace, plain language, big friendly type, and the relentless confidence of a brand that bet everything on one colour and won. It feels less like a bank and more like a well-designed consumer-tech product that happens to hold your money.

**Key Characteristics:**
- A one-colour brand: Nu Roxo `#8d0de3` is the entire identity — CTAs, heroes, wordmark, card
- Two alternating registers: paper-white light sections and full-bleed `#8d0de3` purple immersion
- White `nuSansDisplay` headlines at 80–112px on the purple hero, weight 600, tight negative tracking
- Custom nuSans superfamily: nuSansDisplay for headlines, nuSansText for body — humanist, warm
- Every CTA is a fully-rounded 999px pill — purple-filled primary, purple-outline ghost secondary
- On purple panels the CTA logic inverts: white-fill primary, white-outline ghost
- Black ink on white, white ink on purple — high-contrast, never grey-on-grey
- Soft rounded geometry throughout: 12–16px cards, full pills, no hard corners
- Generous whitespace and plain Portuguese-first voice — anti-corporate-bank warmth
- Rare warm accents (pink `#ff4d8b`, yellow `#ffd23f`) appear only in illustration and reward moments

## 2. Color Palette & Roles

### Canvas
- **Canvas** (`#ffffff`): Paper-white default ground — the brand's light register.
- **Canvas Subtle** (`#f5f2fa`): Faint purple-tinted off-white for alternating bands and section separation.
- **Purple Tint** (`#f3e9fd`): Pale lavender wash — soft info cards, gentle callouts on the light canvas.

### Text
- **Ink** (`#000000`): Primary black headline + heavy ink on the light canvas.
- **Body** (`#1a1a1a`): Near-black running body copy on light.
- **Muted** (`#595959`): Captions, metadata, secondary copy on light.
- **Subtle** (`#8a8a8a`): Disabled state, lowest hierarchy on light.
- **On-Purple Ink** (`#ffffff`): White headlines + body on purple immersive panels.
- **On-Purple Muted** (`#ecd9ff`): Soft lavender-white body text on purple panels.

### Brand
- **Nu Roxo / Brand** (`#8d0de3`): THE purple — the entire brand. Primary CTA fill, links, full-bleed panels, wordmark.
- **Brand Bright** (`#a32ff0`): Lighter purple for hover/active lift on the primary CTA.
- **Brand Deep** (`#6a0aab`): Pressed/active deeper purple; layered panel grounds.
- **Brand Soft** (`rgba(141, 13, 227, 0.10)`): Purple at 10% — badge backgrounds, hover wash on light.
- **On-Brand** (`#ffffff`): White text on the purple CTA fill.
- **Surface Purple** (`#8d0de3`): Full-bleed immersive hero/section panel — the brand at full saturation.
- **Surface Purple Deep** (`#6a0aab`): Deeper purple for layered panels.
- **Surface Purple Deepest** (`#3d0764`): Near-black purple — footer and deepest immersive ground.

### Accent (Rare)
Nubank is essentially monochromatic; accents are used sparingly and almost exclusively in illustration, reward moments, and promo highlights — never as a competing brand colour.
- **Accent Pink** (`#ff4d8b`): Warm pink for promo, NuConta highlights, illustration.
- **Accent Yellow** (`#ffd23f`): Optimism-yellow for reward moments and illustration.

### Interactive
- **Link** (`#8d0de3`): Default link in brand purple on the light canvas; underline on hover.
- **Link Hover** (`#6a0aab`): Deeper purple on hover on light.
- **Link On-Purple** (`#ffffff`): White, underlined link on purple panels.
- **CTA Hover** — primary fill shifts `#8d0de3` → `#a32ff0`; ghost gains a `brand-soft` wash.
- **CTA Active** — primary fill `#6a0aab`.
- **Disabled** — `#f5f2fa` background, `#8a8a8a` text.

### Neutral Scale (Light)
A short, high-contrast neutral ramp — Nubank never lingers in mid-grey:

`#ffffff` (Canvas) → `#f5f2fa` (Subtle) → `#f3e9fd` (Purple Tint) → `#8a8a8a` (Subtle ink) → `#595959` (Muted) → `#1a1a1a` (Body) → `#000000` (Ink).

### Surface & Borders
- **Surface** (`#ffffff`): Default card surface on light.
- **Surface Soft** (`#f3e9fd`): Lavender card surface for soft callouts.
- **Surface Purple** (`#8d0de3`): Immersive purple card / panel.
- **Border** (`#000000`): Full-weight ink hairline — used on certain outline buttons and emphatic dividers.
- **Border Soft** (`rgba(0, 0, 0, 0.10)`): Default 1px hairline divider on light.
- **Border Purple** (`#8d0de3`): Purple outline for the ghost CTA and focused inputs.
- **Border On-Purple** (`rgba(255, 255, 255, 0.30)`): Hairline divider and ghost-button stroke on purple panels.

### Shadow Colors
Shadows are **purple-tinted black** (`rgba(17, 0, 33, …)`) rather than neutral black, so elevation stays in the brand's chromatic family on the light canvas. Opacity runs low (0.06–0.20) — Nubank's depth is gentle and paper-soft, never dramatic.

### Semantic
- **Success** (`#2db84f`): Confirmation green — transfers complete, account verified.
- **Warning** (`#f5a623`): Caution amber.
- **Danger** (`#e02d2d`): Error red — failed payment, validation error.
- **Info** (`#8d0de3`): Info matches brand purple — the brand colour doubles as the info state.

## 3. Typography Rules

### Font Family

**Display: nuSansDisplay** — the brand's custom display sans, a humanist-geometric face with friendly curves, generous apertures, and slightly condensed proportions at large sizes. Used for every headline, drawn large (40–112px) at weight 600 with tight negative tracking. Weights deployed: 500, 600, 700.

**Body: nuSansText** — the companion text cut of the nuSans superfamily, optimised for on-screen reading at 14–18px with comfortable line-heights. Used for all running body, labels, navigation, and button text. Weights: 400, 500, 600.

**Fallback chains**: display hands off `nuSansDisplay → "nuSansDisplay Fallback" → system-ui → -apple-system → Arial → Helvetica → sans-serif`; body hands off `nuSansText → "nuSansText Fallback" → system-ui → -apple-system → Arial → Helvetica → sans-serif`. The custom "* Fallback" faces are metric-matched to minimise layout shift before nuSans loads.

**Mono: system monospace** — `ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace`. Nubank uses no custom mono; the system stack carries the rare code/reference moment. Weights: 400, 500.

**OpenType features**: `kern` always on. The display face relies on its tight default tracking plus negative letter-spacing rather than alternate glyph sets — there is no heavy OpenType styling layer.

### Hierarchy

| Role          | Font           | Size | Weight | Line Height | Letter Spacing | Notes                                          |
|---------------|----------------|------|--------|-------------|----------------|------------------------------------------------|
| display-mega  | nuSansDisplay  | 112  | 600    | 0.90        | -1.4px         | Top-of-page hero headline, white on purple     |
| display-hero  | nuSansDisplay  | 80   | 600    | 0.95        | -1.2px         | Standard hero headline                         |
| display-lg    | nuSansDisplay  | 56   | 600    | 1.02        | -0.9px         | Major section opener                           |
| h1            | nuSansDisplay  | 40   | 600    | 1.08        | -0.6px         | Page / section H1                              |
| h2            | nuSansDisplay  | 32   | 600    | 1.15        | -0.4px         | Subsection heading                             |
| h3            | nuSansDisplay  | 24   | 600    | 1.25        | -0.2px         | Card title / feature heading                   |
| h4            | nuSansDisplay  | 20   | 600    | 1.30        | 0              | Small heading                                  |
| title-sm      | nuSansText     | 18   | 600    | 1.35        | 0              | List heading, inline title                     |
| body-lg       | nuSansText     | 18   | 400    | 1.55        | 0              | Lead paragraph                                 |
| body          | nuSansText     | 16   | 400    | 1.55        | 0              | Default running body                           |
| body-strong   | nuSansText     | 16   | 600    | 1.55        | 0              | Inline emphasis                                |
| body-sm       | nuSansText     | 14   | 400    | 1.50        | 0              | Secondary body                                 |
| label         | nuSansText     | 13   | 500    | 1.40        | 0              | Form labels, chips                             |
| caption       | nuSansText     | 12   | 500    | 1.40        | 0.02em         | Metadata, fine print                           |
| eyebrow       | nuSansText     | 13   | 600    | 1.30        | 0.08em         | Section eyebrow — modest uppercase/tracked     |
| button        | nuSansText     | 16   | 600    | 1.20        | 0              | All CTA labels                                 |
| nav-link      | nuSansText     | 15   | 500    | 1.40        | 0              | Top navigation                                 |
| legal         | nuSansText     | 12   | 400    | 1.50        | 0              | Footer disclosure                              |

### Principles

- **Display weight is 600, not 700**: Nubank's headline voice is confident but warm — semibold, not maximally heavy. The friendliness lives in the weight choice as much as the letterforms.
- **Tight negative tracking on display**: -0.6px to -1.4px on the large tiers locks the headline into a dense, poster-like block. The bigger the size, the tighter the tracking.
- **Sub-1.0 line-height on the mega tier**: hero headlines run 0.90–0.95 line-height so multi-line headlines stack into a solid mass.
- **Display for headings, Text for everything else**: nuSansDisplay stops at h4 (20px); from title-sm down it's nuSansText. The cut switch is part of the hierarchy.
- **Body at 1.55 line-height**: generous leading on 16–18px body reinforces the calm, readable, plain-Portuguese register.
- **High-contrast ink only**: black `#000000` on white, white `#ffffff` on purple. The brand avoids mid-grey body text; muted greys are reserved for captions and metadata.
- **Eyebrow is gentle, not shouty**: 13px weight 600 with 0.08em tracking — present but never an aggressive all-caps mono label.

## 4. Component Stylings

### Buttons

**Primary CTA** ("Quero ser Nubank", "Continuar")
- Background: `#8d0de3` (Nu Roxo)
- Text: `#ffffff`, weight 600, 16px
- Padding: 16px / 32px
- Height: 52px
- Radius: pill (9999)
- Hover: bg `#a32ff0`, gentle lift (`shadow-soft`)
- Active: bg `#6a0aab`
- Use case: every primary action on the light canvas

**Primary Small**
- Same as primary at 12px / 24px padding, 44px height — minimum touch target preserved
- Use case: nav-bar CTA, compact cards

**Ghost / Outline** ("Login Empresas", "Saiba mais")
- Background: transparent
- Text: `#8d0de3`, weight 600
- Border: 1px solid `#8d0de3` (purple outline)
- Padding: 15px / 31px (1px less than primary to compensate for the border)
- Height: 52px
- Radius: pill
- Hover: bg `brand-soft` (`rgba(141,13,227,0.10)`)
- Use case: secondary action beside the primary CTA

**On-Purple Primary** (CTA sitting on a purple panel)
- Background: `#ffffff`
- Text: `#8d0de3`, weight 600
- Same pill geometry, 52px
- Hover: bg shifts to `#f3e9fd`
- Use case: the CTA inside a full-bleed `#8d0de3` hero — logic inverts to white-fill / purple-text

**On-Purple Ghost**
- Background: transparent
- Text: `#ffffff`, weight 600
- Border: 1px solid `rgba(255, 255, 255, 0.30)`
- Same pill geometry
- Use case: secondary action on a purple panel

**Text Button**
- Background: transparent
- Text: `#8d0de3`, weight 600, underline-on-hover
- Use case: tertiary / inline action

### Cards

**Default Card**
- Background: `#ffffff`
- Border: 1px solid `rgba(0, 0, 0, 0.10)`
- Radius: 12px
- Padding: 24px
- Shadow: none at rest; `shadow-soft` on hover
- Use case: feature grid on the light canvas

**Purple Card** (immersive)
- Background: `#8d0de3`
- Text: `#ffffff` headline, `#ecd9ff` body
- Radius: 16px
- Padding: 32px
- Use case: highlighted product card, "o roxo" moment within a light section

**Soft Card**
- Background: `#f3e9fd` (purple tint)
- Radius: 12px
- Padding: 24px
- Use case: info callout, benefit list, gentle emphasis without going full-purple

### Badges, Tags, Pills

**Brand Badge**
- Background: `rgba(141, 13, 227, 0.10)` (brand-soft)
- Text: `#8d0de3`, weight 600, 12px
- Padding: 4px / 12px
- Radius: pill
- Use case: "Novo", "Grátis", category tag

**Selector Chip**
- Background: `#ffffff` at rest, `#8d0de3` when selected
- Text: `#000000` at rest, `#ffffff` when selected
- Border: 1px solid `rgba(0,0,0,0.10)`
- Radius: pill
- Use case: filter chips, plan toggles

### Inputs / Forms

**Text Input**
- Background: `#ffffff`
- Border: 1px solid `rgba(0, 0, 0, 0.10)`
- Radius: 8px
- Height: 52px
- Padding: 14px / 16px
- Label: 13px weight 500 above the field
- Focus: border `#8d0de3` 2px, ring `rgba(141, 13, 227, 0.45)` 3px
- Error: border `#e02d2d`, helper text in `#e02d2d`
- Use case: signup form, CPF entry, search

**On-Purple Input**
- Background: `rgba(255, 255, 255, 0.12)`
- Border: 1px solid `rgba(255, 255, 255, 0.30)`
- Text + placeholder: white / lavender-white
- Use case: lead-capture field on a purple hero

### Navigation

**Top Nav**
- Height: 64px
- Background: `#ffffff` (transparent over purple heroes, then solid white on scroll)
- No bottom border at top of page; gains a `border-soft` hairline + `shadow-ambient` once stuck on scroll
- Logo left (Nubank wordmark in `#8d0de3`), nav links centre, ghost "Login" + primary "Quero ser Nubank" pill right
- Nav link: 15px / 500, colour `#000000`; hover: colour shifts to `#8d0de3`
- Over a purple hero the nav inverts: white wordmark, white links, white-fill primary pill

**Footer**
- Background: `#3d0764` (deepest purple) — closes the page in immersive brand colour
- Text: `#ffffff` for category headers, `#ecd9ff` for links
- Padding: 64px vertical
- Nubank wordmark + app-store badges, region/language switcher

## 5. Layout Principles

### Spacing System
Base 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128. Section spacer 96px; hero 128px. The 4px base keeps component padding tight and consistent, while large section gaps (96–128px) deliver the generous, unhurried whitespace that defines the brand's calm.

### Grid & Container
- Page max-width 1280px
- Prose width 720px
- 12-col grid with 24px gutters
- Light sections: content max 1280px, centred, generous side padding
- Purple immersive sections go full-bleed in `#8d0de3`; content inside still respects the 1280px container

### Whitespace Philosophy
Nubank's whitespace is **deliberate and abundant**. Light sections give headlines and body copy room to breathe — the page is never crowded. The visual logic is "let the purple and the type do the work" — minimal ornament, lots of air, a single clear action per section. The whitespace is itself a trust signal: a calm, uncluttered page reads as a calm, trustworthy bank.

### Section Cadence
Light section → light section (subtle band) → full-bleed purple immersive panel → light section → deepest-purple footer. The purple panels are the page's punctuation: every few sections the brand reasserts itself in full saturation, then returns to the calm white register. The cadence is light-dominant with purple as the recurring emphatic beat.

## 6. Shapes & Radius Scale

| Tier       | Value | Use                                              |
|------------|-------|--------------------------------------------------|
| None       | 0     | Full-bleed panel edges, banner promos            |
| Micro      | 2     | Status dots, tiny indicators                     |
| SM         | 4     | Small inline tags                                |
| MD         | 8     | Inputs, dropdowns, small buttons                 |
| LG         | 12    | Default cards, soft callouts                     |
| XL         | 16    | Feature cards, purple cards, image containers    |
| XXL        | 24    | Large hero cards, illustration frames            |
| Pill       | 9999  | All CTAs, badges, selector chips                 |

Nubank's signature radius pairing is **12–16px on cards + full 999px pill on every CTA**. The fully-rounded pill is non-negotiable across all button variants and on both light and purple registers — it is one of the brand's most recognisable geometric tells. Nothing in the system is hard-cornered below the 12px card tier.

## 7. Depth & Elevation

| Level | Treatment                                                        | Use                                              |
|-------|------------------------------------------------------------------|--------------------------------------------------|
| 0     | Flat (canvas `#ffffff` or panel `#8d0de3`)                       | Hero text, body, default sections                |
| 1     | Ambient `rgba(17,0,33,0.06) 0 1px 2px`                           | Sticky nav post-scroll, resting card hairline    |
| 2     | Soft `rgba(17,0,33,0.10) 0 4px 12px`                             | Card hover, raised callout                       |
| 3     | Standard `rgba(17,0,33,0.14) 0 8px 24px`                         | Dropdown, popover, floating CTA                  |
| 4     | Elevated `rgba(17,0,33,0.20) 0 24px 48px -8px`                   | Modal dialog, mega-menu                          |

### Shadow Philosophy

Nubank's elevation is **gentle and paper-soft**, never dramatic. Shadows are **purple-tinted black** (`rgba(17, 0, 33, …)`) rather than neutral grey, so even the depth stays in the brand's chromatic family on the white canvas. Opacity runs low (0.06–0.20). The brand prefers to communicate hierarchy through **colour and whitespace** rather than heavy shadow — most cards rest flat with a hairline border and only lift on hover. On purple immersive panels, shadow is largely abandoned in favour of surface-colour layering (`#8d0de3` → `#6a0aab` → `#3d0764`), since dark-on-dark shadow reads poorly.

## 8. Interaction & Motion

### Easing
- **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — most state changes
- **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — entrances, section reveals
- **Entrance**: `cubic-bezier(0, 0, 0.2, 1)` — elements arriving on scroll

### Durations
- **Fast**: 150ms — colour shifts on link/button hover
- **Standard**: 240ms — most component state changes, card hover lift
- **Slow**: 320ms — modal entrance, section reveal, purple-panel parallax

### Per-Component Recipes
- **Button hover**: primary fill `#8d0de3` → `#a32ff0` over 150ms; gentle `shadow-soft` lift over 240ms
- **Ghost hover**: `brand-soft` wash fades in over 150ms
- **Card hover**: lift from flat to `shadow-soft`, optional 2px translate-up over 240ms ease-standard
- **Link hover**: colour shift + underline over 150ms
- **Section reveal on scroll**: opacity 0 → 1 + 16px translate-up over 320ms ease-emphasized, staggered for grids
- **Purple panel parallax**: background illustration drifts subtly slower than content on scroll
- **Nav stick**: transparent-over-hero → solid white with hairline + ambient shadow, crossfade over 240ms

### Page Transition
Section-by-section scroll reveals are the dominant motion. There are no hard page-swap colour transitions — the light/purple alternation is structural, not animated. Hero illustrations may loop a slow ambient animation.

### Reduced Motion
Strictly honoured via `prefers-reduced-motion: reduce`. Section parallax stops; scroll-reveal becomes instant (no translate, no fade); card lift becomes an instant shadow swap; illustration loops freeze on their first frame. All content remains fully accessible without motion.

## 9. Accessibility & A11y

### Contrast Pairs
- `#000000` ink on `#ffffff` bg: **21.0:1** — AAA
- `#1a1a1a` body on `#ffffff` bg: **18.1:1** — AAA
- `#595959` muted on `#ffffff` bg: **7.0:1** — AAA
- `#ffffff` on `#8d0de3` brand: **5.7:1** — AA (passes for normal text, AAA for large)
- `#8d0de3` brand link on `#ffffff` bg: **5.7:1** — AA at all sizes
- `#ecd9ff` muted on `#8d0de3` brand: **3.4:1** — AA large text only; reserve for headings/large copy

The purple `#8d0de3` is calibrated to clear AA against both white and black — white text on the purple CTA passes 5.7:1, and the purple link on white passes the same. White-on-purple is the safe default for all panel copy; pale lavender (`#ecd9ff`) is restricted to large text.

### Focus Indicators
3px solid `rgba(141, 13, 227, 0.45)` ring with 2px offset on every interactive element on light. On purple panels the focus ring switches to a white `rgba(255,255,255,0.7)` ring for contrast.

### ARIA Patterns
- **Dialog**: modals use `role="dialog"`, `aria-modal="true"`, focus-trap, Escape to close
- **Navigation**: top nav uses `<nav aria-label>`; mega-menu items expose `aria-expanded`
- **Forms**: inputs paired with `<label>`; errors use `aria-describedby` + `aria-invalid="true"`
- **Live region**: form-submission status uses `aria-live="polite"`
- **Accordion** (FAQ): `aria-expanded` + `aria-controls` on each trigger

### Keyboard Nav
Tab order matches visual flow. Pill CTAs and links are native focusable elements. Modals focus-trap and restore focus on close. Accordions toggle on Enter/Space. The mega-menu is fully keyboard-operable with arrow keys within groups.

### Screen Reader Hints
- Wordmark: `role="img"` with `aria-label="Nubank"`
- Decorative purple illustrations: `aria-hidden="true"`
- Icon-only buttons: explicit `aria-label` (Portuguese-first, e.g. `aria-label="Abrir menu"`)
- Language/region switcher announces current selection

### Reduced Motion
All animations honour `prefers-reduced-motion: reduce`; scroll reveals and parallax collapse to static.

## 10. Responsive Behavior

### Breakpoints
| Name    | Width     | Use                              |
|---------|-----------|----------------------------------|
| mobile  | <640      | Stacked single-column            |
| tablet  | 640–1024  | 2-col grid                       |
| desktop | 1024–1280 | 3-col grid                       |
| wide    | ≥1280     | Full 1280px layout               |

### Touch Targets
Minimum 44×44px. Primary CTA at 52px, small CTA at 44px (the floor). Nav links and chips padded to ≥44px tap height on mobile.

### Collapsing Strategy
- Top nav collapses to a hamburger drawer below 1024px; the primary "Quero ser Nubank" pill stays visible
- display-mega scales 112 → 80 → 56 → 40px (desktop → tablet → large-mobile → mobile)
- display-hero scales 80 → 56 → 40px
- Feature grid 3-col → 2-col → 1-col
- Purple panels stay full-bleed at every breakpoint; padding tightens from 128px → 64px → 48px
- Side-by-side hero (text + illustration) stacks vertically on mobile, text first

### Image Behavior
- App/phone mockups at iOS-bezel radius
- Hero illustrations scale down and may crop on mobile; decorative-only assets drop below 640px
- `loading="lazy"` for below-fold media

### Container Queries
Feature cards adapt internally: below a narrow card width the icon stacks above the title; at wider widths icon and text align horizontally.

## 11. Content & Voice

### Tone
**Warm, plain-spoken, confident, optimistic — and Portuguese-first.** Nubank's voice is the antithesis of bank legalese: short clear sentences, second-person address ("Sua conta", "Quero ser Nubank"), and an upbeat, human register. The brand sounds like a knowledgeable friend explaining money simply, never a fortress projecting gravitas. Copy is primary in Brazilian Portuguese (with Spanish/English for other markets) and avoids jargon, fees-fine-print theatrics, and intimidation.

### Microcopy Patterns
- **Button verbs**: "Quero ser Nubank" (I want to be Nubank), "Abrir conta" (Open account), "Continuar", "Saiba mais" (Learn more), "Peça já" (Request now)
- **Error message recipe**: clear, calm, non-blaming. "Não conseguimos validar seu CPF. Confira os números." (We couldn't validate your CPF. Check the numbers.)
- **Success confirmation**: "Pronto! Sua conta foi criada." (Done! Your account was created.)
- **Reassurance copy**: emphasises "sem tarifas" (no fees), "sem anuidade" (no annual fee), "100% pelo app"

### Empty States
- **No transactions**: "Suas movimentações vão aparecer aqui." (Your activity will show up here.)
- **No cards**: "Você ainda não tem um cartão. Que tal pedir o seu?" (You don't have a card yet. How about requesting yours?)
- Empty states are warm and inviting — they nudge toward the next action, never apologise.

### CTA Verb Conventions
- **Acquisition**: "Quero ser Nubank", "Abrir conta grátis", "Peça já"
- **Sign-in**: "Login", "Entrar"
- **Exploration**: "Saiba mais", "Conheça", "Veja como funciona"
- **Confirmation**: "Continuar", "Confirmar"

The brand frequently frames CTAs in the **first person** ("Quero…" / "I want…") — putting the desire in the user's voice rather than commanding them. It is a distinctive, warm conversion device.

## 12. Dark Mode & Theming

Nubank's marketing site is **light-with-purple-immersion** rather than a true dark-mode brand. The default register is the white canvas; the "dark" moments are full-bleed `#8d0de3` (and deeper `#6a0aab` / `#3d0764`) immersive panels, not a neutral dark theme. There is no separate dark/light toggle on the marketing site — the alternation is structural and intentional.

If extending to a true dark theme (e.g. for an app or a dark-mode marketing variant):

```yaml
colors-dark:
  bg: '#1a0b29'                 # deep purple-black ground (not neutral black)
  bg-elevated: '#2a1240'        # +1 surface
  surface: '#2a1240'
  surface-strong: '#3d0764'
  text: '#ffffff'
  text-body: '#ecd9ff'          # lavender-white body
  text-muted: '#b69bd1'
  brand: '#a32ff0'              # lift the purple brighter — #8d0de3 is slightly dark on a purple-black ground
  brand-hover: '#b85cff'
  on-brand: '#ffffff'
  border: 'rgba(255, 255, 255, 0.14)'
  link: '#c98cff'
```

The key move for true dark mode is **lifting the brand purple** from `#8d0de3` toward `#a32ff0` so the CTA reads as active against a purple-black ground, and keeping backgrounds in the purple family (`#1a0b29`) rather than neutral black — the brand stays chromatic even in the dark.

## 13. Lineage & Influences

Nubank's design lineage is the story of a deliberate **rejection of Brazilian banking convention** fused with **Silicon Valley consumer-tech minimalism**. When Nubank launched in 2013, incumbent banks (Itaú, Bradesco, Santander Brasil) signalled trust through navy, gold, marble, and seriousness. Nubank inverted every variable at once: a single saturated purple, a credit card with no number on the front, generous whitespace, plain Portuguese, and a product-first posture. The colour itself was the strategy — "o roxo" became a cultural shorthand, and the no-number card became an aspirational object. The brand's confidence comes from committing absolutely to one colour and one tone, the way the best consumer-tech brands commit to a single identity.

Visually it draws from the **flat-design / friendly-fintech wave** of the mid-2010s — Monzo's coral, Revolut's gradients, and the broader European-neobank movement all share the DNA of bold mono-colour identity, rounded pills, big friendly type, and whitespace-forward layouts. But where Monzo and Revolut lean playful-to-edgy, Nubank stays **warm and reassuring** — the optimism of a brand serving a market where many users were unbanked or underserved. The custom nuSans superfamily is what most separates it: a humanist-geometric voice that keeps the brand from feeling cold or generic. What Nubank rejects is everything legacy-bank — the navy-and-gold gravitas, the fee-laden fine print, the branch-first physicality — and everything cold-tech (it avoids the developer-grey, terminal-mono aesthetic entirely). The result is a brand that feels like a friendly, well-designed app that happens to be the largest bank in Latin America.

**Influences:**
- **Monzo** ([monzo.com](https://monzo.com)) — Mono-colour neobank identity, rounded pills, friendly big type
- **Revolut** ([revolut.com](https://revolut.com)) — European neobank movement, bold-colour fintech UI
- **Apple** ([apple.com](https://www.apple.com)) — Whitespace-forward, product-first consumer-tech minimalism
- **Stripe** ([stripe.com](https://stripe.com)) — Fintech-design clarity and immersive full-bleed colour sections
- **Pentagram** ([pentagram.com](https://www.pentagram.com)) — Brand-system rigour: single-colour identity applied with total conviction

## 14. Do's and Don'ts

**Do:**
- Use Nu Roxo `#8d0de3` as THE brand colour — CTAs, links, heroes, accents all flow from one purple
- Pill every CTA at full 999px radius — purple-fill primary, purple-outline ghost
- Invert CTA logic on purple panels: white-fill primary, white-outline ghost
- Set headlines in nuSansDisplay weight 600 with tight negative tracking (-0.6px to -1.4px)
- Use nuSansText for all body, labels, nav, and button text
- Alternate white light sections with full-bleed `#8d0de3` immersive panels
- Keep ink high-contrast: black `#000000` on white, white `#ffffff` on purple
- Use generous whitespace (96–128px section gaps) as a trust signal
- Tint shadows purple (`rgba(17,0,33,…)`) so depth stays in the brand family
- Frame conversion CTAs in the first person ("Quero ser Nubank") — warm, plain Portuguese-first

**Don't:**
- Don't introduce a second brand colour — Nubank is one purple; blue/green/teal break the identity
- Don't use a softer pastel-lavender for the brand — `#8d0de3` is saturated and electric, not muted
- Don't hard-corner CTAs — every button is a full pill, never an 8px-radius rectangle
- Don't use weight 700+ display as the default — 600 is the warm, confident voice
- Don't set body text in mid-grey — black/near-black on white, white on purple
- Don't put white-text on a pale-purple fill — the CTA fill must be full `#8d0de3` to clear contrast
- Don't lean on heavy drop-shadows — Nubank's depth is gentle, paper-soft, and purple-tinted
- Don't use corporate-bank gravitas copy — no navy-and-gold seriousness, no fee fine-print theatrics
- Don't overuse the pink/yellow accents — they belong in illustration only, never as CTAs
- Don't centre dense paragraphs — keep prose left-aligned at ~720px for readability

## 15. Agent Prompt Guide

### Quick Color Reference

```
Brand (Nu Roxo): #8d0de3
Brand Bright:     #a32ff0
Brand Deep:       #6a0aab
Purple Deepest:   #3d0764
Canvas:           #ffffff
Purple Tint:      #f3e9fd
Ink:              #000000
Body:             #1a1a1a
On-Purple Ink:    #ffffff
On-Purple Muted:  #ecd9ff
Border Soft:      rgba(0,0,0,0.10)
Accent Pink:      #ff4d8b
```

### Example Component Prompts

1. *"Create a Nubank hero: full-bleed `#8d0de3` purple background, 96px nuSansDisplay headline at weight 600 in pure white `#ffffff` with -1.2px tracking and 0.95 line-height — text 'Somos incansáveis pra você não precisar ser'. Below, an 18px body in `#ecd9ff` (lavender-white). A white-filled pill CTA (999px radius, 52px height, 16px/32px padding) with `#8d0de3` purple text at weight 600, labelled 'Quero ser Nubank'. Beside it, a white-outline ghost pill (1px `rgba(255,255,255,0.30)` border, white text) labelled 'Saiba mais'."*

2. *"Design a Nubank feature grid on a white `#ffffff` canvas: 3 cards in a row, 24px gap. Each card has white bg, 1px `rgba(0,0,0,0.10)` border, 12px radius, 24px padding. Title 24px nuSansDisplay weight 600 in `#000000` with -0.2px tracking. Body 16px nuSansText weight 400 in `#1a1a1a` at 1.55 line-height. Top of each card: a purple `#8d0de3` icon. On hover, the card lifts with a soft purple-tinted shadow `rgba(17,0,33,0.10) 0 4px 12px`."*

3. *"Build a Nubank signup form on white: a 52px-tall text input, white bg, 1px `rgba(0,0,0,0.10)` border, 8px radius, 14px/16px padding, with a 13px weight-500 label above. On focus, the border turns `#8d0de3` 2px with a 3px `rgba(141,13,227,0.45)` ring. Below, a full-width purple pill CTA (`#8d0de3` fill, white text, 999px radius, 52px height) labelled 'Continuar'."*

4. *"Compose a Nubank purple immersive card: `#8d0de3` background, 16px radius, 32px padding. Headline 32px nuSansDisplay weight 600 in white. Body 16px nuSansText in `#ecd9ff`. A white-fill pill CTA (`#8d0de3` text) at the bottom. The card sits inside a white section as the page's 'o roxo' emphasis moment."*

5. *"Design a Nubank top nav: 64px tall, white `#ffffff` background, no border at top (gains a `rgba(0,0,0,0.10)` hairline + soft shadow on scroll). Nubank wordmark in `#8d0de3` on the left, nav links centre (15px nuSansText weight 500, black `#000000`, hover to `#8d0de3`), and on the right a purple-outline ghost 'Login' pill plus a purple-fill 'Quero ser Nubank' primary pill."*

6. *"Create a Nubank pricing/benefit section: alternating white and `#f5f2fa` bands, left-aligned prose at 720px width. Eyebrow in 13px nuSansText weight 600 tracked 0.08em in `#8d0de3`. H2 at 32px nuSansDisplay weight 600 in black. Benefit chips: pill-shaped, `rgba(141,13,227,0.10)` bg, `#8d0de3` text. Generous 96px vertical spacing between sections."*

### Iteration Guide

1. **Commit to the one purple**: every brand colour decision routes through `#8d0de3`. If you've reached for a second brand colour, you've left Nubank — pull it back.
2. **Pill every CTA**: full 999px radius, no exceptions. Purple-fill primary, purple-outline ghost on light; white-fill / white-outline on purple panels.
3. **Alternate the two registers**: white light sections punctuated by full-bleed `#8d0de3` immersive panels. The rhythm IS the layout.
4. **Headlines in nuSansDisplay 600 with tight tracking**: -0.6px to -1.4px, sub-1.0 line-height at hero sizes. Warm-confident, not maximally heavy.
5. **Keep ink high-contrast**: black on white, white on purple — never mid-grey body. Greys are for captions only.
6. **Tint the shadows purple**: `rgba(17,0,33,…)` at low opacity, not neutral black. Keep depth in the brand family.
7. **Use whitespace generously**: 96–128px section gaps. Calm, uncluttered layout is itself a trust signal.
8. **Write warm, first-person, Portuguese-first copy**: "Quero ser Nubank" not "Sign up now" — put the desire in the user's voice and drop the bank gravitas.