Itaú

Overview

Itaú is Brazil's premier retail banking institution, serving millions of customers with financial solutions spanning accounts, credit, investments, and insurance. The design system embodies a philosophy of 'Confident Accessibility'—combining bold, energetic visual language with meticulous attention to clarity and usability. The brand personality is decisive yet approachable: Itaú speaks with authority earned through decades of market leadership, but never talks down to its audience. The UI employs a striking dual-color strategy: a vibrant orange (#FF6200) commands attention on primary actions and key moments, while a deep navy (#000066) provides grounding and trust. The aesthetic is modern-institutional, rejecting both sterile minimalism and unnecessary ornamentation. Every pixel serves a purpose—guiding users toward financial confidence. Example voice: 'Renegociar suas dívidas leva 5 minutos. Comece agora.'

Colors

The Itaú color system operates on a principle of energetic contrast and hierarchical clarity. Primary (#FF6200) is the brand's signature accent—deployed on all primary CTAs ('Abra sua conta', 'Ative já'), interactive states, and moments requiring user attention. It is warm, optimistic, and distinctly Brazilian. Secondary (#000066) serves as the institutional anchor, used for secondary buttons, links, and contexts where trust and formality dominate (account access, security messaging). The surface stack (#f1f2f4 → #ffffff) provides a clean, accessible foundation with sufficient contrast for WCAG AA compliance. Tertiary (#68B631) is reserved for success states, confirmations, and positive financial outcomes. Error (#D32F2F) signals caution and requires immediate attention. All interactive el

Typography

The typography system uses Lato exclusively, a humanist sans-serif that balances geometric clarity with warmth—essential for financial communication that must feel both authoritative and approachable. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements with commanding presence. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) structure content hierarchy, with negative letter-spacing (-0.02em, -0.01em) tightening the visual mass for impact. Body-lg (18px) and body-md (16px) maintain consistent 400 weight for readability at scale; line-height is set to 1.5x font-size (28px and 24px respectively) to ensure comfortable reading on mobile and desktop. Label-md (14px, 600 weight) and label-sm (12px, 500 weight) are reserved for UI labels, fo

Layout

The layout system employs a 12-column grid with a maximum container width of 1280px, providing flexibility across mobile (single column), tablet (4–6 columns), and desktop (full 12 columns). The gutter is fixed at 24px, creating consistent breathing room between grid items. Spacing is semantic and hierarchical: unit (8px) is the baseline; xs (4px) is used for micro-interactions and icon spacing; sm (12px) separates inline elements and form fields; md (24px) is the default section padding and card spacing; lg (40px) separates major content blocks; xl (64px) is reserved for hero sections and full-width separations. The page rhythm prioritizes white space as a design tool—sections are never cramped. Hero sections use xl spacing above and below; card grids use md spacing between items. On mobi

Elevation & Depth

Depth in the Itaú system is achieved through a restrained shadow vocabulary that avoids the heavy, diffuse shadows common in older banking UIs. Level 1 (Base) has no shadow—the surface is flat. Level 2 (Standard Card/Hover) uses box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), a tight, focused shadow that lifts the element 4px from the background. Level 3 (Modal/Elevated) uses box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2), creating a more pronounced separation for modals and overlays. Shadows are always black with 20% opacity—never colored—to maintain consistency across light and dark contexts. Focus sta

Shapes

The shape philosophy is 'Functional Softness'—rounded corners are applied strategically to reduce visual harshness without sacrificing clarity or modernity. Buttons use lg (1rem / 16px) border-radius, creating a friendly, approachable form that still reads as a discrete interactive element. Cards and containers use md (0.75rem / 12px) for a subtle softening that doesn't distract. Input fields use DEFAULT (0.5rem / 8px), the smallest radius, to maintain a crisp, form-like appearance. Modals and overlays use xl (1.5rem / 24px) to signal elevation and importance. The full (9999px) radius is reser

Components

Action Elements Buttons are the primary interface for user intent. The button-primary component uses background: {colors.primary} (#FF6200), text: {colors.on-primary} (white), and padding: 12px 24px with height: 48px to meet touch targets (minimum 44px per WCAG). On hover and active states, the background shifts to {colors.on-primary-container} (#E55800), a darker orange that maintains contrast without jarring the user. The transition is instantaneous (no animation) to feel responsive. Button-secondary uses a transparent background with a 1px border in {colors.secondary} (#000066) and text in the same color; on hover, the background fills with {colors.secondary-container} (#E6E6FF) at 10% opacity. Button-ghost is text-only with no border; it becomes visible only on hover when the backg

Do's and Don'ts

**Do**

• Do use primary (#FF6200) exclusively for primary CTAs and moments requiring user action—never dilute its impact by overusing it.
• Do maintain minimum touch targets of 44px × 44px for all interactive elements, including buttons, icon buttons, and list items.
• Do apply consistent 24px gutters and 40px section spacing to create visual rhythm and prevent content from feeling cramped.
• Do use Lato at 16px body-md with 1.5x line-height (24px) for body text to ensure readability on mobile and desktop.
• Do layer shadows (0 4px 8px for cards, 0 8px 18px for modals) to create clear depth hierarchy without visual noise.
• Do use rounded.lg (1rem) on buttons and rounded.md (0.75rem) on cards to balance friendliness with precision.
• Do apply focus states with 3px inset box-shadow in primary-container (rgba(255, 98, 0, 0.1)) for keyboard navigation accessibility.
• Do use secondary (#000066) for secondary buttons, links, and institutional contexts where trust and formality are paramount.

**Don't**

• Don't use primary (#FF6200) on secondary buttons, backgrounds, or decorative elements—reserve it for actions that matter.
• Don't apply rounded corners larger than xl (1.5rem) except on badges and avatars; excessive rounding undermines financial credibility.
• Don't use shadows larger than 0 8px 18px rgba(0, 0, 0, 0.2) or colored shadows; they create visual clutter and reduce clarity.
• Don't set body text smaller than 16px or with line-height less than 1.5x font-size; financial content demands legibility.
• Don't mix typefaces; Lato is the sole typeface family across all contexts.
• Don't use opacity-based color variants (soft, medium, strong) outside the primary and secondary color families; they are not interchangeable.
• Don't apply animations or transitions to shadow or background changes; financial interfaces must feel responsive and snappy.
• Don't use tertiary (#68B631) for anything other than success states and positive confirmations; it is not a general accent color.