Stone Pagamentos

---
name: Stone Pagamentos
description: >
  Design system da Stone Pagamentos (StoneCo), plataforma de tecnologia financeira
  líder no Brasil focada em PMEs. Oferece maquininhas de cartão, conta PJ, crédito,
  gestão financeira e software integrado. Rebranding completo realizado em 2023
  (premiado iF Design Award 2024), unificando as marcas do grupo (Stone, Ton) sob
  uma identidade visual coesa. Design funcional, direto e acessível — reflete o
  posicionamento de parceiro do empreendedor brasileiro. Verde icônico da maquininha
  como cor primária absoluta.
colors:
  brand:
    primaryMain: "#00A868"
    primaryDark: "#008C56"
    primaryDarkest: "#006B42"
    primaryLight: "#33BF87"
    primaryLightest: "#E6F7F0"
    secondaryMain: "#FFFFFF"
    secondaryDark: "#F5F5F7"
    accent: "#00A868"
  semantic:
    surface: "#FFFFFF"
    surfaceDark: "#1A1A1A"
    background: "#FFFFFF"
    backgroundAlt: "#F5F5F7"
    backgroundDark: "#0D0D0D"
    onBackground: "#1A1A1A"
    onBackgroundDark: "#F5F5F7"
    highlight: "#00A868"
    highEmphasis: "#1A1A1A"
    mediumEmphasis: "#6B6B6B"
    lowEmphasis: "#9E9E9E"
  feedback:
    success: "#00A868"
    successLight: "#E6F7F0"
    warning: "#F5A623"
    warningLight: "#FEF5E6"
    error: "#E53935"
    errorLight: "#FDEAEA"
    info: "#1976D2"
    infoLight: "#E8F2FD"
  neutral:
    white: "#FFFFFF"
    gray50: "#F5F5F7"
    gray100: "#EBEBEB"
    gray200: "#D4D4D4"
    gray300: "#B0B0B0"
    gray400: "#9E9E9E"
    gray500: "#757575"
    gray600: "#6B6B6B"
    gray700: "#4A4A4A"
    gray800: "#2D2D2D"
    gray900: "#1A1A1A"
    black: "#0D0D0D"
  darkMode:
    background: "#0D0D0D"
    surfaceLevel1: "#1A1A1A"
    surfaceLevel2: "#2D2D2D"
    surfaceLevel3: "#3D3D3D"
    primaryDark: "#33BF87"
    onPrimary: "#FFFFFF"
    textPrimary: "#F5F5F7"
    textSecondary: "#B0B0B0"
    textDisabled: "#6B6B6B"
typography:
  families:
    - Sharon Sans (brand/display)
    - Inter (fallback UI/web)
    - system-ui (fallback stack)
  weights:
    regular: 400
    medium: 500
    semiBold: 600
    bold: 700
    extraBold: 800
  sizes:
    caption: 12
    body2: 14
    body1: 16
    subtitle2: 18
    subtitle1: 20
    heading6: 22
    heading5: 24
    heading4: 28
    heading3: 32
    heading2: 40
    heading1: 48
    display2: 56
    display1: 72
  lineHeights:
    tight: 1.15
    normal: 1.4
    relaxed: 1.6
rounded:
  none: 0
  small: 4
  medium: 8
  large: 12
  xLarge: 16
  xxLarge: 24
  pill: 999
  circle: "50%"
spacing:
  xxs: 4
  xs: 8
  sm: 12
  md: 16
  lg: 24
  xl: 32
  xxl: 48
  xxxl: 64
  huge: 80
  giant: 120
---

## Overview

**Stone** é uma plataforma de tecnologia financeira brasileira (StoneCo Ltd., NASDAQ: STNE) que atende micro, pequenas e médias empresas com soluções integradas de pagamentos, conta PJ, crédito e software de gestão. A marca é icônica no mercado brasileiro pelo hardware verde (maquininhas) e atendimento próximo ao empreendedor.

### Números

| Métrica | Valor |
|---------|-------|
| Clientes | 3.9M+ comerciantes (2025) |
| Colaboradores | 15.000+ |
| Presença | Todo o território brasileiro |
| Produtos | Maquininha, Conta PJ, Crédito, Gestão, Seguros |
| Sub-marcas | Stone (PMEs), Ton (MEI/autônomos) |
| Bolsa | NASDAQ: STNE / B3: STOC31 |
| Rebranding | 2023 (premiado iF Design Award 2024) |

