Brand Book

Version 1.0 · March 2026
Confidential — For internal and partner use only

Table of Contents

  1. 01 Brand Overview
  2. 02 Logo System
  3. 03 Color Palette
  4. 04 Typography
  5. 05 Design Tokens
  6. 06 Component Direction
  7. 07 Voice & Messaging
  8. 08 Imagery & Illustration

Brand Overview

DreamPay is an international payment intermediary that enables Brazilian consumers to pay in BRL (via PIX or credit card installments up to 12x) at establishments in the USA and Eurozone, while merchants receive in EUR or USD without needing a Brazilian bank account.

Brand Essence

"Borderless payments, local experience."

DreamPay removes the friction of international payments by making cross-border transactions feel domestic for both sides: Brazilian consumers pay in reais with familiar methods (PIX, installments), and foreign merchants receive in their local currency with zero complexity.

Brand Personality

Trustworthy

Financial compliance, security-first messaging, transparent pricing

Modern

Clean interfaces, contemporary typography, blue-based fintech palette

Accessible

Simple 3-step flows, plain language, inclusive for non-technical users

Bridge-like

Connecting two worlds — Brazil and international commerce

Professional

B2B credibility for merchants + B2C clarity for consumers

Core Values

01

Transparency

IOF included, no hidden fees, clear exchange rates

02

Simplicity

Three-step flows, instant setup, no bureaucracy

03

Trust

Regulated intermediary, encrypted transactions, compliance handled

04

Accessibility

Familiar payment methods (PIX, parcelamento) for Brazilians abroad

05

Connection

Bridging Brazilian consumers to global commerce

Color Palette

A blue-based fintech palette that communicates trust, modernity, and professionalism. Supports both light and dark modes.

Primary Colors

DreamPay Cyan
#0EA5E9
Primary brand, CTAs, links, active states
Deep Navy
#0D1B2A
Text, dark backgrounds, high contrast
White
#FFFFFF
Backgrounds, foreground on dark

Secondary Colors

Sky Light
#E0F2FE
Accent backgrounds, highlights, hover states
Cloud
#EEF2F6
Secondary backgrounds, card fills
Steel
#5B6778
Muted text, secondary labels

Semantic Colors

Success
#22C55E
Payment confirmed, positive states
Destructive
#EF4444
Errors, failed payments, warnings
Border
#CBD5E1
Dividers, input borders, outlines

Dark Mode Palette

Dark BG
#08111C
Page background
Dark Card
#121F30
Card / surface background
Dark Primary
#12B1F3
Primary (brighter for contrast)
Dark Text
#F1F5F9
Body text on dark

Gradients

#0EA5E9 → #0369A1

Primary gradient — Hero sections, CTAs

#E0F2FE → #BAE6FD

Accent gradient — Subtle highlights

#08111C → #121F30

Dark hero gradient

Typography

DreamPay uses the Inter type family — Inter Tight for headings and Inter for body — with JetBrains Mono for code and data.

Font Stack

Inter Tight

Headings · Semi-Bold (600), Bold (700), Extra Bold (800)

ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklm
nopqrstuvwxyz
0123456789
Inter

Body · Regular (400), Medium (500), Semi-Bold (600)

ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklm
nopqrstuvwxyz
0123456789
JetBrains Mono

Code & Data · Regular (400)

ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklm
nopqrstuvwxyz
0123456789

Type Scale

Display Heading
48px / 3rem700-0.02emline-height: 1.1
Heading 1
36px / 2.25rem600-0.015emline-height: 1.2
Heading 2
30px / 1.875rem600-0.01emline-height: 1.25
Heading 3
24px / 1.5rem6000line-height: 1.3
Heading 4
20px / 1.25rem5000line-height: 1.4
Body Large — For lead paragraphs and prominent descriptions
18px / 1.125rem4000line-height: 1.6
Body — Default text size for paragraphs, descriptions, and UI text across all applications
16px / 1rem4000line-height: 1.6
Body Small — Secondary text, table content, helper text
14px / 0.875rem4000line-height: 1.5
Caption — Timestamps, footnotes, fine print
12px / 0.75rem4000.02emline-height: 1.4
Overline — Section Labels
12px / 0.75rem6000.08emuppercase

Design Tokens

Developer-ready design tokens for spacing, border radius, shadows, and responsive grid.

Spacing Scale (4px base)

