Itaú Unibanco — Voxel Design System

---
name: Itaú Unibanco — Voxel Design System
description: >
  Design system do Itaú Unibanco, o maior banco privado do Brasil e um dos maiores
  da América Latina, com 100+ anos de história e 96.300 funcionários. O Voxel é o
  Design System interno — responsivo, acessível e construído como comunidade de design.
  Suporta 63+ componentes, 4 tech stacks, 29 produtos/segmentos e atinge 80% de
  aderência nos repositórios-chave. Tipografia customizada Itaú Display e Itaú Text
  (2017, Dalton Maag + Amanda Carvalho). Rebranding 2024 pelo Pentagram (Michael
  Bierut) introduziu a forma "pedra" e o laranja como cor primária da marca.
colors:
  brand:
    primaryMain: "#EC7000"
    primaryLight: "#FF8C33"
    primaryLightest: "#FFD6A8"
    primaryDark: "#CC6000"
    primaryDarkest: "#993D00"
    secondaryMain: "#003399"
    secondaryLight: "#1A5493"
    secondaryDark: "#002266"
    tertiaryWhite: "#FFFFFF"
  gradient:
    primary: "linear-gradient(135deg, #EC7000, #FF8C33)"
    brand: "linear-gradient(135deg, #EC7000, #FF7200)"
  semantic:
    surface: "#FFFFFF"
    surfaceSecondary: "#F5F5F5"
    background: "#FFFFFF"
    onBackground: "#1A1A1A"
    highlight: "#EC7000"
    highEmphasis: "#1A1A1A"
    mediumEmphasis: "#6E6E6E"
    lowEmphasis: "#A3A3A3"
  feedback:
    success: "#00875A"
    successLight: "#E6F7F0"
    warning: "#FFAB00"
    warningLight: "#FFF8E6"
    alert: "#DE350B"
    alertLight: "#FFEBE5"
    info: "#0065FF"
    infoLight: "#E6F0FF"
  neutral:
    neutral0: "#FFFFFF"
    neutral50: "#F7F7F7"
    neutral100: "#EDEDED"
    neutral200: "#D6D6D6"
    neutral300: "#BFBFBF"
    neutral400: "#A3A3A3"
    neutral500: "#8C8C8C"
    neutral600: "#6E6E6E"
    neutral700: "#4D4D4D"
    neutral800: "#2E2E2E"
    neutral900: "#1A1A1A"
  secondaryPalette:
    yellow: "#FFAB00"
    blue: "#003399"
    green: "#00875A"
    pink: "#FF5C8A"
typography:
  families:
    - Itaú Display
    - Itaú Text
    - Inter (fallback digital)
    - Helvetica Neue (fallback legacy)
  weights:
    light: 300
    regular: 400
    medium: 500
    semiBold: 600
    bold: 700
    black: 900
  opticalSizes:
    display: "6 pesos — Otimizado para títulos, apresentações, mídia (tamanhos médios a grandes)"
    text: "4 pesos — Otimizado para apps digitais, UI e textos pequenos"
  sizes:
    caption: 12
    body2: 14
    body1: 16
    subtitle2: 18
    subtitle1: 20
    heading6: 22
    heading5: 24
    heading4: 28
    heading3: 32
    heading2: 36
    heading1: 40
    display2: 48
    display1: 56
  lineHeights:
    tight: 1.2
    normal: 1.4
    relaxed: 1.6
rounded:
  none: 0
  small: 4
  medium: 8
  large: 12
  xLarge: 16
  xxLarge: 24
  pedra: "Superellipse / squircle orgânica (forma proprietária)"
  pill: 999
  circle: "50%"
spacing:
  quarck: 4
  nano: 8
  xxxs: 12
  xxs: 16
  xs: 24
  sm: 32
  md: 40
  lg: 48
  xl: 56
  xxl: 64
  xxxl: 80
  huge: 96
  giant: 128
---

## Overview