### Princípios de Design

1. **Direto** — Interface sem enrolação. O empreendedor tem pressa; cada tela resolve um problema
2. **Funcional** — Design a serviço da tarefa. Estética limpa que não compete com a informação
3. **Acessível** — Linguagem simples, hierarquia clara. Atende desde MEI até médias empresas
4. **Confiável** — Solidez visual que transmite segurança para operações financeiras
5. **Brasileiro** — Proximidade cultural, tom de voz coloquial porém profissional

### Características Técnicas

- **Hardware-first** — A maquininha verde é o ponto de contato primário; o digital complementa
- **App-centric** — App Stone unifica vendas, conta PJ, crédito e gestão em uma experiência
- **Verde como sistema** — O verde não é decorativo; é funcional (status, CTAs, confirmações)
- **Responsivo** — Site otimizado para mobile-first (público empreendedor acessa via celular)
- **Performance** — Páginas leves e rápidas; público em regiões com conexão instável
- **Identidade unificada (2023)** — Rebranding integrou Stone + Ton + produtos sob uma linguagem visual coesa

---

## Colors

### Filosofia de Cor

> "Verde é Stone. É a cor que identifica a maquininha, o app, a marca — o verde do empreendedor brasileiro."

A Stone adota uma paleta minimalista centrada no verde institucional (#00A868), usado como cor primária absoluta em todos os pontos de contato. O restante da interface é predominantemente branco e cinza neutro, criando contraste máximo e legibilidade para dashboards financeiros.

### Brand Colors (Primary Green)

| Token | Hex | Uso |
|-------|-----|-----|
| `brand.primary.main` | `#00A868` | Verde Stone — CTAs, botões primários, ícones de marca, maquininha |
| `brand.primary.dark` | `#008C56` | Hover, estados pressed |
| `brand.primary.darkest` | `#006B42` | Ênfase forte, gradientes profundos |
| `brand.primary.light` | `#33BF87` | Estados ativos, acentos leves |
| `brand.primary.lightest` | `#E6F7F0` | Backgrounds sutis, badges, tags de sucesso |

### Cores Funcionais

| Token | Hex | Uso |
|-------|-----|-----|
| `feedback.success` | `#00A868` | Confirmação (coincide com brand — intencional) |
| `feedback.warning` | `#F5A623` | Alertas, atenção |
| `feedback.error` | `#E53935` | Erros, falhas de transação |
| `feedback.info` | `#1976D2` | Informações contextuais |

### Neutrals

| Token | Hex | Uso |
|-------|-----|-----|
| `neutral.white` | `#FFFFFF` | Background principal, cards |
| `neutral.gray50` | `#F5F5F7` | Background secundário, seções alternadas |
| `neutral.gray100` | `#EBEBEB` | Bordas, dividers |
| `neutral.gray200` | `#D4D4D4` | Bordas inativas, separadores |
| `neutral.gray400` | `#9E9E9E` | Placeholders, texto desabilitado |
| `neutral.gray600` | `#6B6B6B` | Texto secundário |
| `neutral.gray700` | `#4A4A4A` | Texto medium emphasis |
| `neutral.gray900` | `#1A1A1A` | Texto principal, headings |
| `neutral.black` | `#0D0D0D` | Background dark, preto profundo |

### Dark Mode

| Token | Hex | Uso |
|-------|-----|-----|
| `dark.background` | `#0D0D0D` | Fundo principal |
| `dark.surface.1` | `#1A1A1A` | Cards nível 1 |
| `dark.surface.2` | `#2D2D2D` | Cards nível 2, inputs |
| `dark.surface.3` | `#3D3D3D` | Elementos elevados |
| `dark.primary` | `#33BF87` | Verde ajustado para dark (maior luminosidade) |
| `dark.text.primary` | `#F5F5F7` | Texto principal |
| `dark.text.secondary` | `#B0B0B0` | Texto secundário |

O verde em dark mode recebe ajuste de luminosidade para manter contraste adequado contra backgrounds escuros sem perder identidade de marca.

### Uso de Cor por Contexto

| Contexto | Cor predominante |
|----------|-----------------|
| Maquininha física | Verde #00A868 (corpo do device) |
| App — navegação | Branco com acentos verdes |
| Site — hero sections | Branco ou cinza claro, CTAs verdes |
| Site — cards de produto | Fundo branco, ícones/badges verdes |
| Crédito/financeiro | Neutros com verde em indicadores positivos |
| Marketing/comunicação | Verde bold em headlines e key visuals |

---

## Typography

### Filosofia Tipográfica

A Stone utiliza tipografia geométrica sans-serif, privilegiando legibilidade, neutralidade e funcionalidade. O rebranding de 2023 consolidou uma família tipográfica proprietária (Sharon Sans) para brand e display, com Inter como fallback web.

### Famílias

| Família | Uso | Notas |
|---------|-----|-------|
| **Sharon Sans** | Brand, display, headlines, marketing | Fonte proprietária do rebranding 2023; geométrica, limpa, ligeiramente humanista |
| **Inter** | UI, body text, fallback web | Open source; alta legibilidade em tela; x-height alto |
| **system-ui** | Último fallback | Stack nativo por plataforma |

### Escala Tipográfica

| Token | Size | Weight | Uso |
|-------|------|--------|-----|
| `display1` | 72px | 800 | Hero headlines, landing pages |
| `display2` | 56px | 700 | Seções principais do site |
| `heading1` | 48px | 700 | Títulos de página |
| `heading2` | 40px | 700 | Subtítulos de seção |
| `heading3` | 32px | 600 | Cards de destaque |
| `heading4` | 28px | 600 | Subtítulos menores |
| `heading5` | 24px | 600 | Section headers |
| `heading6` | 22px | 600 | Component headers |
| `subtitle1` | 20px | 500 | Subtítulos, leads |
| `subtitle2` | 18px | 500 | Labels maiores |
| `body1` | 16px | 400 | Texto padrão |
| `body2` | 14px | 400 | Texto secundário, descrições |
| `caption` | 12px | 400 | Notas, disclaimers, metadata |

### Convenções

- **Headlines** — Sharon Sans, bold/extrabold, uppercase seletivo em CTAs
- **Body** — Inter ou Sharon Sans regular, 16px base, line-height 1.4–1.6
- **Números financeiros** — Tabular figures ativados; alinhamento decimal em valores monetários
- **App** — Base 14–16px; hierarchy via weight, não via size extremo
- **Logo wordmark** — "STONE" em caps, tracking aberto, peso bold customizado

---

## Layout

### Sistema de Grid

| Propriedade | Desktop | Tablet | Mobile |
|-------------|---------|--------|--------|
| Colunas | 12 | 8 | 4 |
| Gutter | 24px | 20px | 16px |
| Margem | 80px | 40px | 16px |
| Max-width | 1200px | 100% | 100% |

### Breakpoints

| Nome | Valor | Dispositivo |
|------|-------|-------------|
| `mobile` | 0–767px | Smartphones |
| `tablet` | 768–1023px | Tablets |
| `desktop` | 1024–1439px | Laptops |
| `wide` | 1440px+ | Desktop amplo |

### Princípios de Layout

- **Mobile-first** — Todo layout começa no mobile e expande
- **Whitespace generoso** — Espaçamento entre seções de 64–120px; respiro visual transmite confiança
- **Hierarquia clara** — Uma ação principal por seção; sem competição visual
- **Cards agrupados** — Produtos apresentados em cards de grid 2–3 colunas
- **Sticky navigation** — Header fixo com logo, menu hambúrguer em mobile, CTA verde sempre visível
- **Full-width sections** — Alternância de fundo branco/cinza para separar blocos de conteúdo

### Padrões de Seção

| Seção | Estrutura |
|-------|-----------|
| Hero | Headline grande + subtítulo + CTA verde + imagem de contexto (empreendedor usando produto) |
| Produtos | Grid de cards com ícone + título + descrição curta |
| Benefícios | Lista com ícones verdes + texto funcional |
| Depoimentos | Carousel com foto + nome + negócio |
| CTA Final | Fundo verde ou cinza escuro + headline + botão contrastante |
| Footer | Links organizados por categoria, logo monocromático |

---

## Elevation & Depth

### Filosofia

Design flat-first. Elevação é usada com moderação para criar hierarquia funcional sem decoração excessiva. Cards financeiros e modais usam sombras sutis; a maioria dos elementos depende de bordas e cor de fundo para diferenciação.

### Níveis de Elevação

| Nível | Box-shadow | Uso |
|-------|-----------|-----|
| `elevation.0` | none | Elementos inline, texto |
| `elevation.1` | `0 1px 3px rgba(0,0,0,0.08)` | Cards padrão, inputs |
| `elevation.2` | `0 4px 12px rgba(0,0,0,0.10)` | Cards elevados, dropdowns |
| `elevation.3` | `0 8px 24px rgba(0,0,0,0.12)` | Modais, dialogs |
| `elevation.4` | `0 16px 48px rgba(0,0,0,0.16)` | Overlays, navigation expandida |

### Bordas

| Token | Valor | Uso |
|-------|-------|-----|
| `border.subtle` | `1px solid #EBEBEB` | Separadores, cards sem elevação |
| `border.medium` | `1px solid #D4D4D4` | Inputs, selects |
| `border.strong` | `2px solid #00A868` | Focus state, seleção ativa |
| `border.error` | `2px solid #E53935` | Validação com erro |

### Dark Mode

No dark mode, sombras são substituídas por variação de luminosidade nas surfaces (mesma abordagem de elevação por cor, não por sombra projetada).

---

## Shapes

### Border Radius

| Token | Valor | Uso |
|-------|-------|-----|
| `rounded.none` | 0px | Elementos geométricos puros |
| `rounded.small` | 4px | Tags, badges |
| `rounded.medium` | 8px | Inputs, cards pequenos |
| `rounded.large` | 12px | Cards de produto, containers |
| `rounded.xLarge` | 16px | Cards de destaque, imagens |
| `rounded.xxLarge` | 24px | Modais, bottom sheets |
| `rounded.pill` | 999px | Botões, CTAs, chips |
| `rounded.circle` | 50% | Avatares, ícones circulares |

### Filosofia de Forma

- **Bordas arredondadas generosas** — A linguagem visual da Stone é amigável; corners de 8–16px são padrão
- **Botões pill-shaped** — CTAs principais usam `rounded.pill` (999px) para destaque máximo
- **Maquininha como ícone** — O shape do hardware (retângulo arredondado vertical) aparece como motivo visual
- **Sem sharp corners** — Interfaces financeiras podem parecer frias; o arredondamento aquece sem infantilizar

### Iconografia

| Propriedade | Valor |
|-------------|-------|
| Estilo | Line icons, stroke 1.5–2px |
| Tamanho padrão | 24×24px |
| Grid | 24px com 2px padding |
| Cor default | `gray900` (#1A1A1A) |
| Cor ativa | `primaryMain` (#00A868) |
| Touch target | Mínimo 44×44px |

---

## Components

### Navegação

- **Header** — Sticky, branco, logo Stone à esquerda, menu de produtos (mega-menu), CTA "Adquira Agora" verde à direita
- **MegaMenu** — Dropdown organizado por categoria (Vendas, Gestão Financeira, Crédito), com thumbnails
- **BottomNavigation** — App mobile com ícones + labels (Início, Vendas, Conta, Crédito, Mais)
- **Breadcrumb** — Texto cinza com separador `/`, último item ativo em preto

### Botões

- **Primary** — Background verde (#00A868), texto branco, border-radius pill, padding 16px 32px
- **Secondary** — Border verde, texto verde, background transparente, hover preenche
- **Tertiary** — Texto verde sem borda, underline hover
- **Disabled** — Background gray200, texto gray400, cursor not-allowed
- **Icon Button** — Circular, 44×44px touch target, ícone centralizado

### Cards

- **ProductCard** — Border-radius 12px, shadow level 1, thumbnail + título + descrição + link
- **PricingCard** — Destaque com borda verde (plano recomendado), preço grande, lista de features
- **FeatureCard** — Ícone verde + heading + body text, sem borda (fundo branco sobre seção cinza)
- **TestimonialCard** — Foto circular + nome + tipo de negócio + quote

### Formulários

- **TextField** — Border gray200, border-radius 8px, label acima, focus border verde
- **Select** — Dropdown com chevron, mesma estilização do TextField
- **Checkbox** — Quadrado arredondado, check verde quando ativo
- **Radio** — Círculo com dot verde quando selecionado
- **Switch** — Toggle pill-shape, verde quando ativo, cinza quando inativo

### Feedback

- **Alert** — Banner com ícone + texto + cor de fundo semântica (verde/amarelo/vermelho)
- **Toast** — Notificação flutuante, bottom-center no mobile, top-right no desktop
- **ProgressBar** — Barra linear verde sobre fundo cinza
- **Skeleton** — Pulse animation em cinza claro (#F5F5F7)
- **Spinner** — Circular, verde sobre transparente

### Dados Financeiros

- **BalanceDisplay** — Valor em destaque (heading2), com toggle show/hide (ícone olho)
- **TransactionList** — Linhas com ícone + descrição + valor + timestamp, separadores sutis
- **RevenueChart** — Gráfico de barras/linha com verde primário, tooltips informativos
- **TaxDisplay** — Tabela limpa com valores percentuais, destaque no "a partir de"
- **ProductSlider** — Carousel horizontal de produtos/maquininhas com thumbnails e preço

### Mídia e Display

- **Avatar** — Circular, iniciais ou foto, borda sutil
- **Badge** — Pill com background colorido (verde para "novo", cinza para neutro)
- **Tag** — Small pill, font 12px, background primário lightest ou cinza
- **Divider** — 1px cinza, full-width ou inset
- **HeroImage** — Fotografia de empreendedores reais em contexto de trabalho (não stock genérico)

### Padrões de Interação

- **CTAs always visible** — Botão principal nunca fica abaixo do fold sem scroll indicator
- **WhatsApp integration** — Botão flutuante verde para atendimento (icon WhatsApp)
- **Progressive disclosure** — Mega-menu e seções expandíveis revelam conteúdo sob demanda
- **Mobile gestures** — Swipe em carousels, pull-to-refresh no app

---

## Do's and Don'ts

### ✅ Do's

- **Use verde apenas como cor de ação/destaque** — O verde é para CTAs, confirmações e brand marks. Nunca como cor de fundo de grandes áreas
- **Priorize legibilidade em dados financeiros** — Tabular figures, alinhamento decimal, tamanhos generosos para valores monetários
- **Mantenha whitespace generoso** — Seções respiram com 64–120px de espaçamento; não comprima conteúdo
- **Use fotografia real** — Empreendedores brasileiros reais em seus negócios; diversidade de tipos, segmentos e regiões
- **Botões pill para CTAs primárias** — Border-radius 999px diferencia ações principais de secundárias
- **Mobile-first sempre** — 70%+ do público acessa via smartphone; teste lá primeiro
- **Tom coloquial profissional** — "Pra você", "Seu negócio", "A gente te ajuda" — próximo sem ser informal demais
- **Cards com border-radius 12–16px** — Linguagem visual amigável e moderna
- **Hierarquia por peso tipográfico** — Diferencie níveis por bold/medium/regular, não apenas por tamanho

### ❌ Don'ts

- **Não use verde sobre verde** — Texto verde sobre fundo verde lightest não tem contraste suficiente
- **Não substitua o verde por outras cores** — O #00A868 é inegociável; não use "verdes parecidos"
- **Não use sombras pesadas** — Elevação máxima em cards é sutil (12–24px blur); nunca drop shadows dramáticas
- **Não use sharp corners em elementos interativos** — Mínimo 8px de border-radius em botões e inputs
- **Não polua a interface com muitas cores** — Verde + neutrals. Cores semânticas (warning, error) são exceções funcionais
- **Não use fotografias de banco genéricas** — Sempre contexto brasileiro real, com representatividade
- **Não esconda a maquininha** — O hardware é o ícone da marca; deve aparecer em contexto de uso (mão segurando, balcão de loja)
- **Não use textos longos sem quebra** — Parágrafos curtos, bullet points, linguagem escaneável
- **Não ignore estados de loading** — Toda operação financeira precisa de feedback visual imediato (spinners, skeletons)
- **Não misture famílias tipográficas arbitrariamente** — Sharon Sans para display/brand, Inter para UI/body. Nunca 3+ famílias na mesma página

---

## Attribution

| Campo | Valor |
|-------|-------|
| Source | [stone.com.br](https://stone.com.br) |
| Corporate | [stone.co](https://www.stone.co/en/about-us/) |
| Rebranding | iF Design Award 2024 — [Stone Co Rebranding](https://ifdesign.com/en/winner-ranking/project/stone-co-rebranding/708376) |
| App | [Google Play](https://play.google.com/store/apps/details?id=co.stone.banking.mobile.flagship) |
| Engineering | [github.com/stone-payments](https://github.com/stone-payments) |
| Method | Public site CSS extraction, brand documentation analysis, iF Design Award case study |
| Date | 2026-07-05 |