---
version: alpha
name: Nubank
description: The bank that made purple a category — a single saturated violet (#820ad1) floods buttons, gradients, and chrome while Graphik Medium keeps the type calm and human, banking reimagined as a warm, confident, unmistakably purple consumer brand.

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f4f4f4"           # muted light-gray section bands
  surface-violet: "#e9dff6"    # soft lilac tint blocks, light feature cards

  # Ink / text
  ink: "#000000"               # near-black headings, body
  ink-secondary: "#777777"     # supporting copy, secondary content
  ink-muted: "#a2a2a2"         # captions, carousel inactive, metadata
  on-dark: "#ffffff"           # text on purple and dark surfaces

  # Brand accent — the singular Nubank purple
  primary: "#820ad1"           # the brand purple: primary CTA, chrome, gradient anchor
  primary-hover: "#490b75"     # button/surface hover (deepened violet)
  primary-active: "#320850"    # pressed / active violet
  primary-deep: "#1d042e"      # darkest brand violet, dark sections
  primary-soft: "#aa68ff"      # bright accent violet, highlights
  primary-container: "#ecd9ff" # soft violet pill / badge fills
  on-primary: "#ffffff"

  # Supporting brand violets (used in gradients and accents)
  ultraviolet: "#854bcc"       # gradient mid-stop, ultravioleta brand line
  ultraviolet-soft: "#cdaaf0"  # light ultraviolet accent

  # Link states
  link-hover: "#3e1874"        # was content-linkHover — deepened violet on hover
  link-active: "#17092c"       # was content-linkActive — near-black violet pressed

  # Semantic feedback
  success: "#0c7a3a"           # confirmation green
  warning: "#9b5a00"           # attention amber
  error: "#d01d1c"             # error red

  # Borders
  border: "#d5d4d4"            # hairline dividers, card edges
  border-strong: "#a2a2a2"     # input + secondary-button outlines

  # Shadow tint (opaque approximation for the elevation table)
  shadow-soft: "#000000"       # was rgba(0,0,0,0.1) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Graphik, Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.5px
  display:
    fontFamily: "Graphik, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.4px
  heading:
    fontFamily: "Graphik, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.2px
  heading-sub:
    fontFamily: "Graphik, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0px
  title:
    fontFamily: "Graphik, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0px
  body-large:
    fontFamily: "Graphik, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.44
    letterSpacing: 0px
  body:
    fontFamily: "Graphik, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-strong:
    fontFamily: "Graphik, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button:
    fontFamily: "Graphik, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "Graphik, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.66
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px
  5xl: 96px
  6xl: 128px

rounded:
  sm: 8px
  md: 12px
  lg: 24px
  xl: 32px
  2xl: 48px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 14px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
  button-primary-active:
    backgroundColor: "{colors.primary-active}"
    textColor: "{colors.on-primary}"

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 14px 24px
  button-secondary-hover:
    backgroundColor: "{colors.surface-violet}"
    textColor: "{colors.primary-hover}"

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-violet:
    backgroundColor: "{colors.surface-violet}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 32px
  card-brand:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.xl}"
    padding: 32px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-strong}"
    padding: 16px 24px

  link:
    textColor: "{colors.primary}"
    typography: "{typography.body-strong}"
    padding: 0px
  link-hover:
    textColor: "{colors.link-hover}"
    typography: "{typography.body-strong}"
    padding: 0px

  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary-active}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
---

# Nubank Design System

## Overview

Nubank did something almost no other bank dared: it picked one saturated purple (`{colors.primary}`, the now-iconic `#820ad1`) and bet the entire brand on it. The color is not an accent here — it is the identity. It floods the primary buttons, the navigation chrome, the gradient panels, the card art, even the physical credit card the brand is named for. Where most fintech sites treat their brand hue as a careful highlight, Nubank lets purple dominate, and that maximalism is precisely the point: in a category of blue-and-gray incumbents, owning purple made Nubank instantly recognizable across Latin America.

The counterweight to all that color is the typography. **Graphik** (here surfaced as Graphik Medium) carries every headline and paragraph at a calm weight 500 — a clean, neutral grotesque with none of the heaviness or flourish that would compete with the purple. Headlines like "Seja qual for o seu problema, o Nubank tem uma solução" sit at `{typography.display-hero}` (56px / 500 / -0.5px), confident but never shouting. The type is the quiet, human voice that keeps the saturated brand color from feeling aggressive. It reads as friendly and modern rather than corporate.

