Nubank Violet
#820ad1Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Somos incansáveis pra você não precisar ser | Nubank
nubank.com.brWebsite preview
The design language
Nubank operates on a radical one-accent system: a white porcelain canvas, black ink typography, and a single vivid violet that functions as the only chromatic note in the entire interface. The visual grammar is built on pill shapes — buttons, inputs, and links all curve into 999px capsules, giving the system a soft, rounded, approachable personality that softens the severity of high-contrast black-on-white. Typography carries the authority: a custom geometric sans (Graphik) at weights 400-500 with aggressive negative tracking, creating tight, composed headlines that whisper rather than shout. The page breathes — generous 8px-based spacing, large display sizes (up to 56px), and dark photo sections that contrast with otherwise luminous white surfaces. Every interaction surface is a pill, every accent is violet, and every screen feels like a single page from a meticulously typeset magazine.
Color palette
brand
Deep Iris
#290b4dViolet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Dusty Violet
#714f8fSubtle violet washes, disabled violet states, muted brand backgrounds
neutral
Ink
#000000Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color
Snow
#ffffffCard surfaces, input fills, text on dark backgrounds, page sections over the mist base
Mist
#f4f4f4Page canvas, subtle section backgrounds, input field fills — the porcelain tone that defines the overall light theme
Stone
#a2a2a2Secondary text, helper labels, placeholder text, icon strokes at rest
Concrete
#b3b3b3Hairline borders, dividers, subtle UI separators
Smoke
#777777Tertiary text, footer secondary lines, metadata
Graphite
#666666Mid-neutral fills, muted backgrounds for nested sections
Typography
Type scale
Major Second (1.125) · 16px basedisplay
56px · 500 · 1.1 · -1.68px trackingThe quick brown fox jumps
heading
48px · 500 · 1.1 · -0.96px trackingThe quick brown fox jumps
heading-sm
36px · 500 · 1.2 · -0.648px trackingThe quick brown fox jumps
subheading
24px · 500 · 1.3 · -0.24px trackingThe quick brown fox jumps
text-22
22px · 500 · 1.3The quick brown fox jumps
body-lg
20px · 400 · 1.44 · -0.2px trackingThe quick brown fox jumps
body
18px · 400 · 1.5 · -0.18px trackingThe quick brown fox jumps
body-sm
16px · 400 · 1.5 · -0.16px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Graphik
- Weights
- 400, 500
- Sizes
- 12, 14, 16, 18, 20, 22, 24, 36, 48, 56
- Line height
- 1.0–2.8 (tight for display, generous for body)
- Letter spacing
- -0.0300em at 56px display → -0.0100em at body 16px (tightens as size increases)
- Fallback
- Inter, Geist, Manrope
- Features
- "kern" — kerning is always on across all weights and sizes
All interface text — headings, body, buttons, inputs, navigation. The custom geometric sans with weights limited to 400-500 is deliberate: no bold ever appears, so weight contrast is replaced by size contrast, creating a system that whispers through scale rather than shouts through heaviness.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1200px
- Section gap
- 64px
- Card padding
- 24-32px
- Element gap
- 16-24px
Border radius
tags
999pxcards
24pximages
32pxinputs
24pxbuttons
999pxsmallButtons
8pxSpacing scale
1px4px6px8px16px18px20px24px28px32px40px48px64px80px112px120pxGuidelines
Do
- Use the 999px pill radius for every button, input, and tag — rectangular buttons break the brand
- Apply Nubank Violet (#820ad1) as the only chromatic accent in any view; never introduce a second hue
- Set letter-spacing to -0.0100em or tighter on all text; positive tracking would destroy the composed feel
- Use Graphik weight 400 for body and 500 for emphasis; never use bold (700) — the system doesn't have it
- Float white cards on the mist (#f4f4f4) canvas with 24-32px padding to create depth without shadows
- Keep dark image sections full-bleed; let them break the 1200px container for visual punctuation
- Size display headlines at 48-56px with line-height 1.10 to match the magazine-like editorial scale
Don’t
- Don't add drop shadows, elevation, or glow effects — Nubank uses surface contrast only
- Don't use sharp corners on interactive elements; the pill is the brand's most recognizable shape
- Don't introduce a second accent color or background tint beyond violet, white, mist, and black
- Don't use bold or extra-bold weights; the type system stops at 500 and relies on size for hierarchy
- Don't put violet fills on large background areas — violet is for actions and small accents only
- Don't use positive letter-spacing; all text should feel optically tightened
- Don't mix icon styles; use a single stroke-based icon family at 1.5-2px weight
Components
Primary Violet Pill Button
Main call-to-action across the siteFilled violet (#820ad1) pill with white text at 16px weight 500. Radius 999px, horizontal padding 24px, vertical padding 12-16px. Carries an arrow icon for directional actions. The rounded capsule form is signature — Nubank has no rectangular buttons.
Ghost Dark Pill Button
Secondary action on dark/image backgroundsDark semi-transparent fill (#000000 or rgba 0,0,0,0.5) with white text, radius 999px. Used as 'Saiba mais' over product card images. Always pill-shaped, never rectangular.
Small Radius Button
Compact inline action8px radius variant of the pill system for compact spaces. Violet fill with white text. Used where the full pill is too wide.
Product Hero Card
Full-bleed hero with overlaid formDark photographic background spanning full viewport width, with large white display text (48-56px) at left and a floating white card (#ffffff) at right containing a heading, input field, and violet CTA. The card has radius 24px and 32px padding. This pairing of dark image + floating white form is Nubank's signature hero pattern.
Product Carousel Card
Showcase card in a 3-card carouselRounded image card (32px radius) with a photo fill, centered white product name overlaid (24px weight 500), and a ghost dark pill button ('Saiba mais') at the bottom. Cards overlap slightly in the carousel. Height approximately 400px, aspect ratio roughly 3:4.
Pill Input Field
Text input for forms (CPF, email, etc.)Rounded input with 24px radius, light gray fill (#f4f4f4), placeholder text in Stone (#a2a2a2), body text 16px. No visible border by default. Feels soft and approachable rather than clinical.
Navigation Bar
Top-level site navigationLight mist (#f4f4f4) background, Nubank 'nu' logo in violet at far left, horizontal nav items in black (16px weight 500) with dropdown carets, search icon, a ghost outlined 'Login Empresas' button, and a filled violet 'Quero ser Nubank' pill button at far right. No heavy borders — sits cleanly on the canvas.
Dark Footer
Site-wide footer with links and contactFull-width black (#000000) background, white text links in a 4-column grid, social icons in a row, legal copy at bottom in small Stone-toned text. Section headings in white weight 500, phone numbers in white. The dark surface is the visual counterweight to the light page.
Inline Text Link
Hyperlink within body textViolet (#820ad1) text, no underline at rest, underline on hover. Weight matches surrounding text. Sits naturally in body copy without visual weight change.
Surfaces & elevation
Level 0
Mist Canvas
#f4f4f4Base page background — the porcelain surface everything floats on
Level 1
Snow Card
#ffffffProduct cards, form cards, input fields — lifted off the mist canvas
Level 2
Ink Surface
#000000Dark hero image overlays, full-dark footer — dramatic contrast sections
Nubank avoids drop shadows entirely. Depth is communicated through surface contrast — white cards float on mist canvas, dark images anchor sections. The pill geometry and generous spacing do the work that shadows would do in a conventional system.
Layout & imagery
Layout
Max-width 1200px centered container, but hero sections and footer are full-bleed. The hero pattern is consistently: dark full-viewport image left, floating white form card right. Below the fold, the rhythm alternates between white sections and the carousel of product image cards. Section spacing is generous (64px gaps) creating room to breathe. Navigation is a minimal top bar — no sidebar, no mega-menu, just horizontal links with caret indicators. The overall flow is: full-bleed dark hero → white product showcase → more white content sections → full-bleed dark footer.
Imagery
Photography dominates: large full-bleed aerial and lifestyle photos anchor hero sections and product cards. The stadium hero shot (aerial drone view of a branded arena) is editorial in scale. Product carousel cards use intimate lifestyle photography — people in natural moments (laughing, swimming, working). All photos are treated with full-bleed framing inside 32px-radius masks. No illustrations, no abstract graphics, no 3D renders. The photography is bright, warm-toned, and human — the opposite of clinical fintech imagery.
Design notes
Agent Guide
**Quick Color Reference** - background: #f4f4f4 (Mist canvas) - surface: #ffffff (Snow cards) - text: #000000 (Ink primary) - muted text: #a2a2a2 (Stone) - border: #b3b3b3 (Concrete) - accent: #820ad1 (Nubank Violet) - primary action: no distinct CTA color **3-5 Example Component Prompts** No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 2. *Create a product carousel card*: 32px-radius image container with a full-bleed lifestyle photo. Centered white product name at 24px Graphik weight 500. Ghost dark pill button ('Saiba mais') at the bottom — #000000 semi-transparent fill, white text, 999px radius, 12px vertical padding. 3. *Create the top navigation*: Mist (#f4f4f4) background bar, Nubank 'nu' logo in #820ad1 at far left, horizontal nav items in #000000 at 16px Graphik weight 500 with dropdown carets, a ghost outlined 'Login' button (1px #000000 border, 999px radius, 16px 24px padding), and a filled violet 'Quero ser Nubank' pill button (#820ad1, white text, 999px radius) at far right. 4. *Create the dark footer*: Full-width #000000 background. Four-column grid of white text links at 16px Graphik weight 400. Column headings in white weight 500. Social icon row (LinkedIn, YouTube, Facebook, Instagram, X) in white. Legal copy at bottom in #a2a2a2 at 12px. 5. *Create an inline violet link within body text*: #820ad1 color, 18px Graphik weight 400, no underline at rest, underline on hover. Should sit within a paragraph of #000000 body copy on the #f4f4f4 canvas.
Type System Philosophy
Nubank's type system is defined by restraint: weights stop at 500, letter-spacing is always negative, and hierarchy comes from scale jumps (18→24→36→48→56). The 2.25x ratio between body and display creates magazine-level contrast. The 'kern' feature setting is always on, optimizing the tight letter-spacing pairs. This produces text that feels composed and intentional — like a financial publication, not a tech startup.
Similar brands
Revolut
Same pill-button language and single-accent-on-light-canvas approach, though Revolut uses black as its dominant accent rather than violet
Monzo
Similar rounded-soft component geometry and clean light surfaces, though Monzo leans more colorful with coral and yellow
Wise (TransferWise)
Same white-canvas-plus-one-bold-accent strategy, with generous spacing and confident display typography
Klarna
Shares the pill-button system and light background with single accent color (pink for Klarna vs violet for Nubank)
Cash App
Same commitment to a single brand color as the only chromatic note in the interface, with clean white surfaces
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
