Design System Preview

Seu dinheiro de volta,
sem letras miudas.

Uma plataforma de cashback que respeita sua inteligencia. Transparencia financeira, confianca absoluta.

Satoshi · DM Sans · Geist Mono · Teal + Amber

01 — Typography

Three fonts, three jobs

Satoshi commands attention. DM Sans carries the conversation. Geist Mono handles the numbers.

Satoshi Display · Headings · Hero
R$ 1.247,89 de cashback
Descubra lojas com ate 15% de volta
Cashback Aa
Regular 400
Cashback Aa
Medium 500
Cashback Aa
Bold 700
Cashback Aa
Black 900
DM Sans Body · UI Labels · Buttons
Suas compras, seu cashback, sua carteira
Acompanhe cada centavo do seu cashback em tempo real. Sem surpresas, sem taxas escondidas, sem letras miudas. Seu saldo disponivel pode ser sacado via PIX a qualquer momento, com valor minimo de R$ 50,00.
Interface Aa
Light 300
Interface Aa
Regular 400
Interface Aa
Semi 600
Interface Aa
Bold 700
Geist Mono Data · Balances · Tables
R$ 3.482,50
Saldo disponivel · Atualizado as 14:32
+ R$ 42,30
Cashback recebido
R$ 150,00
Pendente
0123456789
Tabular nums
02 — Color

Restrained palette, strong identity

Teal for trust. Amber for rewards. Warm stone neutrals keep everything grounded.

Primary
Teal 600
#0D9488
Primary Light
Teal 500
#14B8A6
Primary Dark
Teal 700
#0F766E
Secondary
Amber 500
#F59E0B
Success
Green 600
#16A34A
Warning
Amber 600
#D97706
Error
Red 600
#DC2626
Info
Blue 600
#2563EB

Stone Neutrals

50
100
200
300
400
500
600
700
800
900
950
Primary on white — AA Large
4.53:1
Stone 900 on Stone 50
17.4:1 — AAA
Teal on dark surface
7.2:1 — AAA
Body text on light
17.4:1 — AAA
03 — Components

UI building blocks

Buttons, inputs, and alerts rendered in the proposed design system.

Buttons
Form Inputs
Alerts
✓ Cashback de R$ 12,50 creditado com sucesso!
⚠ Saque minimo de R$ 50,00
✕ Chave PIX invalida
ℹ Cashback sera liberado em 30 dias
Badges
Confirmado Pendente Liquidado
04 — Product Mockups

How it feels in context

Realistic layouts using the full design system. Mobile wallet and store management portal.

Mobile — Carteira

9:41 ●●●
Boa tarde, Marco
MK
Saldo disponivel
R$ 3.482,50
Pendente R$ 150,00
Cashback do mes R$ 87,30
★
+R$ 12,50 de cashback recebido da Farmacia Drogasil
↑
PIX
▢
QR Code
↓
Depositar
⇄
Transferir
Ultimas transacoes Ver tudo →
★
Cashback — Drogasil
Hoje, 14:32
+R$ 12,50
↑
Saque PIX
Ontem, 09:15
-R$ 200,00
★
Cashback — iFood
17/03, 20:45
+R$ 8,40
↓
Pagamento — Mercado Livre
16/03, 11:20
-R$ 89,90
⌂ Inicio
★ Lojas
☰ Extrato
⚙ Perfil

Web — Portal da Loja

Dashboard Vendas Produtos Perfil
Bom dia, Farmacia Drogasil
Resumo dos ultimos 30 dias
Vendas
R$ 24.580
▲ 12.4%
Cashback pago
R$ 1.229
▲ 8.1%
Transacoes
347
▲ 15.2%

Vendas recentes

Cliente Data Status Valor
Marco K. 18/03 14:32 Confirmado R$ 125,00
Ana S. 18/03 11:15 Pendente R$ 67,80
Carlos M. 17/03 16:40 Liquidado R$ 234,50
Julia R. 17/03 09:22 Confirmado R$ 89,90
05 — Spacing & Radius

Consistent rhythm

4px base unit. Comfortable density for a financial app that breathes.

2xs
2px
xs
4px
sm
8px
md
16px
lg
24px
xl
32px
2xl
48px
3xl
64px

Border Radius Scale

sm
md
lg
xl
full

Cashback Design System Preview · Generated by /design-consultation · March 2026