The signature visual structure is the **purple-to-violet gradient and the deeply rounded panel**. The navigation and hero zones often carry a gradient from the core purple into a brighter ultraviolet (`{colors.ultraviolet}`, `{colors.primary-soft}`), and content blocks round generously — 24-48px on cards (`{rounded.lg}`–`{rounded.2xl}`), full pills (`{rounded.pill}`) on every button. There's almost no sharp corner in the system. The combination — one dominant purple, calm Graphik type, soft deep-rounded panels — produces a brand that feels approachable and premium at once: a bank that looks like a friendly consumer app, drenched in a color you can't mistake for anyone else.

**Key Characteristics:**
- **One dominant purple** (`{colors.primary}`, `#820ad1`) — the brand floods buttons, chrome, gradients, and card art rather than using it as a sparing accent
- White and light-gray canvas (`{colors.background}`, `{colors.surface}`) lets the purple read at full saturation
- **Graphik Medium at weight 500** for all type (`{typography.display-hero}`) — calm, neutral, human; never competes with the color
- Soft lilac tint blocks (`{colors.surface-violet}`) and purple-to-ultraviolet gradients (`{colors.ultraviolet}`) for hero and feature zones
- Primary CTA is the **brand purple itself** (`{colors.primary}`) — unlike many fintechs, the brand color *is* the button
- **Every button is a full pill** (`{rounded.pill}`); cards round deeply to 24-48px (`{rounded.lg}`–`{rounded.2xl}`)
- A graduated violet scale (hover `{colors.primary-hover}`, active `{colors.primary-active}`, deep `{colors.primary-deep}`) handles interaction states and dark sections
- Lifestyle photography in rounded frames carries the warmth alongside the color
- Restrained semantic palette (`{colors.success}`, `{colors.warning}`, `{colors.error}`) kept far from the brand violet
- Mostly flat layout; separation comes from rounding, color blocks, and the gradient panels rather than heavy shadows

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The base canvas; lets the purple read at full intensity.
- **Light Gray** (`{colors.surface}`): Muted neutral section bands.
- **Soft Lilac** (`{colors.surface-violet}`): Tinted feature blocks and light violet cards — a gentle brand wash without full saturation.

### Ink / Text
- **Black** (`{colors.ink}`): Headings and body copy.
- **Mid Gray** (`{colors.ink-secondary}`): Supporting and secondary copy.
- **Muted Gray** (`{colors.ink-muted}`): Captions, carousel inactive states, and metadata.

### Brand Accent
- **Nubank Purple** (`{colors.primary}`): The identity. Primary CTAs, chrome, gradient anchor, card art — used everywhere, the opposite of a sparing accent.
- **Purple Hover / Active / Deep** (`{colors.primary-hover}`, `{colors.primary-active}`, `{colors.primary-deep}`): The graduated violet scale for interaction states and dark sections.
- **Bright Violet / Container** (`{colors.primary-soft}`, `{colors.primary-container}`): Highlights, gradient brights, and soft pill/badge fills.
- **Ultraviolet** (`{colors.ultraviolet}`, `{colors.ultraviolet-soft}`): The brighter gradient mid-stop and the "Ultravioleta" premium line accent.

### Link & Semantic States
- **Link Hover / Active** (`{colors.link-hover}`, `{colors.link-active}`): Deepened violets for link interaction (originals were content-link tokens, recorded inline).
- **Success / Warning / Error** (`{colors.success}`, `{colors.warning}`, `{colors.error}`): A restrained semantic palette, kept chromatically clear of the brand violet.

### Borders & Shadow Tint
- **Hairline / Strong** (`{colors.border}`, `{colors.border-strong}`): Card edges, dividers, and input outlines.
- **Soft** (`{colors.shadow-soft}`): Opaque stand-in for the low card shadow (original was rgba — flattened for the Google spec).

## Typography

### Font Family
- **Primary**: `Graphik` (surfaced as Graphik Medium) — a clean, neutral grotesque carrying all display and body text. Fallback stack `Inter, -apple-system, system-ui, sans-serif`.
- **Weight strategy**: headings sit at weight 500 (medium); body at 400; emphasis and buttons at 500. The system deliberately avoids heavy 700-800 weights so type never competes with the purple.
- **Tracking**: gentle negative tracking on display sizes (-0.5px at 56px); zero on body.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 56px / 500 / -0.5px — the marquee headline |
| `display` | 48px / 500 / -0.4px — major section titles |
| `heading` | 36px / 500 — feature headings |
| `heading-sub` | 24px / 500 — sub-section headings |
| `title` | 22px / 500 — card titles |
| `body-large` | 18px / 400 — lead paragraphs |
| `body` | 16px / 400 — standard body copy |
| `body-strong` | 16px / 500 — emphasized copy, nav links |
| `button` | 16px / 500 / line-height 1.0 — pill button labels |
| `caption` | 12px / 400 — metadata, helper text, badge text |

