A Latin-American consumer-bank storefront that is the loud, warm inverse of the library’s restrained US and EU fintech — where Mercury, Ramp, Brex, Wise and Plaid trade in grey and one quiet blue, Nubank hands the entire brand to a single saturated purple, the “roxinho” #8d0de3, and lets it own everything colour is allowed to touch: the nu logo mark, every CTA, giant section headings, links and carousel progress bars. Built on Chakra UI, the page reads as candid full-bleed photography of real people plus enormous type plus one purple, never a UI grid. Type is the loudest voice: a bespoke humanist Nu Sans set gigantic — hero display at 112/100.8 weight 500 and section headings running 112 to 156px with tracking tightening as size grows, from -1.4px to -3.4px — over body copy that is itself display-sized at 24px/500, so nothing on the page reads small. The signature moment is a frosted glass card floating over the hero photo (backdrop-filter blur 50px, radius 24px, one soft float shadow rgba(39,39,42,.08) 0 40px 40px) holding a CPF field and a purple pill CTA. Every button is a fully-round 999px pill at 48px: primary a solid purple fill, secondary a 1px inset purple ring that keeps its ring on hover, disabled dropping to purple at 20% opacity. Cards use a 12px radius with an inset lilac ring #ecdfff instead of a solid border, inputs are 56px borderless on white that darken their border to black on focus, and warm cream #f3efe6 and pale-yellow #eeedb3 bands soften the maximalism between white and full-purple sections. Motion is a house all-0.65s-ease transition with slow 1.6s fades, an 84s partner-logo marquee and three reduced-motion blocks; there is no WebGL, the atmosphere is photography and dark scrims, not generative.
⚠ needs-dashboard
Browse Nubank in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: nubank.com.br (live DOM, computed styles), 2026-07-29 (desktop 1512px). Portuguese homepage; Chakra-UI runtime (emotioncss-*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 fixednumark in a purple rounded square, not a fluid logotype. One accent does everything: purple#8d0de3.
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.
| 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%) |
| 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.
nuSansDisplay (bespoke Nu Sans Display). Body / UI: nuSansText. Icons: nubankIcons.| 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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.