**Voxel** é o Design System do **Itaú Unibanco**, o maior banco privado do Brasil e uma das maiores instituições financeiras da América Latina. Mais do que um design system — é uma comunidade de design que serve mais de 25.000 profissionais de desenvolvimento de produtos digitais.

### Números

| Métrica | Valor |
|---------|-------|
| Funcionários | 96.300 |
| Profissionais de produto digital | 25.000+ |
| Designers de experiência | 900+ |
| Desenvolvedores | 15.000+ |
| Componentes | 63+ reutilizáveis |
| Tech Stacks suportados | 4 |
| Produtos/Segmentos | 29 |
| Aderência ao DS | 80% nos repositórios-chave |
| Produtos digitais lançados (2024) | 45+ |
| Clientes | 60M+ |
| Países | Brasil (principal), América Latina |
| Ferramenta de Design | Figma (Design + FigJam) |
| Idade da marca | 100+ anos (centenário em 2024) |

### Princípios de Design

O design do Itaú segue 4 princípios fundamentais definidos pelo Itaú Design Language:

1. **Simples** — Experiências claras, diretas e sem fricção
2. **Confiável** — Transmitir segurança e solidez em cada interação
3. **Relevante** — Contextualizado e personalizado para cada momento do cliente
4. **Memorável** — Experiências que geram impacto positivo e diferenciação

### Características Técnicas

- **Responsivo** — Adaptação completa para mobile, tablet e desktop
- **Acessível** — Compliance com WCAG, testado com screen readers e text resizing
- **Multi-plataforma** — Suporta 4 tech stacks distintos
- **Figma-nativo** — Toda documentação, componentes e patterns vivem no Figma em tempo real
- **Um só Itaú (One Itaú)** — Iniciativa de unificação de experiências sob um único login e padrão visual no super app
- **Comunidade de design** — Governança distribuída com contribuição ativa de 25.000+ profissionais
- **Security-first** — Componentes testados contra vulnerabilidades e performance; branding update resolvido overnight
- **Server-driven components** — Suporte a interfaces dirigidas pelo server para flexibilidade operacional

### Rebranding 2024 — Pentagram

Em 2024, para o centenário, o Itaú passou por um rebranding significativo realizado pelo **Pentagram** (New York), liderado por **Michael Bierut** com equipe de Jonny Sikov, Lauren Rush e Camila Pérez:

- **Forma "Pedra"** — O quadrado icônico (desde os anos 1970) evoluiu para uma forma orgânica de pedra de rio polida pelo tempo. "Itaú" significa "pedra negra" em Tupi-Guarani
- **Laranja como protagonista** — O laranja quente e radiante passou de cor de suporte para cor primária da marca
- **Paleta secundária brasileira** — Amarelo, azul, verde e rosa como cores complementares
- **Tipografia refinada** — Colaboração entre Dalton Maag, Fabio Haag Type e Commercial Type para logotipo com geometria mais cheia, lowercase "i" com tittle redondo e acento agudo balanceado

---

## Colors

### Filosofia de Cor

> "The redesign makes this orange the primary brand color, and introduces a broader secondary palette that includes Brazilian colors like yellow, blue, green and pink."  
> — Pentagram, Banco Itaú case study

O Itaú transicionou de uma identidade azul e amarela clássica para um **laranja quente e radiante** como cor principal. O laranja comunica energia, modernidade e proximidade. A paleta secundária incorpora cores quintessencialmente brasileiras.

### Brand Colors (Primary Orange)

| Token | Hex | Uso |
|-------|-----|-----|
| `brand.primary.main` | `#EC7000` | Laranja Itaú — CTAs, botões, logo, identidade |
| `brand.primary.light` | `#FF8C33` | Hover, estados ativos, acentos leves |
| `brand.primary.lightest` | `#FFD6A8` | Backgrounds sutis, cards destacados |
| `brand.primary.dark` | `#CC6000` | Pressed states, ênfase |
| `brand.primary.darkest` | `#993D00` | Contraste máximo, gradientes profundos |

