Finance / iOS / Android / Web

Nubank

Nubank makes its purple the surface, not the accent, and talks in huge tight headlines over purple, aubergine and cream sections.

Download
  • #8D0DE3
  • #5D0599
  • #1E002F
  • #F3EFE6
  • #EEEDB3
  • #FFFFFF

Color

Every color token in the file, grouped by role.

Brand

  • primary#8D0DE3
  • on primary#FFFFFF

Surfaces

  • canvas#FFFFFF

Text

  • on aubergine#F3EFE6
  • ink#000000
  • ink faint#D4D4D8

More

  • purple deep#5D0599
  • aubergine#1E002F
  • cream#F3EFE6
  • lime#EEEDB3
  • lavender#ECDFFF

Typography

Each style is set with the file's own family, size, weight and spacing.

  • nuSansDisplaynuSansDisplay is private and not available in open fonts. Shown in Figtree, the closest open match.
  • nuSansTextnuSansText is private and not available in open fonts. Shown in Albert Sans, the closest open match.
  • display156px / 600 / 156px

    Nubank

  • headline112px / 600 / 105.3px

    Nubank

  • title72px / 600 / 67.7px

    Nubank

  • subtitle36px / 600 / 33.8px

    Nubank

  • lead22px / 600 / 26.4px

    Pack my box with five dozen liquor jugs

  • body18px / 400 / 25.2px

    The quick brown fox jumps over the lazy dog

  • button16px / 600 / 19.2px

    Continue to checkout

Shape

Corner radius tokens.

  • sm8px
  • md12px
  • lg16px
  • xl24px
  • pill999px

Spacing

The spacing scale, drawn to size.

  • sm8px
  • md16px
  • base20px
  • lg24px
  • xl32px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button large
    button-large
  • input
    input
  • aubergine band
    aubergine-band
  • cream card
    cream-card
  • purple band
    purple-band
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 114 lines
version: alpha
name: Nubank-design-analysis
description: "A Latin American digital bank in Nubank purple (#8d0de3) with deep aubergine (#1e002f), warm cream (#f3efe6) and a pale lime band, huge tight nuSans Display headlines at 600, nuSans Text for interface copy, purple pill buttons and 12px cards."
status: Draft
appVersion: "measured in a browser, 2026-10-15"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#8d0de3"
  on-primary: "#ffffff"
  purple-deep: "#5d0599"
  aubergine: "#1e002f"
  on-aubergine: "#f3efe6"
  cream: "#f3efe6"
  lime: "#eeedb3"
  lavender: "#ecdfff"
  ink: "#000000"
  ink-faint: "#d4d4d8"
  canvas: "#ffffff"

typography:
  # Font note: "nuSansDisplay" is a private font and is not available in open fonts. Closest open alternative: "Figtree".
  # Font note: "nuSansText" is a private font and is not available in open fonts. Closest open alternative: "Albert Sans".
  display:
    fontFamily: "nuSansDisplay, Arial, Helvetica, sans-serif"
    fontSize: 156px
    fontWeight: 600
    lineHeight: 156px
    letterSpacing: -3.4px
  headline:
    fontFamily: "nuSansDisplay, Arial, Helvetica, sans-serif"
    fontSize: 112px
    fontWeight: 600
    lineHeight: 105.3px
    letterSpacing: -1.4px
  title:
    fontFamily: "nuSansDisplay, Arial, Helvetica, sans-serif"
    fontSize: 72px
    fontWeight: 600
    lineHeight: 67.7px
    letterSpacing: -1.2px
  subtitle:
    fontFamily: "nuSansDisplay, Arial, Helvetica, sans-serif"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 33.8px
    letterSpacing: -0.72px
  lead:
    fontFamily: "nuSansText, Arial, Helvetica, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 26.4px
  body:
    fontFamily: "nuSansText, Arial, Helvetica, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 25.2px
  button:
    fontFamily: "nuSansText, Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 19.2px

rounded:
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  pill: 999px

spacing:
  sm: 8px
  md: 16px
  base: 20px
  lg: 24px
  xl: 32px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: 48px
    padding: 0 24px
  button-large:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.lead}"
    rounded: "{rounded.pill}"
    height: 56px
    padding: 0 28px
  input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    height: 56px
    padding: 16px 40px 0 20px
  aubergine-band:
    backgroundColor: "{colors.aubergine}"
    textColor: "{colors.on-aubergine}"
    typography: "{typography.title}"
  cream-card:
    backgroundColor: "{colors.cream}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
  purple-band:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.display}"

Overview

Nubank is a digital bank in Brazil, Mexico and Colombia, with accounts, credit cards and investments in one app. Its Brazilian site is set in its own nuSans faces, with whole sections in Nubank purple, deep aubergine and warm cream, very large tight headlines and purple pill buttons. [Observed]

