Moola Brand Guidelines
Based on the uploaded brand system HTML file
Moola Brand Guidelines v2Brand Overview
Moola is a modern financial guidance platform designed to help people understand, model, and improve their financial future with confidence. The brand combines behavioural finance, intelligent modelling, and clean product design to create an experience that feels empowering rather than intimidating.
The visual identity balances:
Trust and stability through deep navy tones
Energy and optimism through signature orange accents
Simplicity and clarity through restrained typography and layout systems
The Moola brand system operates with a dual-voice identity:
Marketing Voice — outward-facing, aspirational, expressive
Product Voice — focused, calm, utility-driven
Brand PersonalityCore Traits
Approachable
Intelligent
Calm
Empowering
Human
Tech-forward
Clear, not clinical
Tone of Voice
Moola should sound:
Confident but not arrogant
Helpful but not patronising
Intelligent without jargon
Calm under financial stress
Practical and optimistic
Avoid:
Corporate banking language
Fear-based messaging
Excessive hype
Aggressive “wealth guru” framing
Overly technical financial terminology
Logo SystemThe Moola Mark
The logo is built around a double-M monogram representing:
Moola
Money
The symbol is formed using negative-space chevrons.
The logo always includes:
The mark
The “Moola” wordmark
The orange terminating dot
“Moola.” with the period is the complete logo.
Brand Voice RulesMarketing Voice
Used for:
Website
Social media
Investor decks
Campaigns
Press
Partnerships
Merchandise
Marketing Logo Rules
Orange mark
Navy or white wordmark depending on background
Gradient wordmark allowed for hero moments only
Product Voice
Used for:
Dashboard
Chat experiences
Logged-in surfaces
Onboarding
Product emails
Internal product UI
Product Logo Rules
White mark
White wordmark
Orange dot
Displayed on navy backgrounds only
The Sign-In Exception
Although technically outside the app, the sign-in experience uses the Product Voice because it represents the final stage of the product conversion journey.
Colour PalettePrimary Brand Colours
| Colour | Hex |
|---|
| Navy | #0F172A |
| Orange | #FF6B2C |
| Orange Hover | #E85D22 |
Surface Colours
| Usage | Hex |
|---|
| Page Background | #EEF2F7 |
| Card Background | #FFFFFF |
| Subtle Background | #F8FAFC |
| Border | #E2E8F0 |
Typography Colours
| Usage | Hex |
|---|
| Primary Text | #0F172A |
| Secondary Text | #475569 |
| Muted Text | #64748B |
Semantic Colours
| Usage | Hex |
|---|
| Success | #22C55E |
| Error | #EF4444 |
| Warning | #F59E0B |
TypographyPrimary Typeface
Inter
Inter replaces all previous typography systems and is used across:
Product
Marketing
Decks
Social
Emails
UI
Font Weight Usage
| Weight | Usage |
|---|
| 400 Regular | Body copy |
| 500 Medium | Captions, navigation |
| 600 Semibold | Card titles, emphasis |
| 700 Bold | Headings, metrics |
| 800 ExtraBold | Display headlines, logo |
Typography Principles
Use negative tracking on display sizes
Maintain strong hierarchy
Prefer clarity over density
Large headlines should feel confident and spacious
Body copy should remain highly readable
The Orange Dot SystemPurpose
The orange dot is a signature motif — not decoration.
It references the period in “Moola.” and acts as a visual anchor across the system.
Approved Uses
The orange dot may appear:
Beside key metrics
Beside milestones
On charts
In “Actions for you”
As part of the wordmark
Rules
Maximum 5–7 visible dots per screen
Always use #FF6B2C
Never use as generic bullets
Never recolour
Never overuse
Product UI PrinciplesDesign Philosophy
The product interface should feel:
Calm
Spacious
Trustworthy
Guided
Intelligent
The UI should reduce financial anxiety rather than amplify it.
Layout System
Dashboard Structure
Contained panels
Soft borders
Subtle shadows
Generous whitespace
Rounded corners
Page Background
#EEF2F7
Panel Radius
12px
Chat Sidebar
White background
Orange accent border
Light user bubbles
Navy bot identity
Logo Usage RulesDo
Keep mark height equal to the capital “M”
Maintain clear spacing around the logo
Use SVG for digital assets
Use the correct logo voice for each environment
Preserve the orange dot
Don’t
Stretch or distort the logo
Remove the dot
Recolour the mark
Use the product logo on light backgrounds
Use marketing logos inside the authenticated product
Apply shadows or effects
Brand Experience PrinciplesMoola should always feel:
1. Clear
Users should immediately understand what matters.
2. Human
Financial planning should feel conversational, not institutional.
3. Calm
The interface should reduce cognitive load.
4. Intelligent
The system should feel sophisticated beneath a simple surface.
5. Intentional
Every colour, dot, spacing rule, and motion cue should feel purposeful.
Messaging PrinciplesFocus On:
Confidence
Optionality
Visibility
Long-term thinking
Decision-making
Trade-offs
Personalisation
Avoid:
Shame-based budgeting
Hustle culture
“Get rich quick” framing
Fear-driven finance language
Overcomplication
Brand Mission
“At Moola, we believe your relationship with money is as unique as your fingerprint. Generic advice fails because it ignores who you are as a person.
Your financial goals and risk tolerance aren't just numbers — they’re expressions of your personality, values, and life experiences.
That’s why we built the first financial platform that starts with understanding you, then builds everything else from there.”
Internal Brand Rule
Logged out = Marketing
Logged in = Product
This is the single most important rule in the Moola visual system.
