Inter (Inter&Co)

---
name: Inter (Inter&Co)
description: >
  Design system do Inter (anteriormente Banco Inter), super app financeiro brasileiro
  com 43M+ clientes combinando banking, marketplace, seguros e investimentos numa
  plataforma digital unificada. Identidade visual redesenhada pela Plau Design em 2024
  com tipografia customizada Citrina, paleta centrada no laranja vibrante (#FF7A00) e
  linguagem visual geométrica e contemporânea. Listado na NASDAQ (INTR) e B3 (INBR32).
colors:
  brand:
    primaryMain: "#FF7A00"
    primaryLight: "#FF9B3D"
    primaryLightest: "#FFD9B3"
    primaryDark: "#E56E00"
    primaryDarkest: "#CC6200"
    secondaryMain: "#FFFFFF"
    secondaryDark: "#F5F5F7"
  gradient:
    primary: "linear-gradient(135deg, #FF7A00, #FF9B3D)"
    dark: "linear-gradient(135deg, #E56E00, #FF7A00)"
  semantic:
    surface: "#FFFFFF"
    surfaceDark: "#161616"
    background: "#FFFFFF"
    backgroundDark: "#0D0D0D"
    onBackground: "#161616"
    onBackgroundDark: "#F5F5F7"
    highlight: "#FF7A00"
    highEmphasis: "#161616"
    mediumEmphasis: "#6B6B6B"
    lowEmphasis: "#9E9E9E"
  feedback:
    success: "#00A868"
    successLight: "#E6F9F0"
    warning: "#FFB800"
    warningLight: "#FFF8E6"
    alert: "#E5222D"
    alertLight: "#FDE8E9"
    info: "#1E7FE6"
    infoLight: "#E8F2FD"
  neutral:
    neutral0: "#FFFFFF"
    neutral50: "#F5F5F7"
    neutral100: "#EBEBEB"
    neutral200: "#D6D6D6"
    neutral300: "#BDBDBD"
    neutral400: "#9E9E9E"
    neutral500: "#757575"
    neutral600: "#6B6B6B"
    neutral700: "#424242"
    neutral800: "#2E2E2E"
    neutral900: "#1D1D1D"
    neutral1000: "#0D0D0D"
  darkMode:
    background: "#0D0D0D"
    surfaceLevel1: "#161616"
    surfaceLevel2: "#1D1D1D"
    surfaceLevel3: "#2E2E2E"
    primaryDark: "#FF9B3D"
    onPrimary: "#FFFFFF"
    textPrimary: "#F5F5F7"
    textSecondary: "#BDBDBD"
    textDisabled: "#6B6B6B"
typography:
  families:
    - Citrina
    - Citrina Display
    - Citrina Text
    - Inter (UI fallback)
  weights:
    light: 300
    regular: 400
    medium: 500
    bold: 700
    black: 900
  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
  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
---

## Overview

**Inter** (anteriormente Banco Inter) é o maior super app financeiro do Brasil, combinando conta digital, cartão de crédito, investimentos, seguros, marketplace (Inter Shop), câmbio (Global Account) e empréstimos numa única plataforma. Com mais de 43 milhões de clientes e listagem na NASDAQ (INTR), o Inter representa a evolução do banco digital brasileiro para um ecossistema financeiro completo.

### Números

| Métrica | Valor |
|---------|-------|
| Clientes | 43M+ (2025) |
| Receita Bruta | R$ 10B+ (2024) |
| Lucro Líquido | R$ 973M (2024) |
| Listagem | NASDAQ (INTR) + B3 (INBR32) |
| Verticais | Banking, Investimentos, Seguros, Marketplace, Câmbio |
| Rebrand | 2024 (Plau Design) |
| Tipografia Customizada | Citrina (Plau Design – Carlos Mignot, Rodrigo Saiani) |

### Princípios de Design

1. **Simplicidade** — Interfaces limpas com hierarquia clara; reduzir atrito ao mínimo
2. **Confiança** — O laranja transmite energia e acessibilidade; backgrounds brancos comunicam transparência
3. **Unificação** — Um super app, uma linguagem visual consistente entre banking, shopping e seguros
4. **Modernidade** — Formas geométricas, tipografia contemporânea, animações sutis
5. **Acessibilidade** — Design inclusivo para os 43M+ de clientes em diversas faixas etárias e perfis

### Características Técnicas

- **Super App Architecture** — Uma única aplicação com módulos de banking, marketplace, seguros, investimentos e câmbio
- **Citrina Typeface** — Tipografia customizada com eixos de variação (weight + optical size), desenhada pela Plau Design
- **Orange-first Branding** — Laranja (#FF7A00) como cor primária dominante em toda a comunicação
- **Geometric Language** — Formas geométricas com terminais levemente arredondados (inspiração Futura com twist moderno)
- **Cashback Economy** — UI otimizada para exibição de cashback, promoções e marketplace

---

## Colors

### Filosofia de Cor

> "O laranja é Inter. Vibrante, acessível e energético — representa a transformação digital e a democratização financeira."

O Inter utiliza uma paleta cromática centrada no laranja vibrante (#FF7A00), contrastada por backgrounds brancos puros e tons de cinza escuro para texto. A abordagem é minimalista: o laranja é o único acento cromático forte, aplicado estrategicamente em CTAs, logo, highlights e elementos de destaque.

### Brand Colors (Primary Orange)

| Token | Hex | Uso |
|-------|-----|-----|
| `brand.primary.main` | `#FF7A00` | Laranja Inter — Logo, CTAs, botões, header, ícones de marca |
| `brand.primary.light` | `#FF9B3D` | Hover, estados ativos, acentos leves |
| `brand.primary.lightest` | `#FFD9B3` | Backgrounds sutis, tags, badges |
| `brand.primary.dark` | `#E56E00` | Pressed states, ênfase |
| `brand.primary.darkest` | `#CC6200` | Gradientes profundos, deep CTAs |

### Neutrals

| Token | Hex | Uso |
|-------|-----|-----|
| `neutral.0` | `#FFFFFF` | Background principal (light mode) |
| `neutral.50` | `#F5F5F7` | Background secundário, seções alternadas |
| `neutral.100` | `#EBEBEB` | Bordas, dividers |
| `neutral.200` | `#D6D6D6` | Bordas inativas, separadores |
| `neutral.400` | `#9E9E9E` | Placeholders, texto low emphasis |
| `neutral.500` | `#757575` | Texto auxiliar |
| `neutral.600` | `#6B6B6B` | Texto medium emphasis |
| `neutral.700` | `#424242` | Texto secondary |
| `neutral.900` | `#1D1D1D` | Texto high emphasis, headings |
| `neutral.1000` | `#0D0D0D` | Texto máximo, backgrounds dark |

### Dark Mode

O dark mode do Inter utiliza cinzas profundos (não preto puro) para manter conforto visual em longas sessões bancárias:

| Token | Hex | Uso |
|-------|-----|-----|
| `dark.background` | `#0D0D0D` | Fundo principal |
| `dark.surface.1` | `#161616` | Cards nível 1 |
| `dark.surface.2` | `#1D1D1D` | Cards nível 2, inputs |
| `dark.surface.3` | `#2E2E2E` | Elementos elevados |
| `dark.primary` | `#FF9B3D` | Laranja ajustado para dark (mais claro para contraste) |
| `dark.text.primary` | `#F5F5F7` | Texto principal |
| `dark.text.secondary` | `#BDBDBD` | Texto secundário |

### Feedback / Status

| Token | Hex | Uso |
|-------|-----|-----|
| `feedback.success` | `#00A868` | PIX enviado, transações aprovadas, saldo positivo |
| `feedback.warning` | `#FFB800` | Alertas de atenção, limites próximos |
| `feedback.alert` | `#E5222D` | Erros, falhas de transação, bloqueios |
| `feedback.info` | `#1E7FE6` | Informações contextuais, links, dicas |

### Uso Estratégico do Laranja

O laranja não é usado em backgrounds extensos — é aplicado cirurgicamente:
- **Logo e marca** — Sempre presente no header/splash
- **CTAs primários** — Botões de ação principal (abrir conta, investir, comprar)
- **Highlights** — Valores de cashback, porcentagens de retorno, badges
- **Indicadores** — Progress bars, status ativo, current tab
- **Nunca em texto corrido** — O laranja em corpo de texto prejudica legibilidade

---

## Typography

### Citrina — A Tipografia Proprietária

A **Citrina** é a família tipográfica bespoke do Inter, desenhada pela **Plau Design** (Carlos Mignot, Rodrigo Saiani) como parte do rebrand de 2024 quando o Banco Inter se tornou **Inter & Co**.

#### Origens e Conceito

O nome "Citrina" evoca a fruta cítrica — vibrante, fresca e energética como o laranja da marca. O design parte do ampersand do "Inter & Co" como ponto focal, simbolizando parceria e unidade. A fonte traz influências do classicismo geométrico da Futura mas com personalidade contemporânea: x-height generosa, formas "o", "c" e "e" arredondadas criando ritmo visual dinâmico e acessível.

#### Especificações da Família

| Dimensão | Valores |
|----------|---------|
| Optical sizes | 2: **Text** (app, UI, corpo) e **Display** (títulos, marketing, hero) |
| Eixos de variação | 2: Weight + Optical Size |
| Weights | Light (300), Regular (400), Medium (500), Bold (700), Black (900) |
| Formato web | Variable font (reduz file size e requests) |
| Influências | Futura (geométrica) + twist contemporâneo |

#### Citrina Text — Interface

- Projetada para tamanhos pequenos em tela (12–18px)
- x-height generosa para legibilidade digital
- Espaçamento refinado em tamanhos menores
- Ideal para: UI do super app, saldos, extratos, labels, corpo de texto

#### Citrina Display — Comunicação

- Projetada para tamanhos grandes (24px+)
- Maior personalidade e expressividade
- Terminais arredondados mais pronunciados
- Ideal para: headlines do site, campanhas, marketing, hero sections, cartões

### Fallback Stack

```css
font-family: 'Citrina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
```

Para contextos onde a Citrina não está disponível (e-mails, PDFs de terceiros), o fallback principal é a fonte Inter (open-source) por similaridade geométrica.

### Escala Tipográfica

| Token | Tamanho | Uso |
|-------|:---:|---|
| `caption` | 12px | Disclaimers, footnotes regulatórios, labels mínimos |
| `body2` | 14px | Texto secundário, descrições de transações |
| `body1` | 16px | Corpo padrão, conteúdo principal |
| `subtitle2` | 18px | Subtítulos de seção, nomes de produtos |
| `subtitle1` | 20px | Subtítulos destacados |
| `heading6` | 22px | Headings de seção |
| `heading5` | 24px | Headings médios |
| `heading4` | 28px | Headings de destaque (app) |
| `heading3` | 32px | Títulos de tela |
| `heading2` | 36px | Hero sections (app) |
| `heading1` | 40px | Display no app |
| `display2` | 48px | Display marketing |
| `display1` | 56px | Hero headlines (site inter.co) |

### Pesos e Hierarquia

| Role | Weight | Uso |
|------|:------:|-----|
| Display / Hero | 700–900 (Bold/Black) | Headlines do site, campanhas, hero |
| Heading | 500–700 (Medium/Bold) | Títulos de seção, subtítulos |
| Body | 400 (Regular) | Texto corrido, descrições, extratos |
| Emphasis | 700 (Bold) | Valores monetários, cashback, destaques |
| Light | 300 (Light) | Saldos grandes, valores numéricos hero |

### Numerais

Para um super app financeiro, a tipografia de números é crítica:
- Numerais tabulares para alinhamento em extratos e tabelas
- Numerais proporcionais para inline text
- Suporte a R$, US$, € e demais símbolos de moeda (Global Account)

---

## Layout

### Spacing Scale

Escala progressiva baseada em múltiplos de 4px e 8px:

| Token | Valor | Uso |
|-------|:---:|---|
| `quarck` | 4px | Micro-espaçamento, gap ícone interno |
| `nano` | 8px | Gap ícone-texto, padding mínimo |
| `xxxs` | 12px | Padding interno compacto |
| `xxs` | 16px | Padding padrão de componentes, margin entre itens |
| `xs` | 24px | Espaçamento entre elementos, padding de cards |
| `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 desktop |
| `huge` | 96px | Hero spacing |

### Grid System

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

### Anatomia do Super App

O Inter organiza suas telas em módulos:
1. **Header** — Logo Inter (laranja) + navegação + perfil/notificações
2. **Quick Actions** — PIX, Transferir, Pagar, Depositar (ícones circulares)
3. **Balance Card** — Saldo com show/hide, limites, cartão
4. **Product Carousel** — Investimentos, Seguros, Inter Shop, Global Account
5. **Transaction Feed** — Extrato categorizado com ícones
6. **Bottom Navigation** — Home, Cartões, PIX, Inter Shop, Menu

### Site inter.co — Layout

O site institucional segue padrão de landing page moderno:
- **Hero full-width** com headline grande (Citrina Display Bold/Black)
- **Seções alternadas** com background branco e #F5F5F7
- **Cards de produto** com cantos arredondados e imagens device mockup
- **CTA laranja** em posições de destaque
- **Footer escuro** (#161616) com links organizados em colunas

---

## Elevation & Depth

### Filosofia

O Inter segue abordagem **predominantly flat** no light mode, usando separação por cor de background (branco vs cinza claro) como principal mecanismo de hierarquia. Sombras são reservadas para elementos que genuinamente flutuam (FABs, sheets, modais).

### Box Shadows (Light Mode)

| Token | Box-shadow | Uso |
|-------|-----------|-----|
| `elevation.none` | Nenhuma | Elementos inline, flat, seções |
| `elevation.low` | `0 2px 8px 0 rgba(0,0,0,0.06)` | Cards em repouso, lista de transações |
| `elevation.medium` | `0 4px 12px 0 rgba(0,0,0,0.10)` | Cards elevados, dropdowns, tooltips |
| `elevation.high` | `0 8px 24px 0 rgba(0,0,0,0.14)` | Bottom sheets, modais, overlays |
| `elevation.highest` | `0 16px 40px 0 rgba(0,0,0,0.18)` | Full-screen modais |

### Dark Mode — Elevação por Luminosidade

No dark mode, elevação é comunicada por claridade da surface:

| Nível | Light Mode | Dark Mode |
|-------|-----------|-----------|
| 0 (base) | #FFFFFF | #0D0D0D |
| 1 | #FFFFFF (sombra low) | #161616 |
| 2 | Sombra medium | #1D1D1D |
| 3 | Sombra high | #2E2E2E |

### Opacity

| Token | Valor | Uso |
|-------|:---:|---|
| `disabled` | 0.38 | Elementos desabilitados, botões inativos |
| `medium` | 0.5 | Overlays parciais |
| `scrim` | 0.72 | Scrim de modais/bottom sheets |
| `opaque` | 1.0 | Totalmente opaco |

---

## Shapes

### Border Radius

| Token | Valor | Uso |
|-------|:---:|---|
| `none` | 0px | Imagens full-bleed, hero backgrounds |
| `small` | 4px | Tags compactas, badges, inputs internos |
| `medium` | 8px | Inputs, campos de formulário |
| `large` | 12px | Cards padrão, containers, seções |
| `xLarge` | 16px | Cards destacados, product cards |
| `xxLarge` | 24px | Modais, bottom sheets, cards hero |
| `pill` | 999px | Botões primários, chips, filtros, search bars |
| `circle` | 50% | Avatares, quick action icons, FABs |

O Inter favorece formas com **cantos generosamente arredondados** — especialmente botões pill e cards com radius 12–16px. A linguagem visual é suave e acessível, evitando ângulos retos que transmitam rigidez bancária tradicional.

### Iconografia

- **Estilo**: Line icons com stroke consistente (1.5–2px)
- **Tamanho base**: 24px (touch target mínimo 44x44px)
- **Cores**: Monocromáticas (cinza escuro default, laranja para estados ativos)
- **Quick Actions**: Ícones dentro de círculos com background sutil (#F5F5F7)
- **Categoria de transação**: Ícones categóricos (alimentação, transporte, saúde, etc.)

### Logo

- **Marca**: "inter" em lowercase, bold, geométrica, terminais levemente arredondados
- **Cor principal**: Laranja (#FF7A00) sobre branco
- **Versão alternativa**: Branco sobre fundos escuros
- **Spacing**: Generoso — nunca encostado em outros elementos
- **Proibições**: Nunca em cores que não sejam laranja ou branco; nunca distorcido ou rotacionado

---

## Components

### Navegação
- **AppBar** — Header com logo Inter (laranja), busca, notificações e perfil
- **BottomNavigation** — 5 tabs: Home, Cartões, PIX, Inter Shop, Menu
- **TabBar** — Abas horizontais com indicador laranja ativo
- **Drawer** — Menu lateral com todas as verticais do super app

### Cards e Containers
- **BalanceCard** — Card principal com saldo, show/hide eye icon, limite disponível
- **ProductCard** — Cards de produto com imagem, título e CTA (investimentos, seguros, etc.)
- **CashbackCard** — Destaque de cashback com valor em laranja bold
- **BottomSheet** — Sheet deslizante para confirmações de transação, detalhes
- **Modal** — Dialog centrado para alertas, confirmações de segurança

### Formulários
- **TextField** — Input com label flutuante, border sutil, focus state laranja
- **CurrencyInput** — Input monetário com máscara R$/US$, alinhamento direita
- **PINInput** — Input de senha/PIN com dots animados
- **SearchBar** — Barra de busca pill-shaped com ícone de lupa
- **Select** — Dropdown com opções filtráveis

### Ações
- **Button Primary** — Filled laranja (#FF7A00), texto branco, pill-shaped
- **Button Secondary** — Outlined laranja, fundo transparente
- **Button Tertiary** — Text-only, sem background
- **QuickAction** — Ícone circular + label abaixo (PIX, Transferir, Pagar, Depositar)
- **FAB** — Floating action button para ação contextual

### Feedback
- **Alert** — Banners com ícone e cor por status (success, warning, error, info)
- **Toast/Snackbar** — Notificações temporárias (PIX recebido, pagamento confirmado)
- **ProgressBar** — Linear, laranja, para etapas de onboarding/processos
- **Skeleton** — Placeholder de carregamento com shimmer sutil
- **EmptyState** — Ilustração + texto + CTA quando não há dados

### Dados Financeiros
- **TransactionRow** — Linha de extrato: ícone + descrição + valor + data
- **BalanceDisplay** — Saldo grande (Light 300), com botão show/hide
- **InvestmentCard** — Rentabilidade, gráfico spark, valor investido
- **CreditCardWidget** — Representação visual do cartão Inter (laranja com chip)
- **CashbackBadge** — Badge com porcentagem de cashback em destaque

### Inter Shop (Marketplace)
- **ShopProductCard** — Card de produto com imagem, preço, cashback
- **CategoryChip** — Filtros pill-shaped por categoria
- **CashbackTag** — Tag laranja com "X% de cashback"
- **StoreCard** — Card de loja parceira com logo e cashback disponível

---

## Do's and Don'ts

### ✅ Do's

- **Use o laranja com intenção** — Aplicar somente em CTAs primários, logo, highlights de cashback e indicadores ativos. O laranja é precioso por ser escasso
- **Mantenha backgrounds brancos dominantes** — O branco transmite transparência e confiança no contexto financeiro
- **Use Citrina para identidade** — A tipografia customizada diferencia o Inter de concorrentes e dificulta fraudes
- **Priorize contraste** — Mínimo 4.5:1 para texto, especialmente em valores monetários que requerem leitura precisa
- **Aplique border-radius generoso** — Pills em botões (999px), 12–16px em cards. A linguagem é suave, não rígida
- **Respeite a hierarquia por peso** — Bold/Black para headlines, Regular para corpo, Light para valores numéricos grandes
- **Use flat design com separação por background** — Preferir alternar branco/#F5F5F7 em vez de múltiplas sombras
- **Teste em ambos os modos** — Light mode é o padrão, mas dark mode precisa manter identidade e legibilidade
- **Numerais tabulares em tabelas** — Extratos, listas de transação e comparações requerem alinhamento numérico

### ❌ Don'ts

- **Não use laranja em texto corrido** — O laranja sobre branco não atinge contraste WCAG para corpo de texto (body)
- **Não abuse de sombras** — O design é predominantemente flat; sombras são reservadas para elementos flutuantes
- **Não use preto puro (#000000) para texto** — Preferir #161616 ou #1D1D1D para conforto visual
- **Não substitua Citrina por qualquer sans-serif** — Se Citrina não estiver disponível, o fallback é a fonte Inter (rsms), não Arial ou Helvetica
- **Não coloque laranja sobre laranja** — Nunca usar variações de laranja como background + texto simultaneamente
- **Não use ângulos retos em CTAs** — Botões são sempre pill-shaped ou com radius generoso; nunca square buttons
- **Não quebre a consistência entre verticais** — Banking, Shop, Seguros e Investimentos compartilham a mesma linguagem visual
- **Não use tipografia com serif** — O Inter é 100% sans-serif; nunca introduzir serifs na interface ou comunicação
- **Não inverta apenas as cores para dark mode** — O laranja em dark mode é ligeiramente mais claro (#FF9B3D) para manter contraste e evitar "muddiness"
- **Não replique a identidade para fins fraudulentos** — A Citrina é proprietária e serve como mecanismo anti-phishing

---

## Attribution

| Campo | Valor |
|-------|-------|
| Source | [inter.co](https://inter.co) |
| Rebrand Case Study | [abduzeedo.com/inter-co-case-study-fintech-branding-typographic-flair](https://abduzeedo.com/inter-co-case-study-fintech-branding-typographic-flair) |
| Typography Design | [Plau Design](https://plau.co) — Carlos Mignot, Rodrigo Saiani |
| Creative Direction | Bruno Ribeiro, Ralph Mayer, Ronaldo Vidal |
| Logo Analysis | [whatthelogo.com/logo/banco-inter](https://whatthelogo.com/logo/banco-inter/214279) |
| Investor Relations | [investors.inter.co](https://investors.inter.co/en/) |
| Method | Public site CSS extraction, brand case study analysis, logo reference databases |
| Date | 2026-07-05 |