XP Investimentos

Overview

XP Investimentos is Brazil's leading fintech investment platform, serving millions of users who demand both sophisticated financial tools and frictionless digital experiences. The design system embodies 'High-Contrast Minimalism'—a deliberate aesthetic that pairs near-black surfaces (#0a0a0a, #1f1f1f) with pure whites and a signature golden accent (#fbc105) to convey financial confidence, accessibility, and premium positioning. The brand personality is direct, trustworthy, and energetic: it speaks to users as equals, never condescending, and celebrates financial empowerment with clarity and precision.

The voice is conversational yet authoritative. XP uses active verbs, concrete numbers, and action-oriented language. Example: 'Controle todo seu dinheiro pelo aplicativo' (Control all your money through the app) or 'Abra sua conta em minutos' (Open your account in minutes). The tone avoids jargon when possible, but when technical terms are necessary, they are explained inline. Every interaction—from button states to form validation—reinforces the brand's promise: financial management made simple, fast, and trustworthy.

Colors

The XP color system is built on extreme contrast and strategic accent deployment. The surface stack uses near-black tones (#0a0a0a for base, #1f1f1f for containers, #333333 for highest elevation) to create a premium, focused environment that minimizes visual noise and maximizes readability. All text on these surfaces is pure white (#ffffff) or off-white (#f0f0f0), ensuring WCAG AAA compliance (contrast ratio ≥7:1) and reducing eye strain during extended use.

The primary accent is the signature golden yellow (#fbc105), used exclusively for Call-To-Action buttons, active menu states, focus indicators, and brand-critical interactive elements. This color appears in approximately 33% of the page's interactive elements, making it the visual anchor that guides user attention. On hover, the prima

Typography

The XP type system uses the proprietary XP Lighthouse family (a custom sans-serif optimized for digital screens) paired with XP Regular, XP Medium, and XP Bold weights. The hierarchy spans eight levels: Display (60px, 700 weight) for hero statements; Headline-lg (40px, 600 weight) for section titles; Headline-md (28px, 600 weight) for subsections; Title-lg (20px, 600 weight) for card headers; Body-lg (18px, 400 weight) for long-form content; Body-md (16px, 400 weight) for standard body text; Label-md (14px, 600 weight) for buttons and interactive labels; and Label-sm (12px, 500 weight) for metadata and small UI text.

Letter-spacing is conservative: -0.04em on display text to create visual tightness and authority, -0.02em on headlines for elegance, and 0.01–0.05em on labels to improve legi

Layout

The XP layout system uses a 12-column responsive grid with a maximum container width of 1280px (set via CSS custom properties: --azmq-breakpoint-large). The grid is fluid below 1024px and fixed above, allowing the design to adapt gracefully from mobile (320px) through tablet (768px) to desktop (1440px+). Horizontal padding scales with breakpoints: 24px on mobile, 30px on tablet, and 120px on desktop (1440px+), creating a breathing room that increases with screen size.

The spacing scale uses an 8px base unit (--unit: 8px) with semantic tokens: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for section separation and card padding, lg (40px) for major section breaks, and xl (64px) for hero spacing. Vertical rhythm is maintained by using multiples of 8px for margi

Elevation & Depth

XP uses a shadow-based elevation system to convey depth and hierarchy without relying on color shifts or borders. The system defines three levels: Level 1 (sm shadow: 0 1px 2px rgba(0, 0, 0, 0.12)) for subtle depth on interactive elements like buttons and list items; Level 2 (md shadow: 0 4px 12px rgba(0, 0, 0, 0.16)) for cards, modals, and floating UI; and Level 3 (lg shadow: 0 16px 40px rgba(0, 0, 0, 0.24)) for hero sections and prominent overlays. Shadows use a consistent blur radius (1–16px) and spread (0px) to create a soft, diffused effect that feels natural and modern.

On dark surfaces

Shapes

XP employs 'Architectural Precision'—a shape philosophy that favors sharp, geometric corners with minimal rounding, reflecting the brand's technical sophistication and financial authority. The rounded scale uses: sm (0.25rem / 4px) for small UI elements like badges and micro-buttons; DEFAULT (0.5rem / 8px) for input fields and small cards; md (0.75rem / 12px) for list items and secondary containers; lg (1rem / 16px) for primary buttons and standard cards; xl (1.5rem / 24px) for modals and hero sections; and full (9999px) for pill-shaped buttons and circular avatars.

Buttons use lg rounding (1

Components

Action Elements Buttons are the primary interaction mechanism and use the full-height 48px standard (padding: 12px 24px, height: 48px) to ensure touch-friendly targets on mobile. Primary buttons use {colors.primary} (#fbc105) with {colors.on-primary} text (#0a0a0a), rounded to {rounded.lg} (16px). On hover, the background shifts to {colors.primary-fixed-dim} (#e0ad00) with a 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) transition. Secondary buttons are transparent with a 1px border at {colors.primary}, inverting on hover (background becomes {colors.primary}, text becomes {colors.on-primary}). Ghost buttons are transparent with no border, used for tertiary actions; they receive a {colors.surface-container-high} background on hover. All buttons use {typography.label-md} (14px, 600 weight) for

Do's and Don'ts

**Do**

• Do use {colors.primary} (#fbc105) exclusively for primary CTAs, active states, and focus indicators—this is the brand's signature accent and should never be diluted or overused.
• Do maintain the 8px spacing grid rigorously; all margins and padding should be multiples of 8px (4px, 12px, 24px, 40px, 64px) to ensure visual rhythm and alignment.
• Do apply Level 1 shadows (0 1px 2px rgba(0, 0, 0, 0.12)) to interactive elements and Level 2 shadows (0 4px 12px rgba(0, 0, 0, 0.16)) to cards and modals for consistent depth hierarchy.
• Do use XP Lighthouse for all headings and interactive labels; reserve XP Regular for body text and XP Medium for button labels to maintain typographic hierarchy.
• Do ensure all text on dark surfaces (#0a0a0a, #1f1f1f) meets WCAG AAA contrast (≥7:1); use pure white (#ffffff) or off-white (#f0f0f0) for maximum legibility.

**Don't**

• Don't use colors outside the defined palette; avoid gradients, custom accent colors, or brand-adjacent hues—the system's power lies in its constraint and consistency.
• Don't round corners beyond {rounded.xl} (24px) on standard components; excessive rounding softens the brand's technical authority and breaks the Architectural Precision philosophy.
• Don't apply shadows with blur radius >16px or spread >0px; this creates a diffused, unfocused appearance that contradicts the brand's precision and clarity.
• Don't use font weights outside the defined set (400, 500, 600, 700); mixing weights creates visual chaos and dilutes the hierarchy signal.
• Don't nest interactive elements (buttons within buttons, links within links) or use multiple primary CTAs on a single page—this violates the brand's clarity-first principle and confuses users about the intended action.