--- 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 | Role | Value | Where | |------|-------|-------| | Purple | `#8d0de3` | Hero, buttons, headline words, mobile links [Measured] | | Deep purple | `#5d0599` | Sections behind purple [Measured] | | Aubergine | `#1e002f` | Dark sections, nav text [Measured] | | Cream | `#f3efe6` | Cards, text on aubergine [Measured] | | Pale lime | `#eeedb3` | A contrast band [Measured] | | Lavender | `#ecdfff`, purple at 20 percent | Outlines and washes [Measured] | | Ink | `#000000` | Body text on light [Measured] | | Faint | `#d4d4d8` | Fine print on dark [Measured] | | Canvas | `#ffffff` | Page [Measured] | ### Typography | Role | Desktop | Mobile | Face and weight | |------|---------|--------|-----------------| | Display | 156 on 156, -3.4px | 64 on 64 | nuSans Display 600 [Measured] | | Headline | 112 on 105.28, -1.4px | 48 on 45.12 | nuSans Display 600 [Measured] | | Title | 72 on 67.68, -1.2px | 36 on 33.84 | nuSans Display 600 [Measured] | | Section | 36 to 48 on 33.84 to 45.12 | not measured | nuSans Display 600 [Measured] | | Lead | 21 to 22 on 26.4 to 29.4 | 20 on 24 | nuSans Text 400 to 600 [Measured] | | Body and field | 18 on 25.2 | 16 on 22.4 | nuSans Text 400 [Measured] | | Button and nav | 16 on 19.2 (20 on 24 for large buttons) | 16 | nuSans 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.