### Brand Colors (Secondary Blue)

| Token | Hex | Uso |
|-------|-----|-----|
| `brand.secondary.main` | `#003399` | Azul marinho — textos, headers, confiança |
| `brand.secondary.light` | `#1A5493` | Links, elementos de navegação |
| `brand.secondary.dark` | `#002266` | Fundos premium, segmentos high-end |

### Paleta Secundária Brasileira

| Cor | Hex | Significado |
|-----|-----|-------------|
| Amarelo | `#FFAB00` | Calor, otimismo, herança da marca (ex-cor primária com azul) |
| Azul | `#003399` | Confiança, solidez, tradição bancária |
| Verde | `#00875A` | Crescimento, prosperidade, brasilidade |
| Rosa | `#FF5C8A` | Energia, jovialidade, modernidade |

### Neutrals

| Token | Hex | Uso |
|-------|-----|-----|
| `neutral.0` | `#FFFFFF` | Background principal, superfícies primárias |
| `neutral.50` | `#F7F7F7` | Background secundário, sections alternadas |
| `neutral.100` | `#EDEDED` | Bordas, dividers |
| `neutral.200` | `#D6D6D6` | Bordas inativas, separadores |
| `neutral.400` | `#A3A3A3` | Placeholders, texto low emphasis |
| `neutral.600` | `#6E6E6E` | Texto medium emphasis |
| `neutral.800` | `#2E2E2E` | Texto secondary |
| `neutral.900` | `#1A1A1A` | Texto primary, headings |

### Feedback / Status

| Token | Hex | Uso |
|-------|-----|-----|
| `feedback.success` | `#00875A` | Transações aprovadas, confirmações |
| `feedback.warning` | `#FFAB00` | Alertas de atenção, pendências |
| `feedback.alert` | `#DE350B` | Erros, falhas, bloqueios |
| `feedback.info` | `#0065FF` | Informações contextuais, dicas |

### Forma "Pedra" e Cor

A forma "pedra" (superellipse orgânica) é o elemento visual mais distintivo da marca. Ela funciona como:
- Container para imagens ou tipografia
- Elemento em padrões e motivos gráficos
- Integrada (e às vezes escondida) em ilustrações coloridas
- Shape do logo e ícone do app

---

## Typography

### Itaú Typeface — A Tipografia Proprietária (2017)

A **Itaú Typeface** é uma família sans-serif humanista desenhada exclusivamente para o Itaú Unibanco pela **Dalton Maag** em colaboração com Amanda Carvalho (lead designer). É a tipografia base do design system Voxel.

#### Conceito e Filosofia

> "A humanist sans serif that invites the eyes to go across its open and dynamic forms, creating closeness to the user."

A tipografia reflete os atributos da marca — **proximidade, leveza e simplicidade** — com formas abertas e dinâmicas, desenhadas para performance em apps digitais e excelente legibilidade em tamanhos pequenos.

#### Itaú Display — Print e Mídia

| Característica | Valor |
|----------------|-------|
| Pesos | 6 (Light, Regular, Medium, SemiBold, Bold, Black) |
| Uso | Print, apresentações, mídia, tamanhos médios a grandes |
| Características | Maior contraste, personalidade em display |
| Quando usar | Headlines, marketing, comunicações institucionais |

#### Itaú Text — Digital e UI

| Característica | Valor |
|----------------|-------|
| Pesos | 4 (Regular, Medium, SemiBold, Bold) |
| Uso | Apps digitais, interfaces, UI |
| Otimizações | Maior x-height, espaçamento entre letras mais generoso, formas de letra distintas |
| Quando usar | Corpo de texto, botões, labels, dados financeiros |

#### Refinamento do Logotipo (2024)

Para o centenário, a tipografia do logotipo foi refinada em colaboração com **Dalton Maag**, **Fabio Haag Type** e **Commercial Type**:
- Geometria mais cheia e arredondada
- Lowercase "i" com tittle (ponto) redondo
- Acento agudo sobre o "u" balanceado
- Personalidade aproximável com construção humanista

