Nubank

---
version: alpha
name: Nubank-design-analysis
description: Nubank's design language is a bold, minimal fintech interface anchored on the signature purple `#820ad1` against a clean white canvas. The brand is confident and iconoclastic, using a single saturated purple for all brand and primary-action moments, with flat surfaces, crisp typography, and generous whitespace. The tone is modern, direct, and unmistakably Nubank.

colors:
  primary: "#820ad1"
  primary_dark: "#6c08ad"
  primary_light: "#a13ee0"
  accent: "#c1a3f0"
  canvas: "#ffffff"
  surface: "#f5f5f5"
  surface_2: "#eeeeee"
  fg_default: "#1c1c1c"
  fg_muted: "#717171"
  border_default: "#e0e0e0"
  on_primary: "#ffffff"
  danger: "#d93025"
  success: "#188038"
  warning: "#f29900"

typography:
  display-xxl:
    fontFamily: ""Graphik", -apple-system, system-ui, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1px
  display-xl:
    fontFamily: ""Graphik", -apple-system, system-ui, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.75px
  display-lg:
    fontFamily: ""Graphik", -apple-system, system-ui, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.5px
  display-md:
    fontFamily: ""Graphik", -apple-system, system-ui, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.25px
  heading-lg:
    fontFamily: ""Graphik", -apple-system, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0
  heading-md:
    fontFamily: ""Graphik", -apple-system, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0
  heading-sm:
    fontFamily: ""Graphik", -apple-system, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  body-lg:
    fontFamily: ""Graphik", -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-md:
    fontFamily: ""Graphik", -apple-system, system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: ""Graphik", -apple-system, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  caption:
    fontFamily: ""Graphik", -apple-system, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
---

# Design System Inspired by Nubank

## 1. Visual Theme & Atmosphere

Nubank is bold minimalism: a single saturated purple `#820ad1` carries the entire brand across a clean white canvas. There is no clutter — flat surfaces, crisp type, and generous whitespace let the purple do the talking. The tone is confident, direct, and iconoclastic, matching the brand's disruptive identity in Latin American banking.

## 2. Color System

- **Nubank purple** `#820ad1` — logo, primary buttons, links, and every brand moment.
- A softer lavender `#c1a3f0` and lighter `#a13ee0` for tints and gradients.
- Neutrals are pure and flat: `#ffffff` canvas, `#f5f5f5` / `#eeeeee` surfaces, hairlines `#e0e0e0`.
- Text `#1c1c1c` with muted `#717171`; semantic accents for success/danger/warning stay restrained.

## 3. Typography

Graphik (system fallback) with a modern, geometric character. Headlines are bold and tightly tracked; body 16px/1.5. The system uses size and weight confidently, with little need for secondary type treatments.

## 4. Components & Shape

Cards are the signature: large, flat white rectangles with rounded corners (16px) and no heavy shadows. The primary button is a full-radius purple pill. Transaction lists are clean, flat rows with simple category icons. The app uses a purple gradient for hero/onboarding moments, but product surfaces stay white and minimal.

## 5. Layout & Spacing

A mobile-first single-column layout with a bottom tab bar; the card sits prominently at the top. Generous 16-24px spacing and large touch targets keep the interface simple and navigable. Desktop surfaces are centered and uncluttered.

## 6. Motion

Smooth and deliberate: cards expand on tap, transactions animate in, and the purple accent transitions cleanly. Motion is minimal but polished, reinforcing the premium, uncluttered feel.