What defines the look:

  1. Nubank purple. #8d0de3 fills the hero, the main buttons and headline words, with a deeper #5d0599 behind it. [Measured]
  2. Aubergine and cream. Dark sections are #1e002f with cream #f3efe6 text, and cream also fills calm cards. A pale lime #eeedb3 band adds contrast. [Measured]
  3. Huge, tight display type. nuSans Display at 600, from 36 up to 156, with line heights at or under the size and negative tracking. [Measured]
  4. Purple pills. Buttons are full pills, 48 and 56 high, with white semibold text. [Measured]
  5. Soft cards and fields. Cards use 12 and 16, fields 8 at 56 high. [Measured]

Source for this file: the Brazilian home page with its sign-up field, the help and security page and the business page, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass. The site is in Portuguese. Nubank does not publish its design system. The app sits behind an account. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Purple#8d0de3Hero, buttons, headline words, mobile links [Measured]
Deep purple#5d0599Sections behind purple [Measured]
Aubergine#1e002fDark sections, nav text [Measured]
Cream#f3efe6Cards, text on aubergine [Measured]
Pale lime#eeedb3A contrast band [Measured]
Lavender#ecdfff, purple at 20 percentOutlines and washes [Measured]
Ink#000000Body text on light [Measured]
Faint#d4d4d8Fine print on dark [Measured]
Canvas#ffffffPage [Measured]

Typography

RoleDesktopMobileFace and weight
Display156 on 156, -3.4px64 on 64nuSans Display 600 [Measured]
Headline112 on 105.28, -1.4px48 on 45.12nuSans Display 600 [Measured]
Title72 on 67.68, -1.2px36 on 33.84nuSans Display 600 [Measured]
Section36 to 48 on 33.84 to 45.12not measurednuSans Display 600 [Measured]
Lead21 to 22 on 26.4 to 29.420 on 24nuSans Text 400 to 600 [Measured]
Body and field18 on 25.216 on 22.4nuSans Text 400 [Measured]
Button and nav16 on 19.2 (20 on 24 for large buttons)16nuSans Text 600 [Measured]

Display line height is 0.94 of the size, and tracking runs from -2 percent at 72px to about -1.2 percent at 112. [Measured]

Shape and spacing

Buttons are pills (999). Cards use 12 (the most frequent corner after pills), 16 and 24, fields 8. [Measured] Buttons carry 24 or 28 side padding. [Measured]

Iconography and motion

Icons come from a Nubank icon font. [Measured] Motion was not measured. [Inferred]

Themes

Light page with fixed purple and aubergine sections. The dark color scheme pass changed nothing. [Measured]

Platform: iOS

How the Nubank iOS app looks and behaves was not captured. Nubank does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Not measured. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A single scrolling home with shortcuts for Pix, payments and the card is expected, rather than many tabs. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A purple pill for Pix or payments. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share the purple, nuSans and pill buttons with the web. [Inferred]

Platform: Android

How the Nubank Android app looks and behaves was not captured. Nubank does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Not measured. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A single scrolling home with shortcuts for Pix, payments and the card is expected, rather than many tabs. [Inferred]

Main action

Expected on Android: Floating action button.

A purple pill for Pix or payments. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share the purple, nuSans and pill buttons with the web. [Inferred]

Platform: Web

The home page, the help and security page and the business page, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A white header with "Para você", "Para seu negócio" and other links in aubergine at 16 semibold, 48 high, and a purple "Quero ser Nubank" pill (48 high, 36 on mobile). [Measured]

Main action

Expected on Web: Page-level button.

A purple #8d0de3 pill with white semibold text, 48 high in the header and 56 high next to the sign-up field ("Continuar"). [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

The sign-up field is 56 high, white, with an 8px corner and a floating label. The help page has quick access tiles on cream, 68 high. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values that step down sharply at the mobile width (156 to 64, 112 to 48). [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons are 48 to 56 high, with a 36 high header pill on mobile. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

A Nubank icon font. [Measured]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Sign-up starts with a single field on the home page. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

A poster-like responsive site where headlines are the hero, and colors fill whole sections rather than accents. [Observed]

Cross-platform consistency

Consistent across platforms: the purple, nuSans and pill buttons. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Fill whole sections with purple, aubergine or cream.
  • Set headlines huge, tight and semibold.
  • Use purple pills for the main action.
  • Put cream text on aubergine, not white.

Don't

  • Don't use purple as a small accent only. It is the brand surface.
  • Don't open up headline leading.
  • Don't use square buttons.

Known Gaps

  • The app, card controls and investments sit behind an account and were not measured.
  • Only the Brazilian site was measured. Mexico and Colombia may differ.
  • The iOS and Android apps were not captured, and Nubank publishes no design system, so every mobile topic is inferred.
  • Motion and modals were not measured.
  • nuSans Display and nuSans Text are private. Figtree (within 1 percent of a 156px headline) and Albert Sans (within 1 percent at 22px semibold) were chosen by comparing the same line side by side. Funnel Sans and Public Sans were close seconds.
  • Account deletion and store policy rules were not verified.