#### Pesquisa e Validação

A tipografia passou por rigoroso processo de pesquisa conduzido pela **Kantar TNS**:
- Análise semiótica e quantitativa
- Survey com 1.200 clientes
- Testada contra San Francisco, Roboto e Myriad
- Resultado: **Itaú Typeface é a mais fortemente associada à marca** Itaú

### Escala Tipográfica

| Token | Tamanho | Uso |
|-------|:---:|---|
| `caption` | 12px | Legendas, disclaimers, textos regulatórios |
| `body2` | 14px | Texto secundário, descrições |
| `body1` | 16px | Corpo padrão, conteúdo principal |
| `subtitle2` | 18px | Subtítulos menores, labels de seção |
| `subtitle1` | 20px | Subtítulos, eyebrows |
| `heading6` | 22px | Headings de seção |
| `heading5` | 24px | Headings médios |
| `heading4` | 28px | Headings de destaque |
| `heading3` | 32px | Títulos de tela |
| `heading2` | 36px | Títulos hero |
| `heading1` | 40px | Display no app |
| `display2` | 48px | Display marketing |
| `display1` | 56px | Display hero grande |

### Pesos e Hierarquia

| Role | Weight | Família | Uso |
|------|:------:|---------|-----|
| Display / Hero | 700–900 | Itaú Display | Headlines, hero, campanha |
| Heading | 600 (SemiBold) | Itaú Display | Subtítulos, headings de seção |
| Subheading | 500 (Medium) | Itaú Text | Labels de seção, sub-headings |
| Body | 400 (Regular) | Itaú Text | Texto corrido, descrições |
| Emphasis | 700 (Bold) | Itaú Text | Ênfase em corpo, valores financeiros |
| Light | 300 (Light) | Itaú Display | Saldos grandes, dados financeiros em destaque |

### Fallbacks

| Contexto | Fonte Fallback | Razão |
|----------|---------------|-------|
| Web (CSS) | Inter, system-ui | Compatibilidade ampla, métricas similares |
| Legacy digital | Helvetica Neue | Herança pré-custom font |
| E-mail / terceiros | Arial, sans-serif | Disponibilidade universal |

### Personnalité (Segmento Premium)

O segmento **Itaú Personnalité** utiliza uma versão modificada da Itaú Display, customizada para comunicar exclusividade e sofisticação.

---

## Layout

### Spacing Scale

O Voxel utiliza escala progressiva baseada em múltiplos de 4px e 8px:

| Token | Valor | Uso |
|-------|:---:|---|
| `quarck` | 4px | Micro-espaçamento, gap interno de ícones |
| `nano` | 8px | Gap ícone-texto, padding mínimo |
| `xxxs` | 12px | Padding interno compacto |
| `xxs` | 16px | Padding padrão de componentes |
| `xs` | 24px | Espaçamento entre elementos |
| `sm` | 32px | Separação entre blocos |
| `md` | 40px | Espaçamento de seção |
| `lg` | 48px | Separação generosa |
| `xl` | 56px | Espaçamento entre seções |
| `xxl` | 64px | Separação grande de áreas |
| `xxxl` | 80px | Margens externas |
| `huge` | 96px | Separação máxima |
| `giant` | 128px | Hero spacing |

### Grid System

| Contexto | Colunas | Margem | Gutter |
|----------|:---:|:---:|:---:|
| Mobile (< 375px) | 4 | 16px | 16px |
| Mobile (≥ 375px) | 4 | 24px | 16px |
| Tablet | 8 | 32px | 24px |
| Desktop | 12 | Auto (max-width container) | 24px |

### Estrutura de Tela

O Itaú Design Language define anatomia de tela modular para o super app:

