Loading
BRAND GUIDELINES
Brand Hub
The single source of truth for Zeam's visual identity. Everything you need to communicate our brand clearly, consistently, and confidently.
01 - Logo Section
Logo Communication
Our logo is a custom-lettered wordmark engineered for legibility across digital and physical interfaces. By balancing geometric stability with organic curves, the Zeam logo remains distinct at any scale.
- Primary Mark: Optimised for dark interfaces to reduce eye strain while maintaining brand authority.
- Secondary Mark: Reversed for light backgrounds, ensuring a rigorous 4.5:1 contrast ratio for accessibility.
On Dark
Used for hero banners and marketing splash screens
Light logo on dark
Move Money Instantly.
On White
Used for banners and marketing splash screens
Dark logo on white
Move Money Instantly
Do - Subject & Context
- ✓Something you can do
- ✓Something you can do
Info - Subject & Context
- ·Something you can do
- ·Something you can do
02 - Core DNA / Typography
Words carry our voice
Zeam uses Epilogue for impact-driven headings and Inter for readable, friendly body copy. Maintain the visual hierarchy rigorously across all touch points.
- Always left-align body text for natural reading flow
- Centre-align only for short hero or CTA headlines
- Minimum body size: 14px. Never go below this
- Use yellow accent sparingly — one word, never full sentences
03 - Core DNA / Colour Palette
Colour is how we feel familiar
Deep Purple anchors every brand moment. Yellow energises calls to action. Layered violets create depth. Click any swatch to copy its HEX value.
Approved Colour Pairings
Zeam Brand Text
White + Deep Purple
16.7:1 contrast
Zeam Brand Text
Deep Purple + White
13.8:1 contrast
Zeam Brand Text
Off White + Ink
16.7:1 contrast
04 - Visual Style Book / Illustration Library
Illustrations that feel alive
Our custom 3D glass object library conveys security, clarity, and modernity. Each object maps to a core product concept — use them intentionally, never decoratively.
Correct Usage
- ✓Place on dark purple or near-black backgrounds
- ✓Use at 1:1 aspect ratio, never stretch
- ✓One hero illustration per section maximum
- ✓Pair with purple-toned glassmorphism UI
Avoid These
- ✕Never place on white or very light backgrounds
- ✕Do not resize below 80×80px
- ✕Never use more than 3 in a single frame
- ✕Don't add drop shadows or extra FX on top
Technical Specs
- ·Format: PNG with transparent background
- ·Colour space: sRGB / P3 where available
- ·Preferred export: 2× and 3× retina
- ·Animation: Lottie available for selected assets
05 - Visual Style Book / Photography
Real People, Real Moments
Zeam's photography celebrates authentic African everyday life — people using Zeam in real, relatable contexts. Warm tones, natural light, genuine expressions.
Do's — Subject & Context
- ✓Use candid, genuine emotional reactions
- ✓Show diverse age groups, genders, and regions
- ✓Include everyday African urban and peri-urban settings
- ✓Show phone screens with visible Zeam interface
- ✓Feature warm, sunlit outdoor environments
Don'ts — Common Mistakes
- ✕Avoid overly staged, obviously posed stock photos
- ✕Never use images with competing brand logos visible
- ✕Avoid cool, grey, corporate studio lighting exclusively
- ✕Don't use images that lack cultural specificity
- ✕Avoid filters that wash out skin tones
Do's — Technical Quality
- ✓Minimum resolution: 1200 × 800px @ 72 DPI for digital
- ✓Export formats: WEBP (primary), JPG (fallback), PNG (transparent elements)
- ✓Apply subtle purple vignette overlay for hero images
- ✓Always compress below 200KB for web performance
Don'ts — Overlay & Treatment
- ✕Never use heavy black overlays that obscure subjects
- ✕Don't apply artificial Instagram-style filters
- ✕Avoid clipping paths that create unnatural cut-outs
- ✕Don't use low-resolution or pixelated images anywhere
06 - 06 — Visual Style Book / mockups
One Brand, Infinite Interfaces.
Zeam’s visual language is built to scale across diverse digital touch points—from the palm of a user’s hand to a merchant’s desktop. Our mockups reflect a commitment to Clarity, Connectivity, and Security. Whether visualising a simple P2P transfer or a complex global exchange, the interface must feel airy, intuitive, and unmistakably Zeam.
01. Mobile Experience (P2P & Consumer)
- ✓The Intent: Mobile mockups should emphasise speed and ease of use.
- ✓Focus on "The Interaction." Use mockups that highlight high-frequency actions like entering a PIN, scanning a QR code, or confirming a transfer. Keep the "Success" states (the green checkmarks) prominent to build user trust.
02. Global Connectivity & Exchange
- ✓The Intent: Highlighting Zeam’s borderless nature.
- ✓When showcasing international features, use the "Map & Flag" assets. These mockups should emphasise real-time transparency—showing clear exchange rates (50.00→ Local Currency) and regional flags to represent global reach with a local feel.
03. Merchant & Desktop Dashboards
- ✓The Intent: Power, data, and professional utility.
- ✓Our dark-mode desktop mockups are designed for focus. Use these to showcase deep-tier information like transaction histories and API integrations. The dark UI reduces visual fatigue for merchants who use Zeam as their primary business operating system.
04. UI Typography & Elements
- ✓The Intent: Precision and consistency.
- ✓Every component follows a rigorous grid. From the rounded corners of our "Action Cards" to the specific weighting of our Inter body font, these elements are the building blocks of the Zeam experience.