Brand Identity & Design System
Identity
Core Values
Quilter Invest's core values
Empowerment
Simplicity
Trustworthy
Nuture
Insightful
Different
Our Name
Quilter Invest
quilterinvest.com
Our Mission & Purpose
At Quilter Invest, our mission is to empower individuals to achieve financial success and build lasting wealth. We provide innovative investment solutions and smart saving strategies that enable our customers to navigate their financial journeys with confidence
Our Quilter Invest Brand Story
We started as a small investing app, but now we are excited to announce our rebranding to Quilter Invest. This transition marks a significant milestone in our growth journey, reflecting our evolution and maturity as a company. With the introduction of new saving account types, we have expanded our offerings to better serve our customers and meet their diverse financial needs.
At Quilter Invest, we believe investing should be clear, accessible and empowering. It is not a secret club or a second job. It is a way to take control of your financial future with the right tools and the right support.
Built on the experience and security of Quilter, one of the UK’s most trusted wealth management firms, Quilter Invest brings that expertise into a modern digital platform. It is designed for a new generation of investors, from first time savers and career builders to confident planners preparing for the future.
Our goal is to remove barriers and reduce complexity. No jargon, no unnecessary pressure. Just intuitive tools, transparent pricing and expert built portfolios. Whether you are starting with £10, saving for a long term goal, or preparing for retirement, we provide the clarity and guidance to help you move forward with confidence.
This is not only about portfolios or performance. It is about building a future you believe in, supported by a partner you can trust.
Welcome to Quilter Invest. Clear, modern investing on your terms.
Tone of voice
Tone of Voice
Our Tone Is:
Clear
Confident
Human
Modern
Example Applications:
Onboarding screen: > “We’ll help you grow your money let’s get started.”
CRM nudge: > “Your money’s just sitting there. Let’s put it to work.”
Help/Support:> “We’re here if you get stuck just drop us a message.”
Do’s:
Use contractions (We’ll, You’re, It’s)
Explain before you persuade
Focus on clarity over cleverness
Don’ts:
Don’t use technical jargon unless explained
Don’t be overly salesy or pushy
Don’t write like a bank brochure
Logos
Primary Logo
Quilter Invest full logo
Quilter Invest Short form logo
Logo Variants
Approved Colours. Bellow you will find all the logos in all format types. | Logo do's & don'ts
Request a logo
Download SVG
Colour Palette
Primary Palette
Fill Colours
Grey Colours
Background colours
For use only with backgrounds
Typography Styles
Hierarchy
This is how we show the importance of titles against body text.
Aa Bb Cc Dd Ee
Aa Bb Cc Dd Ee
Aa Bb Cc Dd Ee
Aa Bb Cc Dd Ee
Aa Bb Cc Dd Ee
Aa Bb Cc Dd Ee
Body Copy
Typography - Inter
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Quotes
Typography - Inter
The ultimate Interface component kit built to create harmony across your products.
The ultimate Interface component kit built to create harmony across your products.
Additional Copy Elements
- Example Item 1
- Example Item 2
- Example Item 3
- Example Item 1
- Example Item 2
- Example Item 3
- Example Item 1
- Example Item 2
- Example Item 3
Additional Copy Elements
This line rendered as bold text.
This line rendered as italicized text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as deleted text.
You can use the mark tag to highlight text.
You can use the mark tag to highlight text.
Text Alignments
Left aligned text
Center aligned text
Assets & Imagery
Stock imagery
Acceptable Imagery | Imagery do's & don'ts
The correct imagery must be used when downloading or using stock imagery. Here is the file containing the folder of current already downloaded imagery and approved images that have been used in media across the Wombat estate
Product Imagery (WIP)
Acceptable Product imagery | Product imagery do's & don'ts
We have some pre-made assets that were created for use in marketing materials and across the Wombat estate
PressKit
Available on request | Request press kit zip
Press kit contains - images and assets approved for use by a third party
Brand Patterns
Patterns and device elements (WIP)
Acceptable Imagery | Imagery do's & don'ts
The correct imagery must be used when downloading or using stock imagery. Here is the file containing the folder of current already downloaded imagery and approved images that have been used in media across the Wombat estate
Icons
Pictograms
Buttons
Functional Buttons
Elevation & Shadows
Elevation & Shadows
Outer Shadow, Inner Shadow | Shadow do's & don'ts
Distance: 2px
Blur: 5px
Size: 0px
Distance: 3px
Blur: 5px
Size: 0px
Distance: 5px
Blur: 16px
Size: 0px
Distance: 20px
Blur: 40px
Size: 0px
Distance: 30px
Blur: 60px
Size: 0px
Distance: 1px
Blur: 2px
Size: 0px
Distance: 1px
Blur: 3px
Size: 0px
Distance: 6px
Blur: 8px
Size: 0px
Borders and Radii
Borders
Acceptable borders and widths | Border do's & don'ts
This is the acceptable use of borders in the Wombat brand
Corner Radius
Acceptable corner radius | Radius do's & don'ts
Corner radii are applied to all box assets. You should select the correct corner radium from the approved below. Depending on the design you must not use less than the minimum corner radius. We use this so that our corners are not sharp
Backgrounds
Backgrounds & Contrasts
Acceptable Backgrounds | Background do's & don'ts
In the section, you can find all the approved backgrounds that you are approved to use within the Wombat brand
Solid Colour Backgrounds
Gradient Backgrounds
We do not use colour gradients for backgrounds
Asset use in Backgrounds
Acceptable asset usage in backgrounds | Background do's & don'ts
In the section, you can find all the approved way we use assets in backgrounds
Spacing & Composition
Spacing
Acceptable Spacing | Spacing do's & don'ts
How and when to use the spacing system in designs. Please note that there will be exceptions to these rules - this is a loose guide on how the design spacing is selected
No personal space
0px
When items need to be very close together
Like a couple
4px
Use this spacing when objects or text need to be associated together and the amounts of text are small and short.
We are close
8px
Use this spacing when objects or text needs to be close but have longer text or if the object is too distracting then use this
Default padding or margin
16px
This is used mostly in the app. when in doubt about which spacing to use then use this spacing. 16 provides enough space so that text doesn't become congested and becomes effort to read.
Need some space
24px
Use this spacing when objects or text need breathing space and there needs to be space between as they are not related or the design is busy and needs more breathing space so as to not cause grouping or clutter.
Let it breath
32px
Use this spacing when objects or text need breathing space, generally used to separate large blocks of text or if the design is busy and needs more breathing space so as to not cause grouping or clutter
We were on a break
40px
Use this spacing when to define larger gaps between content with lots of information or clashing imagery.
You said you wanted space
48px
Use this spacing when there is a need for a blank area.
Avoid clutter
The design needs to remain clear and simple. It should have one main focal point and a secondary point. All Call To Actions must be clear, and easy to understand and identify. The design must remain simple and use no more that two main assets. Avoid placing too many assets in the graphic
Points of Interest
The design needs to remain clear and simple. It should include one main focal point, plus a call to action
Avatars
Avatars
TB
TB
T
T
T
Field Elements
Form Fields
Input Fields WEB ONLY
Alert Bars
Notification
Input Fields (WEB ONLY)
Badges
Pill Badges
Notification markers (WEB ONLY)
Contextual Badges
Call out badges
Version Control
WIP
Still to come
Still working on it