1. **Header** — Navegação, saudação personalizada, ações rápidas
2. **Shortcuts** — Atalhos contextuais (Pix, transferência, pagamentos)
3. **Account Overview** — Resumo de conta, saldo, cartão
4. **Content Feed** — Cards personalizados, ofertas, insights
5. **Products** — Acesso a produtos (investimentos, seguros, crédito)
6. **Actions / CTA** — Botões contextuais, nudges

### Responsividade

O Voxel é mobile-first, com experiência primária no app bancário:
- **App** — Experiência principal, super app unificado (Um só Itaú)
- **Web Banking** — Desktop e tablet para operações complexas
- **ATM** — Terminais de autoatendimento
- **PDV** — Experiência em agências

---

## Elevation & Depth

### Filosofia

O design digital do Itaú é predominantemente **clean e flat**, com uso moderado de elevação. A clareza e acessibilidade são prioridades — sombras são usadas com parcimônia para não sobrecarregar visualmente.

### Níveis de Elevação

| Nível | Descrição | Uso |
|-------|-----------|-----|
| 0 (base) | Flat, sem sombra | Elementos inline, backgrounds |
| 1 (low) | Sombra muito sutil | Cards em repouso, containers |
| 2 (medium) | Sombra leve | Cards destacados, dropdowns |
| 3 (high) | Sombra média | Bottom sheets, modais |
| 4 (highest) | Sombra forte | Overlays, diálogos críticos |

### Box Shadows

| Token | Box-shadow | Uso |
|-------|-----------|-----|
| `elevation.none` | Nenhuma | Elementos flat, inline |
| `elevation.low` | `0 2px 4px 0 rgba(0,0,0,0.06)` | Cards padrão |
| `elevation.medium` | `0 4px 8px 0 rgba(0,0,0,0.10)` | Cards elevados, menus |
| `elevation.high` | `0 8px 16px 0 rgba(0,0,0,0.14)` | Sheets, modais |
| `elevation.highest` | `0 16px 32px 0 rgba(0,0,0,0.18)` | Full-screen overlays |

### Separação por Cor

Quando sombras não são usadas, a separação visual entre camadas é comunicada por:
- Backgrounds alternados (`#FFFFFF` vs `#F7F7F7`)
- Bordas sutis (`#EDEDED`)
- Espaçamento generoso entre seções

---

## Shapes

### Border Radius

| Token | Valor | Uso |
|-------|:---:|---|
| `none` | 0px | Imagens full-bleed, dividers |
| `small` | 4px | Tags, badges compactos |
| `medium` | 8px | Inputs, cards padrão, containers |
| `large` | 12px | Cards de destaque, sections |
| `xLarge` | 16px | Cards hero, banners |
| `xxLarge` | 24px | Modais, bottom sheets grandes |
| `pedra` | Superellipse | Forma proprietária "pedra" — logo, ícone app, containers especiais |
| `pill` | 999px | Botões pill, chips, search bars |
| `circle` | 50% | Avatares, ícones circulares, FABs |

### A Forma "Pedra"

O shape mais distintivo do Itaú é a **pedra** — uma evolução do quadrado com cantos arredondados (squircle/superellipse) para uma forma orgânica que evoca:
- Pedras de rio polidas pelo tempo (longevidade, 100 anos)
- Sensação tátil e pessoal (banking humanizado)
- Diferenciação do squircle genérico de app icons

A pedra é usada como:
- Container do logotipo
- Moldura para imagens e tipografia
- Elemento em padrões gráficos
- Shape integrado em ilustrações
- Ícone do app nos stores

### Iconografia

- Formas simples, intuitivas e acessíveis
- Traço consistente (2px stroke no tamanho padrão 24x24px)
- Alinhamento com geometria humanista da tipografia
- Otimizada para interfaces digitais em todos os tamanhos
- Set proprietário (desenvolvido por Fabio Haag Type para a plataforma íon)

---

## Components

O Voxel oferece 63+ componentes reutilizáveis com suporte a tokens, acessibilidade e consistência multi-plataforma:

