--- 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.1 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 `