# Nubank — Marketing Site Design Spec

> Source: nubank.com.br (live DOM, computed styles), 2026-07-29 (desktop 1512px). Portuguese homepage; Chakra-UI runtime (emotion `css-*` classes, `--chakra-*` vars).
> Coverage: public marketing homepage. Dashboard (app account): behind login, `needs-dashboard`. The public brand book with the live colour picker is a separate property (not captured here). No cross-origin sheets blocked (sheetsBlocked 0).
> Reality check: hint said "Latin-American maximalist roxinho purple, custom fluid wordmark, interactive brand book with colour picker". The maximalism is real and then some — display type runs **112–156px** over full-bleed photography, body copy is a huge **24px/500** — but the "interactive brand book / colour picker" lives on a separate site, not this homepage. The wordmark here is the fixed `nu` mark in a purple rounded square, not a fluid logotype. One accent does everything: purple `#8d0de3`.

## 1. Visual Theme & Atmosphere

Loud, warm, human consumer-bank maximalism — the antithesis of the restrained US/EU fintech in this library. A single saturated purple ("roxinho", `#8d0de3`) owns the brand and appears everywhere colour is allowed: logo, CTAs, giant section headings, progress bars. Everything else is either full-bleed candid photography of real people or a soft cream/lilac surface, so the page reads as photography + type + one purple, never a UI grid. Type is the loudest voice: a bespoke humanist sans set enormous (up to 156px) with tight negative tracking, and body copy that is itself display-sized. Controls are fully-round pills; a frosted glass card floats over the hero photo. Feels: warm, confident, maximal, human.

## 2. Color Palette & Roles

### Brand purple ("roxinho")
| Token | Hex | Role / usage |
|---|---|---|
| nu-purple | `#8d0de3` | THE brand: logo, primary CTA fill, giant headings, links, progress |
| purple-deep | `#5d0599` | Darker purple fill / pressed |
| purple-ink | `#1e002f` | Near-black deep-purple: nav text, dark sections |
| purple-muted | `#714f8f` | Muted purple secondary text |
| lilac-300 | `#cba5fd` | Mid lilac accents |
| lilac-100 | `#ecdfff` | Light lilac: inset ring, tints, chips |
| purple-20 | `rgba(141,13,227,.2)` | Disabled text/fill (purple at 20%) |

### Neutrals & warm surfaces
| Token | Hex | Role / usage |
|---|---|---|
| ink | `#000000` | Body text on light |
| white | `#ffffff` | Page bg, cards, text on purple/photo |
| cream | `#f3efe6` | Warm section surface |
| butter | `#eeedb3` | Pale-yellow accent surface (rare) |
| gray-label | `#52525d` | Input labels, captions |
| gray-300 | `#d4d4d8` | Muted dividers/icons |

Rule: purple `#8d0de3` is the ONLY chromatic accent — no second brand hue; cream/butter soften but never compete. Rule: colour lives on type and controls; structure comes from photography, not borders.

## 3. Typography Rules

- Display / headings: `nuSansDisplay` (bespoke Nu Sans Display). Body / UI: `nuSansText`. Icons: `nubankIcons`.
- Preview specimen uses **Inter** as the open stand-in for both Nu Sans faces (the real faces are proprietary) — proportions differ, tracking approximated.
- Body is display-sized: 24px / 500.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero display (h1) | 112 / 100.8 | 500 | -1.4px |
| Giant section (h2) | 112–156 / 1.0 | 600 | -1.4 to -3.4px |
| Section (h3) | 72 / 72 | 600 | -1.2px |
| Body (p) | 24 / 28.8 | 500 | -0.5px |
| Nav / button | 16 / 19.2 | 600 | normal |
| Input label | 21 / 56 | 400 | -0.25px |

Patterns: tracking grows more negative as size grows (-3.4px at 156px); weight stays 500–600 (never a thin display); body copy is unusually large.

## 4. Component Stylings

### Buttons
- **Primary pill**: bg `#8d0de3`, text `#ffffff`, radius `999px`, h `48px`, pad `0 24px`, 16px/600. Full-round.
- **Secondary pill (outline)**: transparent bg, text `#8d0de3`, 1px inset ring `#8d0de3` (`box-shadow: inset 0 0 0 1px #8d0de3`), radius `999px`, h `48px`. Hover: keeps purple text + inset ring (fill stays clear). Disabled: text drops to `rgba(141,13,227,.2)`, ring removed.
- **Big block CTA** (in-card "Continuar"): purple `#8d0de3`, white, h `56–64px`, radius `999px`, full-width with a trailing chevron.
- Focus-visible: same as active — purple text + 1px inset ring, plus `outline: 2px transparent; outline-offset: 2px`.

### Inputs
- h `56px`, bg `#ffffff`, border `2px` transparent (rests borderless on white card), radius `8px`, label 21px `#52525d`. Focus: border darkens to `#000000`.

### Cards / glass panel
- Hero lead card: frosted glass over photo — `backdrop-filter: blur(50px)`, radius `24px` (top corners `24px 24px 0 0` on sheets), soft shadow `rgba(39,39,42,.08) 0 40px 40px`.
- Content cards: radius `12px`, inset hairline ring `inset 0 0 0 1px #ecdfff` (light lilac) instead of a solid border.

### Nav
- h `~64px`, white, `nu` mark in a purple rounded square at left, dropdown links (16/600 `#1e002f`), right actions: secondary outline pill + primary purple pill.

## 5. Layout Principles