### Navegação
- **AppBar** — Barra de topo com navegação, saudação e ações
- **BottomNavigation** — Navegação principal por abas no super app
- **TabBar** — Abas horizontais para conteúdo segmentado
- **NavigationDrawer** — Menu lateral
- **Breadcrumb** — Navegação hierárquica (web banking)

### Cards e Containers
- **Card** — Container com variantes (flat, elevated, outlined, pedra-shape)
- **ProductCard** — Card especializado para produtos financeiros
- **BottomSheet** — Sheet deslizante
- **Modal** — Dialog para confirmações e alertas
- **Accordion** — Expansíveis para FAQs e informações detalhadas

### Formulários
- **TextField** — Input com label flutuante, helper, error state
- **Select** — Dropdown de seleção
- **Checkbox** — Seleção múltipla
- **RadioButton** — Seleção exclusiva
- **Switch** — Toggle on/off
- **PINInput** — Input de PIN/senha numérica (6 dígitos)
- **DatePicker** — Seleção de datas
- **CurrencyInput** — Input formatado para valores monetários (R$)

### Ações
- **Button** — Primário (filled laranja), secundário (outlined), terciário (text/ghost)
- **IconButton** — Botão com ícone (touch target mínimo 48x48)
- **FloatingActionButton** — FAB para ação principal
- **Link** — Links textuais inline

### Feedback
- **Alert** — Mensagens contextuais (success, warning, error, info)
- **Snackbar / Toast** — Notificações temporárias
- **ProgressBar** — Progresso linear
- **Spinner** — Loading circular
- **Skeleton** — Placeholder de carregamento
- **EmptyState** — Estados vazios com ilustração e CTA

### Dados Financeiros
- **BalanceDisplay** — Exibição de saldo com toggle show/hide (privacidade)
- **TransactionList** — Lista de transações com categorização
- **AccountSummary** — Resumo de conta com saldo e limites
- **CreditCardWidget** — Representação visual do cartão
- **Chart** — Gráficos de gastos e investimentos
- **StatementRow** — Linha de extrato formatada

### Pix e Pagamentos
- **PixKeySelector** — Seletor de chaves Pix
- **PaymentConfirmation** — Tela de confirmação de pagamento
- **QRCodeScanner** — Scanner integrado

### Mídia e Display
- **Avatar** — Foto de perfil ou iniciais
- **Badge** — Indicadores de notificação
- **Tag** — Labels categóricos (laranja, azul, verde)
- **Divider** — Separador visual
- **Illustration** — Sistema de ilustrações com "pedra" integrada
- **Banner** — Comunicação contextual com CTA

### Acessibilidade Integrada

Cada componente do Voxel é construído com:
- Contraste mínimo 4.5:1 para textos (WCAG AA)
- Touch targets mínimos de 48x48px
- Suporte a screen readers (VoiceOver, TalkBack)
- Text resizing sem quebra de layout
- Estados de foco visíveis para navegação por teclado

---

## Do's and Don'ts

### ✅ Do's