### Principles
- **Medium, not bold**: weight 500 is the ceiling for headings — the type stays calm so the purple can dominate.
- **One family, clear weight ladder**: Graphik handles everything; hierarchy comes from size, not from switching faces.
- **Tighten the big, leave the small**: gentle negative tracking on display; zero on body.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px, with a 4px sub-step. Spacing is generous (`{spacing.xl}`–`{spacing.2xl}` is the workhorse for internal padding); major sections separate with `{spacing.4xl}`–`{spacing.6xl}`.

### Grid & Container
- Max content width: ~1200px, centered
- Common pattern: a gradient or photo hero block with a deeply rounded bottom edge, paired with a CPF/sign-up form panel
- Feature sections alternate purple cards, lilac tint blocks, and white cards in 2-3 column grids

### Whitespace Philosophy
- **Color blocks do the structure**: purple and lilac panels segment the page as much as whitespace does
- **Rounded and generous**: big radii plus roomy padding make every block soft and breathable
- **Photography for warmth**: lifestyle imagery in rounded frames balances the saturated color

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, hairline `{colors.border}` only | Section bands, most content |
| Subtle (Level 1) | `0 0 10px` at ~10% black (`{colors.shadow-soft}`) | Resting cards, floating form panels |
| Color Block (Level 2) | No shadow — a filled purple/lilac panel with a deep rounded edge | The structural separation device |
| Focus Ring | 2px purple (`{colors.primary}`) ring on inputs | Form focus |

**Shadow Philosophy**: Nubank barely uses shadows. The page separates itself through color blocks (saturated purple, soft lilac, white) and deep rounding rather than drop shadows. When a shadow does appear, it's a soft, diffuse `0 0 10px` cast under a floating form card. The dimensionality of the site comes from layered color panels with rounded edges — not from elevation.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 8px | Small buttons, tight chips |
| `md` | 12px | Inputs, small cards, list items |
| `lg` | 24px | Cards and panels — the default surface radius |
| `xl` | 32px | Feature cards, brand-color blocks |
| `2xl` | 48px | Hero panels, deep rounded bottom edges |
| `pill` | 9999px | **All primary buttons and tags** |

The radius philosophy is soft and generous. Buttons are full pills, cards round to 24-48px, and hero/section blocks often carry an asymmetric deep round on the bottom edge (e.g. `0 0 48px 48px`). Sharp corners are essentially absent — roundness pairs with the purple to keep the brand approachable.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Brand purple (`{colors.primary}`) fill, white text, full-pill radius. The main CTA ("Quero ser cliente", "Continuar"). Hover deepens to `{colors.primary-hover}`, pressed to `{colors.primary-active}`.
- **`button-secondary`** — White fill, purple text, full pill. Hover fills soft lilac (`{colors.surface-violet}`) and deepens the text.

### Cards
- **`card`** — White surface, 24px radius. The neutral default.
- **`card-violet`** — Soft lilac (`{colors.surface-violet}`) fill, 32px radius — for branded feature blocks that stay light.
- **`card-brand`** — Full brand-purple (`{colors.primary}`) fill, white text, 32px radius — the saturated highlight panel.

### Inputs
- **`input`** — White fill, `{colors.border-strong}` outline, 12px radius. **`input-focus`** swaps to a purple (`{colors.primary}`) focus ring.

### Navigation
- **`nav-bar`** — White (or purple-gradient on the home hero), Graphik weight-500 labels. The Nubank wordmark sits left; a purple pill CTA persists right.

### Links & Badges
- **`link`** — Purple text, weight 500. **`link-hover`** deepens to `{colors.link-hover}`.
- **`badge`** — Soft violet-container fill, deep-violet text, full pill — the category/tag chip.

## Do's and Don'ts

### Do
- Let **purple dominate** (`{colors.primary}`, `#820ad1`) — it's the identity; use it on buttons, chrome, gradients, and full-color panels
- Keep type calm: **Graphik at weight 500** for headings (`{typography.display-hero}`), 400 for body — never heavier
- Make the primary CTA the **brand purple itself** (`{colors.primary}`) — unlike many fintechs, the color is the button
- Round **every button to a full pill** (`{rounded.pill}`); round cards to 24-48px (`{rounded.lg}`–`{rounded.2xl}`)
- Use the graduated violet scale for states: hover `{colors.primary-hover}`, active `{colors.primary-active}`, dark sections `{colors.primary-deep}`
- Use soft lilac (`{colors.surface-violet}`) and purple-to-ultraviolet gradients (`{colors.ultraviolet}`) for hero and feature zones
- Separate the page with color blocks and deep rounding, not heavy shadows
- Keep the semantic palette (`{colors.success}`, `{colors.error}`) chromatically clear of the violet

