VunaPayDinheiro na hora. Qualquer banco.
Demo · sincronizado

VunaPay - Design System

Sistema de pagamentos interbancários instantâneos · v0.1

Living document Inter · JetBrains Mono

Brand

Trust through restraint. Speed through clarity. Mozambican green carries the brand; gold marks the central clearing node and selected delight moments.

Mark & tagline

SP
VunaPay
Dinheiro na hora. Qualquer banco.

Voice

  • Fast. Every word confirms instant.
  • Certain. No hedging on outcomes.
  • Local. Mozambican Portuguese, MZN, +258.
  • Better. Facts speak - no comparisons.

Colour

Toggle the theme in the top-right to compare. Both palettes share token names; only values change.

Surface & ink
--bg
page background
--bg-2
panel fills
--bg-3
elevated
--surface
cards / inputs
--ink
primary text
--ink-2
secondary
--ink-3
tertiary
--ink-4
disabled
Brand & accent
--brand
primary green
--brand-2
brand pressed
--brand-subtle
brand tint
--accent
gold (clearing node)
--accent-subtle
accent tint
Semantic
--good
success / settled
--warn
warning / pending
--critical
error / failed
--processing
in flight
Bank colour accents
Banco de Maputo
BDM · #007A4D
Banco de Beira
BDB · #0066CC
Banco de Tete
BDT · #8B5CF6
Banco de Nampula
BDN · #D97706
Banco de Sofala
BDS · #059669
Banco de Inhambane
BDI · #DC2626
Banco de Niassa
BDNI · #7C3AED
Banco de Zambézia
BDZ · #0891B2

Typography

Inter for prose, JetBrains Mono for every figure: currency, phone, ID, timestamp.

.t-display
Dinheiro na hora
48 / 600
.t-h1
Transferências recentes
32 / 600
.t-h2
Confirmar transferência
24 / 600
.t-h3
Enviar para Carlos Machava
18 / 600
.t-body
O seu PIN protege todas as suas transferências e é necessário para confirmar cada envio.
14 / 400
.t-small
Saldo disponível: MZN 24.350,00
13 / 400
.t-micro
Estado da rede
11 / 500
Figures (mono)

Currency

MZN 1.500,00
MZN 24.350,00
MZN 500,00
MZN 0,00 - taxa

Phone & ID

+258 84 234 5678
SWP-20260505-A3F8C291
05/05/2026 · 14:32:18

Layout primitives

4-pt spacing base. Three radii. Hairline borders, no shadow except on modals.

Radii

4 chip
8 card
12 modal

Spacing scale

4 · 8 · 12 · 16 · 24 · 32

Buttons

44px standard. 52px for primary CTAs in flows. Primary green is reserved for the single most important action per screen.

Inputs

States

Email inválido

Search

Procura entre os seus contactos e na rede VunaPay.

Amount input

The amount is the hero. Always prefixed with MZN, always mono.

MZN
Saldo disponível: MZN 24.350,00

Phone input

Country prefix is fixed. Flag is the Mozambican stripes - always visible to confirm context.

+258

PIN entry

Six dots. Filled animates with a small scale-up. Wrong PIN shakes - colour alone never carries the error.

Empty

Partial

Full

Error

PIN incorrecto. Tente novamente.

Bank selector

List of all participating banks. Each row carries the bank's colour accent as a vertical bar.

Status badges

Always colour + icon + word. Never colour alone.

Instantânea Processando Falhada Pendente

Transfer card

Compact row used in lists, history, and recent contacts.

CM
Carlos Machava
Banco de Beira ↓ 2.1s
− MZN 1.500,00
há 2 min
RM
Rosa Mavie
Banco de Inhambane ↓ 1.6s
+ MZN 5.000,00
ontem · 18:42

Success screen

The moment of delight. Mono amount, the speed in seconds, the transaction ID - proof it happened.

Transferência concluída!
MZN 1.500,00
enviados para Carlos Machava
Concluída em 2.3 segundos
SWP-20260505-A3F8C291

Avatar

Initials only. Background colour hashed from the name so a person's identity stays consistent across screens.

AC CM FS JN

Empty states & toasts

Empty

Ainda não há transferências
Faça a sua primeira transferência em segundos.

Toasts

Comprovativo copiado.
Transferência enviada.
Saldo insuficiente.