- **Use a tipografia Itaú Text para interfaces** — Projetada especificamente para performance digital com x-height otimizado e legibilidade em tamanhos pequenos
- **Priorize o laranja como cor de ação** — O laranja (#EC7000) é o protagonista da marca; use para CTAs, destaques e elementos interativos primários
- **Respeite a forma "pedra"** — Use a superellipse orgânica do Itaú para containers, molduras e elementos gráficos que precisam de identidade forte
- **Mantenha interfaces clean e acessíveis** — O banking digital do Itaú prioriza clareza sobre decoração; cada elemento visual deve servir uma função
- **Siga os 4 princípios** — Simples, confiável, relevante e memorável em cada decisão de design
- **Use tokens semânticos** — Prefira `color.primary` sobre hex codes diretos para garantir consistência multi-plataforma
- **Teste acessibilidade em cada componente** — Mínimo 4.5:1 contraste, touch targets 48px, screen reader support
- **Use a paleta brasileira com propósito** — Amarelo, verde, rosa como acentos complementares ao laranja, nunca concorrentes
- **Respeite o azul marinho para confiança** — O azul (#003399) transmite solidez e segurança financeira; use para textos e elementos de navegação
- **Mantenha consistência com o Um só Itaú** — Todas as jornadas devem parecer parte do mesmo ecossistema unificado
- **Use Itaú Display apenas para tamanhos grandes** — Headlines, marketing, apresentações — nunca para corpo de texto em interfaces

### ❌ Don'ts

- **Não use o laranja para textos corridos** — O laranja é cor de destaque e ação, não de leitura. Textos usam neutrals ou azul marinho
- **Não reproduza a forma "pedra" como squircle genérico** — A pedra do Itaú tem curvas orgânicas específicas, diferentes de um border-radius uniforme
- **Não dilua a identidade com cores aleatórias** — A paleta é controlada: laranja (primário), azul (secundário), brasileiro (terciário). Nunca introduza cores fora deste sistema
- **Não ignore o legado de 100 anos** — O Itaú comunica inovação E tradição; designs muito radicais ou genéricos desconectam da herança da marca
- **Não use Itaú Display para corpo de texto** — Os 6 pesos do Display são para tamanhos grandes; em UI use Itaú Text (4 pesos otimizados para tela)
- **Não use sombras pesadas** — O estilo é clean e flat; elevação é comunicada com sutileza ou por separação de cor
- **Não reduza touch targets abaixo de 48px** — Acessibilidade é inegociável no Voxel; todos os elementos interativos mantêm área mínima de toque
- **Não misture famílias tipográficas em uma mesma superfície** — Itaú Text para app/UI, Itaú Display para marketing/comunicação
- **Não fragmente experiências entre canais** — O Um só Itaú unifica tudo; inconsistências entre app, web e agência são inadmissíveis
- **Não use azul e amarelo como combinação primária** — A identidade anterior era azul/amarelo; a nova marca é **laranja** como protagonista
- **Não ignore a segurança da marca** — A tipografia proprietária é asset de segurança contra fraudes; uso não-autorizado é vedado

---

## Attribution

| Campo | Valor |
|-------|-------|
| Source | [itau.com.br](https://www.itau.com.br) |
| Rebranding | [pentagram.com/work/banco-itau](https://www.pentagram.com/work/banco-itau?rel=discipline&rel-id=7) |
| Design System | Voxel — [uxfol.io/project/04b76f10/Voxel-Design-System](https://uxfol.io/project/04b76f10/Voxel-Design-System) |
| Figma Case Study | [figma.com/customers/itau-unibanco-launched-45-digital-products-with-figma](https://www.figma.com/customers/itau-unibanco-launched-45-digital-products-with-figma/) |
| Typography (Itaú Typeface) | [behance.net/gallery/94801085/Itau-Typeface](https://www.behance.net/gallery/94801085/Itau-Typeface) |
| Typography (AC Design) | [acdesign-studio.webflow.io/works/itau-typeface](https://acdesign-studio.webflow.io/works/itau-typeface) |
| Logotype Story | [fabiohaagtype.com/en/itau](https://fabiohaagtype.com/en/itau/) |
| Logotype UX Design | [bootcamp.uxdesign.cc — A story of the new Itaú logotype](https://bootcamp.uxdesign.cc/a-story-of-the-new-ita%C3%BA-logotype-to-explore-find-and-polish-928c8269c7b7) |
| Brand Archive | [brandarchive.xyz/identity/banco-itaú](https://brandarchive.xyz/identity/banco-ita%C3%BA) |
| Medium Case Study | [jocatorres.medium.com/case-study-itaú-unibanco](https://jocatorres.medium.com/case-study-ita%C3%BA-unibanco-bd257621cb6e) |
| Method | Public site CSS extraction, Pentagram case study, Figma customer story, typography portfolio analysis |
| Date | 2026-07-05 |