### Don't
- Don't treat purple as a timid accent — Nubank's confidence is in letting the color dominate
- Don't reach for heavy 700-800 type weights — the calm Graphik medium is what balances the saturated color
- Don't make the primary CTA a neutral black or gray — the brand purple *is* the button
- Don't use sharp corners on buttons — buttons are full pills
- Don't scatter hard drop shadows — separation is color blocks and rounding
- Don't introduce a competing accent hue — the violet family (core purple → ultraviolet) is the whole story
- Don't desaturate the brand purple toward gray-violet — the saturation is the recognition

---

## Responsive Behavior

### Breakpoints
*(The site surfaced 8 breakpoints; the values below are the meaningful stops it behaves to.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column; hero text scales 56px → ~32px; nav collapses to a menu; gradient hero block goes full-width; CTA pill goes full-width |
| Tablet | 640–1023px | Two-column feature rows begin; color blocks and copy sit side by side |
| Desktop | 1024–1279px | Full layout; gradient hero with a sign-up/CPF form panel beside the headline |
| Large | ≥1280px | Max ~1200px container, centered; generous section padding (`{spacing.5xl}`–`{spacing.6xl}`) |

### Touch Targets
- Pill buttons run ~48px tall with `14px 24px` padding — comfortable, thumb-friendly
- Form fields and CPF inputs carry generous padding for mobile entry

### Collapsing Strategy
- **Navigation**: full horizontal nav (often on a purple gradient) → menu toggle on mobile; the purple pill CTA persists
- **Hero**: gradient block + form panel side-by-side → stacked, form below the headline on mobile
- **Type**: display drops from 56px toward ~32px while keeping the medium weight
- **Spacing**: section padding compresses from ~96-128px toward ~48px

### Image Behavior
- Lifestyle imagery stays in rounded frames; deep bottom-edge rounds (e.g. 48px) reduce on small screens
- Color-block panels reflow to full-width stacked sections

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Text: Black (`{colors.ink}`)
- Brand accent: Nubank Purple (`{colors.primary}`, `#820ad1`)
- Secondary text: Mid Gray (`{colors.ink-secondary}`)
- Border: Hairline (`{colors.border}`)
- Primary CTA: **Purple** (`{colors.primary}`) — the brand color *is* the button

### Example Component Prompts

- "Create a hero with a purple-to-ultraviolet gradient (`{colors.primary}` → `{colors.ultraviolet}`) block with a deep rounded bottom edge (`0 0 48px 48px`), a 56px white headline in Graphik weight 500, letter-spacing -0.5px, and a purple pill CTA on white (`{colors.primary}` fill, white text, `{rounded.pill}`)"
- "Build a primary button: brand purple (`{colors.primary}`) fill, white text, full-pill radius (`{rounded.pill}`), `14px 24px` padding, Graphik 16px weight 500 — hover deepens to `{colors.primary-hover}`, pressed to `{colors.primary-active}`"
- "Build a secondary button: white fill, purple (`{colors.primary}`) text, full pill, hover fills soft lilac (`{colors.surface-violet}`)"
- "Create a brand-color feature card: full purple (`{colors.primary}`) fill, white text, `{rounded.xl}` (32px) radius, 32px padding, a 22px weight-500 title and 16px body — the saturated highlight panel"
- "Design a category badge: soft violet-container (`{colors.primary-container}`) fill, deep-violet (`{colors.primary-active}`) text, full pill, 12px caption"

### Iteration Guide

1. Start on white (`{colors.background}`); reach for purple (`{colors.primary}`) and lilac (`{colors.surface-violet}`) panels to structure the page.
2. Let purple dominate. If your design is mostly gray with a purple highlight, you've inverted Nubank — the color should lead.
3. Type stays calm: Graphik weight 500 for headings (`{typography.display-hero}`), 400 for body. If it reads heavy/bold, lighten the weight.
4. The primary CTA is the brand purple itself (`{colors.primary}`), not a neutral. Use the violet scale for hover/active states.
5. Round everything: buttons to `{rounded.pill}`, cards to `{rounded.lg}`–`{rounded.2xl}`, hero blocks with deep bottom-edge rounds.
6. Separate with color blocks and rounding, not heavy shadows — shadows are soft and rare.
7. Keep the whole palette in the violet family (core → ultraviolet); don't add a competing accent hue.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Nubank. Brand names and trademarks belong to their respective owners.