---
title: "Nubank design system"
variant: extended
source: https://nubank.com.br/
captured_at: 2026-10-12
theme: light
industry: fintech
generator: Design DNA (https://four.wiralomi.com/style/nubank-com-br)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Nubank · Design System

> Bold violet meets human-centered finance

**Theme:** light · **Industry:** fintech · **Source:** https://nubank.com.br/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Nubank pairs a vivid violet identity with oversized, friendly typography and people-focused photography. A mostly open white canvas gives way to striking purple and pale-yellow section bands, then closes on a deep-plum information-heavy footer.

## North star

Use oversized, warmly confident type and decisive violet color blocks on a generous white canvas, with people photography providing the human connection.

## Overview

The page uses #ffffff as its spacious canvas, letting vivid Nubank Violet (#8d0de3) carry the strongest brand signals across calls to action, selected controls, and oversized headings. The visual rhythm shifts from full-bleed lifestyle photography into open white product sections, then punctuates the scroll with a saturated purple statement panel, a pale butter section, and a deep-plum footer. Display typography is large, rounded, and tightly tracked; supporting text stays compact and legible. Human photography supplies warmth and scale, while product and editorial cards sit quietly within the layout rather than relying on elaborate ornament. Rounded pills unify buttons and segmented controls. Cream surfaces and pale lilac hairlines soften the contrast, while the darkest plum gives security content and the footer a deliberate visual anchor.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Nubank Violet | `#8d0de3` | `--color-nubank-violet` | brand | Signature purple for primary CTAs, selected pills, and prominent headings or full-width statement bands. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and frequent text color on purple panels and dark imagery. |
| Warm Oat | `#f3efe6` | `--color-warm-oat` | surface | Soft cream product-card surface; also appears as text on the dark-purple security cards. |
| Deep Plum | `#1e002f` | `--color-deep-plum` | brand | Dark nav and text tone, with a strong role as the footer background and an inverse section surface. |
| Shadow Charcoal | `#333333` | `--color-shadow-charcoal` | semantic | Measured only in gradient imagery and overlays; not a defining flat interface color. |
| Lilac Line | `#ecdfff` | `--color-lilac-line` | accent | Fine outlines and inset link treatment that give pill controls a subtle lilac edge. |
| Butter Glow | `#eeedb3` | `--color-butter-glow` | surface | Pale yellow-green band behind the oversized community message. |
| Muted Mauve | `#a599ac` | `--color-muted-mauve` | semantic | Measured in a section gradient transition; not a core flat UI surface. |
| True Black | `#000000` | `--color-true-black` | neutral | Dark text on light form and product surfaces, including the CPF input and card copy. |
| Soft Silver | `#d4d4d8` | `--color-soft-silver` | neutral | Subdued heading or footer text detail; use sparingly against dark surfaces. |
| Powder Lilac | `#e8cff9` | `--color-powder-lilac` | accent | Secondary lavender accent, measured on button elements rather than as a dominant surface. |
| Royal Aubergine | `#5d0599` | `--color-royal-aubergine` | accent | Dark purple fill for security-topic cards inside the brighter violet security section. |
| Orchid Haze | `#cba5fd` | `--color-orchid-haze` | accent | Light purple heading accent for selected highlighted words. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f3efe6` (Warm Oat) · `--color-surface-2` → `#1e002f` (Deep Plum) · `--color-surface-3` → `#eeedb3` (Butter Glow) · `--color-text` → `#8d0de3` (Nubank Violet) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#000000` (True Black) · `--color-border` → `#ecdfff` (Lilac Line) · `--color-accent` → `#8d0de3` (Nubank Violet) · `--color-accent-2` → `#e8cff9` (Powder Lilac) · `--color-accent-3` → `#cba5fd` (Orchid Haze) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#8d0de3` | `#ffffff` | 6.36:1 | AA |
| `#8d0de3` | `#f3efe6` | 5.55:1 | AA |
| `#8d0de3` | `#1e002f` | 3.01:1 | AA-large |
| `#8d0de3` | `#eeedb3` | 5.27:1 | AA |
| `#ffffff` | `#f3efe6` | 1.15:1 | fail |
| `#ffffff` | `#1e002f` | 19.16:1 | AAA |
| `#ffffff` | `#eeedb3` | 1.21:1 | fail |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f3efe6` | 18.3:1 | AAA |
| `#000000` | `#1e002f` | 1.1:1 | fail |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 80%)`
- `linear-gradient(rgba(30, 0, 47, 0), rgba(30, 0, 47, 0.4))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| nuSansDisplay | `--font-display` | webfont | 600, 500, 400 | Display headlines, section titles, and selected navigation or card headings. | Plus Jakarta Sans |
| nuSansText | `--font-body` | webfont | 600, 400, 500 | Body copy, navigation labels, captions, and most button text. | Inter |

- **nuSansDisplay:** Use a rounded, confident display face; measured weights 400–600, with heavy headings and tight negative tracking.
- **nuSansText:** Keep supporting text clean and compact; measured weights 400–600, with sentence case and minimal tracking.

### Type scale — Perfect Fifth (ratio ≈ 1.508, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 156px | 600 | 1.03 | -0.022em | — | nuSansDisplay | Oversized campaign and community messaging. |
| h1 | 112px | 600 | 0.94 | -0.012em | — | nuSansDisplay | Primary hero headline over the lifestyle photograph. |
| h2 | 96px | 600 | 0.94 | -0.009em | — | nuSansDisplay | Major centered statements and section-level headlines. |
| h3 | 72px | 600 | 0.94 | -0.017em | — | nuSansDisplay | Product and editorial section headings. |
| h4 | 34px | 600 | 1.1 | -0.021em | — | nuSansDisplay | Card titles and compact feature headings. |
| body | 20px | 600 | 1.2 | 0 | — | nuSansText | Emphasized supporting copy and key product descriptions. |
| caption | 18px | 400 | 1.4 | 0 | — | nuSansText | Small descriptive text, card details, and helper copy. |
| nav | 16px | 600 | 1.2 | 0 | — | nuSansText | Header links and compact navigation labels. |

OpenType features in use: `"kern"`.

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 12, 16, 24, 32, 40, 48, 80, 88, 120 px.
- Section rhythm 88px · element gap 16px · card padding 40px · max content width 1264px.

A wide, centered desktop composition uses a measured maximum content width of 1264px, with sections alternating between single-column statements, multi-column product cards, and full-bleed media. The page begins with a horizontal navigation bar over a full-width hero, followed by large areas of white space. Section transitions are deliberate: centered purple headline panel, open product content, then a compact four-card security grid. The measured spacing system is based on an 8px unit, with comfortable section and card gaps. Footer columns become denser while maintaining clear alignment.

## Shape & elevation

- Radius: button `9999px` · input `8px` · card `16px` · media `24px` · nav `9999px` · link `9999px` · xs `12px` · sm `16px` · pill `9999px`
- Shadow `inset` (link): `rgb(236, 223, 255) 0px 0px 0px 1px inset`
- Shadow `inset-2` (nav): `rgb(141, 13, 227) 0px 0px 0px 1px inset`

The interface is mostly flat: strong color bands, white space, and rounded surfaces establish hierarchy instead of heavy shadows. Card corners are softly rounded, with larger rounding for media and pill-shaped buttons and navigation. Use fine lilac borders or inset outlines for selected controls and links; reserve dark overlays for text readability on imagery.

## Imagery

Lifestyle photography is the hero’s defining visual, cropped edge to edge with the headline layered over the darker left side and the signup form positioned on the right. Later sections include editorial imagery in cards and small photos embedded in a large community statement. Imagery feels candid and human rather than product-render driven. Gradient overlays help preserve legibility on photographic cards; the measured screenshot palette includes photo colors that should not be treated as brand colors.

## Components

### Top navigation

White horizontal header with the Nu mark, compact dark labels, search icon, outlined business login pill, and a solid violet signup pill.

### Hero signup form

Layer a large white headline over full-bleed lifestyle photography; place a rounded light form panel at right with CPF input and a violet Continue button.

### Segmented product selector

A pill-shaped outlined control with compact options and a solid violet fill for the active item.

### Product cards

Use rounded cream cards with ample inset space, restrained dark copy, and small violet links; selected dark-purple cards use cream text.

### Editorial content cards

Image-led cards place white text near the bottom over a dark gradient, with a compact outlined pill link.

### Security feature grid

A bright violet section pairs a concise introduction with four dark aubergine rounded cards and circular violet arrow controls.

### Footer

Deep-plum closing section with a large white headline above multiple compact link columns and social icons.

### Measured component styles

- **Primary button** (“Nubank”): background #8d0de3 · text #ffffff · radius 999px · padding 0px · 400 16px nuSansDisplay
- **Link** (“Política de privacidade”): transparent background · text #ffffff · radius 0px · padding 0px · 600 20px nuSansText
- **Input**: transparent background · text #000000 · border 2px solid · radius 8px · padding 16px 40px 0px 20px · 400 18px nuSansText
- **Card** (“Guarde dinheiro de maneira organizada de”): background #f3efe6 · text #000000 · radius 16px · padding 40px 48px 24px 48px · 400 16px nuSansDisplay
- **Navigation item** (“Para você Para seu negócio Segurança Sai”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px nuSansDisplay

## Do

- Use Nubank Violet (#8d0de3) for the main action and decisive visual accents.
- Keep broad white areas between major content moments.
- Use oversized, tightly tracked display type for campaign headlines.
- Place people-focused photography prominently and crop it confidently.
- Use pill shapes for CTAs and segmented selectors.
- Switch to Deep Plum (#1e002f) for a strong footer or inverse surface.

## Don't

- Do not make every section purple; preserve the white canvas rhythm.
- Do not use heavy shadows to create hierarchy.
- Do not treat photographic colors as part of the core brand palette.
- Do not crowd large headlines with dense supporting copy.
- Do not replace the rounded controls with sharp rectangular buttons.
- Do not use gradients as a substitute for clear text contrast.

## Agent prompt

Build a new Nubank-style fintech page with Gallery White (#ffffff) as the open canvas and Nubank Violet (#8d0de3) as the unmistakable CTA and headline accent. Use Deep Plum (#1e002f) for a grounded inverse section, Warm Oat (#f3efe6) for soft cards, and Butter Glow (#eeedb3) only as a selective campaign band. Pair a rounded, bold display face with a clean sans-serif for navigation and body copy. Create a clear vertical rhythm: confident image-led hero, generous white product content, one or two saturated statement sections, and a structured dark footer. Favor candid human photography, pill-shaped controls, subtle Lilac Line (#ecdfff) borders, and restrained elevation. Keep copy and controls legible over images; do not let decorative gradients or photo colors redefine the brand palette.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Header above full-bleed photographic hero; headline left, CPF signup panel right. | CPF lead capture, primary signup CTA, search and account links | white navigation bar, large white display headline, rounded form panel, violet pill button |
| 2 | category-nav | Centered headline in a single-column white section. | introduces product families, sets context for selector | centered violet heading, generous white space |
| 3 | product-grid | Four product categories arranged in a horizontal grid. | segmented product selector, individual product links | compact pill selector, open card layout, violet product titles |
| 4 | other | Single centered headline on a bold full-width violet band. | creates a visual pause, introduces card content | solid violet section, large centered white type |
| 5 | product-detail | Open white product section with left-aligned copy and media area. | product benefits, learn-more CTA | dark heading, compact description, rounded violet button |
| 6 | feature-grid | Four-column feature area with a selector and image-supported cards. | switch between feature groups, discover individual services | pill category control, rounded cream cards, violet accents |
| 7 | content-feed | Left-aligned introduction beside a horizontal editorial card row. | blog CTA, carousel navigation, article links | image-backed cards, dark bottom gradients, outlined link pills |
| 8 | feature-grid | Bright violet section with introductory copy above four cards. | security resource navigation, support channel discovery | white section heading, dark aubergine cards, circular arrow buttons |
| 9 | cta | Full-width pale-yellow band with oversized repeating text and inset photos. | community social proof, signup CTA | Butter Glow background, large violet typography, small embedded images |
| 10 | footer | Deep-plum footer with a large heading, four link columns, and social links. | grouped site navigation, contact and support access, social discovery | large white heading, compact link lists, multicolumn layout |

## Source CSS custom properties (selected)

```css
--chakra-ring-offset-color: #fff;
--chakra-ring-color: rgba(66, 153, 225, 0.6);
--chakra-ring-offset-shadow: 0 0 #0000;
--chakra-ring-shadow: 0 0 #0000;
--chakra-space-x-reverse: 0;
--chakra-space-y-reverse: 0;
--colors-neutrals-black: #000000;
--colors-neutrals-almostBlack: #0D0D0D;
--colors-neutrals-gray100: #F7F3F8;
--colors-neutrals-gray70: #777777;
--colors-neutrals-darkGray: #27272A;
--colors-neutrals-stone: #52525D;
--colors-neutrals-midGray: #8F8F9A;
--colors-neutrals-lightGray: #AEAEB9;
--colors-neutrals-almostWhite: #D4D4D8;
--colors-neutrals-platinum: #E4E4E4;
--colors-neutrals-offWhite: #F4F4F5;
--colors-neutrals-white: #FFFFFF;
--colors-neutrals-white60: rgba(255, 255, 255, 0.60);
--colors-neutrals-white30: rgba(255, 255, 255, 0.30);
--colors-neutrals-white20: rgba(255, 255, 255, 0.20);
--colors-neutrals-white0: rgba(255, 255, 255, 0.0);
--colors-neutrals-gray50: rgba(202, 202, 202, 0.50);
--colors-neutrals-gray30: rgba(202, 202, 202, 0.30);
--colors-neutrals-black10: rgba(0, 0, 0, 0.10);
--colors-neutrals-shadowTint4: rgba(31, 2, 48, 0.04);
--colors-neutrals-shadowTint8: rgba(31, 2, 48, 0.08);
--colors-secondary-orange-P: #FDEBDE;
--colors-secondary-orange-S1: #F8DCC6;
--colors-secondary-orange-S2: #2A1800;
--colors-secondary-amber-P: #F3EFE6;
--colors-secondary-amber-S1: #F4E3C1;
--colors-secondary-amber-S2: #EFD49C;
--colors-secondary-amber-S3: #ECC57C;
--colors-secondary-sand-P: #F3EFE6;
--colors-secondary-sand-S1: #E5D8BD;
--colors-secondary-sand-S2: #BAAA87;
--colors-secondary-spot-yellow: #EEEDB3;
--colors-secondary-spot-green: #A7D296;
--colors-secondary-spot-teal: #85D1BD;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/nubank-com-br