Brand
Guidelines.
How BudgetPay looks, sounds and shows up in the world. Keep it consistent, keep it trusted.
01
Foundation
BudgetPay exists to give South Africans dignity in debt. Every design decision flows from three brand-grade commitments.
Trustworthy & secure
Precise numbers, clear states, visible security. We earn the right to handle money.
Warm & non-judgmental
No lectures, no fine-print traps. We meet people where they are with empathy.
Modern & empowering
Tech-forward and optimistic. Every screen should feel like a step forward.
Mission
Turn scattered South African debt into one calm view, one honest plan, and one monthly payment anyone can keep — so financial anxiety turns into financial progress.
02
Personality
Three adjective pairs define the voice, visuals and product decisions.
We show the numbers even when they're uncomfortable. No spin, no jargon.
Reassuring without being clinical. Warm without being chatty. Measured without being boring.
Rands, SA context, SA names. But world-class in every pixel.
Our audiences
Individual customer
The payer
- Overwhelmed by many small debts
- Wants one clear view and one payment
- Needs to trust the platform with money
- Values dignity — not judgment
Business / vendor
The payee
- Chasing late payments is costly
- Needs reliable recurring collection
- Wants compliance handled for them
- Values reconciliation and reporting
03
Logo
The BudgetPay logo is a lockup of the bp monogram mark and the Quicksand wordmark. Use both together wherever space allows.
budgetPayPrimary — light bg
Indigo mark, Midnight wordmark. Use on white or light-slate surfaces.
budgetPayReversed — dark bg
White mark with blue stroke, white wordmark. Use on Midnight or dark surfaces.
04
Symbol directions
Three sanctioned approaches for placing the symbol. One is recommended for most uses.
05
Variations & clear space
Four logo formats cover every placement need. Always maintain the exclusion zone.
budgetPayFull lockup
Symbol only
budgetPayReversed
budgetPayMono dark
Clear space
Keep a protected zone equal to the height of the symbol container on all four sides. Nothing — no text, icon, image, or edge — may enter this zone.
budgetPay06
Misuse
These alterations undermine brand recognition and trust. Never do them.
budgetPay07
Colour
Three primaries, ten tints each. Use ratio 60 / 30 / 10: white & slate, then blue, then emerald as accent.
Blue scale
Emerald scale
Gradients
135° · #1E40AF → #3B82F6
135° · #1E40AF → #10B981
135° · #10B981 → #34D399
- Use the 60 / 30 / 10 ratio: mostly slate, then blue, then emerald as accent.
- Use Emerald only for positive money states — paid, saved, on track, growth.
- Text: slate-800 (#1e293b) on light surfaces, white on dark.
- Maintain WCAG AA contrast on interactive elements.
- Use green for errors, warnings, or destructive actions — that's red/amber.
- Put blue text on green (contrast fails).
- Saturate large background areas with the primary blue.
- Introduce new hues not in the palette.
08
Typography
Inter for all UI. Quicksand exclusively for the logotype. Never use Quicksand in body copy.
Currency format
Per SA convention: space as thousands separator, comma as decimal. Always use the rand symbol with a space: R 26 900,00 — never R26900.00.
Logo font — Quicksand
Only for the wordmark. Never in body, UI or marketing copy.
budgetPay09
Iconography
2 px stroke, rounded caps & joins — Lucide style. Always inside a 52 px tile with 14 px border-radius. Never mix filled and outline.
- Use consistent 2 px outline stroke, rounded.
- Always place in a coloured tile — never bare on a page.
- Match the icon colour to the semantic category.
- Mix filled and outline icons in the same view.
- Use multi-colour or skeuomorphic art.
- Drop icons below 20 px or shrink hit targets under 44 px.
10
UI Components
The core interactive vocabulary. Stick to these tokens — don't invent new variants.
Buttons
Status badges
Input field
Outstanding balance
Debt row card
11
Voice & tone
Four principles govern every word — from error messages to marketing headlines.
Clear over clever
Say the number, the date, the action. Clarity is kindness when money is tight.
On their side
We're an ally, not a collector. "Let's sort this out," never "You owe."
Calm & honest
No hype, no hidden fees in the small print. Confidence comes from candour.
Locally fluent
Rands, SA context, everyday English. Built here, for here.
Say this — not that
| ✓ Say this | ✗ Not that |
| See everything you owe, in one place. | Aggregate your liabilities across providers. |
| Pay it off from R450 a month. | Flexible repayment solutions available. |
| You're on track. Two payments to go. | Account 73% amortised. |
| Let your customers pay you monthly — automatically. | Enterprise-grade recurring collections infrastructure. |
| Missed a month? Let's adjust your plan. | Your account is in arrears. |
Tagline options
12
Applications
How the brand appears across touchpoints — from app icons to email signatures.
App icons
80 px60 px44 px32 px
20 pxBusiness card
budgetPay+27 21 000 0000 · budgetpay.co.za
Email signature
budgetPayDebt, on your terms. · budgetpay.co.za
13
Co-branding
When appearing alongside a partner, the BudgetPay lockup always leads. Separate with a thin neutral divider. Never merge or overlap the two marks.
budgetPay🏙Partner nameBudgetPay lockup leads · 1 px slate-300 divider · partner mark at equal height
- Lead with BudgetPay on the left.
- Use a thin neutral divider between marks.
- Keep both marks at the same optical size.
- Overlap or combine the two logos.
- Let a partner mark dominate in size.
- Use the gradient mark in a co-brand context.