4px
Tight gaps, icon padding
8px
Inline spacing, small gaps
12px
Input padding, compact cards
16px
Standard padding, card gaps
24px
Section gaps, card padding
32px
Section spacing
48px
Section margins
64px
Page sections
96px
Major section divisions

Border Radius

4px
sm
8px
md
12px
lg
16px
xl
24px
2xl
full
full

Elevation / Shadows

sm
Cards, inputs
md
Elevated cards, dropdowns
lg
Modals, floating panels
xl
Popovers, palettes

Grid System

Breakpoint Width Columns Gutter Margin
Mobile < 640px 4 16px 16px
Tablet 640–1024px 8 24px 32px
Desktop 1024–1280px 12 24px 48px
Wide > 1280px 12 32px auto (max 1280)

Component Style Direction

Visual direction for core UI components. Built on PrimeNG 19 Aura theme for Angular apps and Tailwind CSS utilities.

Buttons

Primary Button Secondary Button Ghost Button Destructive Button
Variant Background Text Border Radius Padding
Primary #0EA5E9 White 8px 12px 24px
Secondary #EEF2F6 Navy 8px 12px 24px
Ghost transparent Cyan 8px 12px 24px
Destructive #EF4444 White 8px 12px 24px

Inputs

Default state
Focus state
Error state

Cards

Default Card

bg-card, rounded-lg, border, shadow-sm, p-6

Elevated Card

bg-card, rounded-xl, shadow-lg, p-8, no border

Interactive Card

hover: border-primary/50, shadow-md, cursor-pointer

Voice & Messaging

How DreamPay speaks to consumers and merchants across different contexts. Uses feminine articles in Portuguese: "a DreamPay", "da DreamPay".

Brand Taglines

"Pagamentos sem fronteiras."
Clean, direct, universal
"O Brasil paga. O mundo recebe."
Captures the two-sided value
"Compre lá fora como se fosse aqui."
Consumer-focused, relatable
"Aceite o Brasil. Receba na sua moeda."
Merchant-focused, actionable
"Pagamentos internacionais, experiência local."
Comprehensive positioning

Tone of Voice

Marketing (Consumers)
Warm, reassuring, clear — "Compre no exterior, pague em reais"
Marketing (Merchants)
Professional, benefit-driven, confident — "Aceite pagamentos brasileiros. Receba em EUR ou USD."
Product UI
Concise, instructional, neutral — action-oriented microcopy
Support
Empathetic, patient, solution-focused

Tone Guidelines

Do

  • Use plain, direct language
  • Lead with the benefit, not the feature
  • Be specific about numbers (12x, IOF incluso)
  • Address the reader directly ("você")
  • Acknowledge the complexity you're solving

Don't

  • Use financial jargon without explanation
  • Start with "a DreamPay oferece..."
  • Use vague superlatives ("melhor", "incrível")
  • Use passive voice or institutional third person
  • Pretend international payments are simple

Example Hero Copy

Consumer Version
Compre no exterior, pague em reais.

PIX ou cartão parcelado em até 12x. IOF já incluso, zero surpresas na fatura.

Ver estabelecimentos
Merchant Version
Aceite pagamentos brasileiros. Receba na sua moeda.

Consumidores brasileiros pagam em BRL via PIX ou cartão parcelado. Você recebe em EUR ou USD, sem conta bancária no Brasil.

Criar conta grátis

Imagery & Illustration

Guidelines for photography, illustrations, and icon usage across all DreamPay touchpoints.

Photography Direction

  • Style: Clean, well-lit, editorial — avoid stock clichés
  • Subjects: Real business environments (shops, clinics, law offices), smartphones showing payment flows
  • Treatment: High contrast, desaturated with subtle cyan color grading
  • Avoid: Generic handshake photos, overly corporate imagery, busy backgrounds

Illustration Style

  • Approach: Flat, geometric, line-based with limited color palette
  • Colors: Brand cyan + navy + white, accent colors sparingly
  • Themes: Payment flows, currency conversion, bridge metaphors
  • Reference: Similar to Stripe's illustration system — functional, minimal, informative

Icon Style

Type Outlined, 1.5px stroke, rounded caps
Grid 24px with 20px and 16px variants
Color currentColor (inherits text color)
Set Lucide Icons or Phosphor Icons

Custom icons needed for:
Payment method logos (PIX, card brands), DreamPay-specific UI icons, currency symbols, and status indicators.