- Full-bleed hero: candid photography edge-to-edge, giant white display type overlaid left, a floating frosted glass "get started" card at right.
- Max content ~1200px inside sections; heros break to full width.
- Section rhythm alternates white, cream `#f3efe6`, and full-purple `#8d0de3` bands; giant purple headings anchor each.
- Logo/partner marquee scrolls infinitely (84s linear).
- Spacing generous; type does the structuring, not grids or hairlines.

## 6. Depth & Elevation

- Radii: pills `999px` (dominant — 59 hits), cards `12px`, inputs `8px`, `16px`, sheets `24px` (top-only `24px 24px 0 0`).
- Shadows: soft float `rgba(39,39,42,.08) 0 40px 40px`; inset lilac ring `inset 0 0 0 1px #ecdfff`; purple inset ring on outline buttons.
- Elevation philosophy: near-flat — inset rings and one big soft shadow on the floating glass card; borders are mostly transparent.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| all | 0.65s | ease | house transition (hover/reveal) |
| opacity | 1.6s | ease-in-out | slow fades |
| height, background-color, color | 0.4s / 0.3s | ease-in-out | accordion / nav |
| all | 0.15s | ease-out | quick micro |

- House transition: `all 0.65s ease` (16×). Reveal easing `cubic-bezier(0.22,1,0.36,1)`.
- Keyframes: `carouselButtonLoadingProgressA/B` + `carouselSectionLoadingProgressA/B` (auto-advancing carousel progress bars, 2–9s linear), `animation-r45xz8` 84s linear infinite (partner-logo marquee), `animation-u0nmg8` 2.5s ease-in-out infinite (subtle pulse).
- 3 `prefers-reduced-motion: reduce` blocks honoured. No GSAP/Lenis/Framer/Rive detected (Chakra + emotion runtime).

## 8. Backgrounds, Effects & WebGL

- No canvas / WebGL / video — atmosphere is photography, not generative.
- Photo scrims: `linear-gradient(rgba(30,0,47,0) → rgba(30,0,47,.4))` and dark bottom fades `rgba(0,0,0,0) → rgba(0,0,0,.8)` keep white type legible over images.
- `backdrop-filter: blur(50px)` on the floating glass hero card.
- No grain/noise layers.

## 9. Do's and Don'ts

### Do
- Make purple `#8d0de3` the single accent — logo, CTAs, giant headings, progress, links.
- Set headings enormous (100–156px) with tight negative tracking (-1.4 to -3.4px), weight 500–600.
- Set body copy large (24px/500), not the usual 16px.
- Use fully-round pills (`999px`) for every button; keep inputs at radius 8px.
- Float a `blur(50px)` frosted glass card over full-bleed candid photography for the hero.
- Soften the purple with cream `#f3efe6` and pale-yellow `#eeedb3` surface bands.
- Use inset rings (`inset 0 0 0 1px #ecdfff`) instead of solid borders on cards.

### Don't
- Don't add a second accent colour — purple does everything.
- Don't use thin display weights or positive tracking on big type.
- Don't shrink body copy to 14–16px; the maximalism depends on large text.
- Don't box the page in hairline borders/grids — photography and type carry structure.
- Don't use square/8px buttons; controls are pills.

## 10. Responsive Behavior

| Breakpoint | What changes |
|---|---|
| min 390px | small-phone baseline |
| min 576px | phone→large-phone |
| min 768px | tablet: hero card repositions |
| min 992px | desktop nav, side-by-side hero |
| min 1200px | wide desktop |
| min 1400px / 1537px | max container, largest display type |

- Bespoke 7-step ladder (390/576/768/992/1200/1400/1537) — its own seams, not a framework default.
- No `prefers-color-scheme: dark` blocks (0) — light-only; the `data-theme` attribute is Chakra plumbing, not a real dark theme. No container queries.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` · Text `#000000` / `#1e002f` · Muted `#52525d` · Accent `#8d0de3` · Warm surface `#f3efe6`
- Font: Nu Sans (Inter stand-in) · Body: 24px / 500 · Radius: 999px pill / 12px card / 8px input · Control height: 48px
- Focus: purple text + `inset 0 0 0 1px #8d0de3` · Disabled: `rgba(141,13,227,.2)` · Hover fill: purple keeps

<nubank-marketing_design_language>
Use the Nubank marketing design language: warm Latin-American consumer-bank maximalism, white and cream `#f3efe6` canvas, one saturated brand purple `#8d0de3` ("roxinho") doing everything — logo, CTAs, giant headings, links, progress bars — with `#1e002f` deep-purple ink and `#52525d` gray labels. Bespoke Nu Sans (use Inter as stand-in): display headings enormous, 112–156px, weight 500–600, tight negative tracking (-1.4 to -3.4px); body copy itself huge at 24px/500. Every button a fully-round `999px` pill (primary purple fill white text h48 pad 0 24px; secondary transparent with a 1px inset purple ring); inputs h56 radius 8px borderless on white, focus border to `#000000`. Cards radius 12px with an inset lilac ring `inset 0 0 0 1px #ecdfff` not a solid border; a `blur(50px)` frosted glass card floats over full-bleed candid photography in the hero, kept legible by dark photo scrims. Near-flat elevation, one soft float shadow `rgba(39,39,42,.08) 0 40px 40px`; house transition `all 0.65s ease`, an 84s partner-logo marquee, carousel progress bars, 3 reduced-motion blocks. Feels: warm, confident, maximal, human. Avoid: a second accent colour, thin display weights or positive tracking, shrinking body below 24px, hairline grids, and square 8px buttons.
</nubank-marketing_design_language>