Our core brand colour (High Blue) should be the predominant colour used across both marketing and the on-platform experience to help created maximum recognition of the Mixcloud brand. High Pink is our secondary brand colour and is used hand-in-hand with High Blue in the majority of our visual brand expression (and is used as our secondary UI colour within the platform experience. Low Blue and White are the primary ‘base’ colours that act as the more functional side of our primary colour palette.
Base colours
Base 90 #22293C
Base 70 #61667A
Base 20 #D2D3D7
Base 5 #F4F4F5
Base 80 #2A3145
A core part of the brand’s palette is a small collection of ‘base’ colours that power a lot of the utilitarian elements across the product; Text, headings and structural elements within the UI all make use of these colours.
Secondary colours
Yellow Light #F3F810
Aqua Medium #19C3B9
High Blue Tint #E2E3FF
Violet Tint #FDE1F7
Yellow Tint #F9FBB2
Green Tint #E3FAF0
Green Medium #0CC281
Orange Medium #F45827
Pink Medium #D20442
The secondary colour palette has been created to give us more flexibility and creative freedom in our brand expression while aiming to retain consistency, brand recognition and an order to our visual output.
The UI set of colours has specifically been designed for use within the UI. They have been selected for their functional uses (stated below).
Examples in situ
Duo combos
High Blue and High Pink should be used together in a decorative way that doesn’t require strict accessibility. Large headlines are ok, but anything at a smaller size will not pass accessibility.
High Pink on High Blue (or vice versa) for any text that needs full legibility should not be used for accessibility reasons.
Trio combos
High Blue and High Pink can be used together with an accent of orange, primarily when applying a Gradient Map. The orange should make up 10% of the colour in the imagery, with High Blue taking up at least 50%. High Blue should be the majority.
Orange should never be the primary colour when using Core Colour combinations.
This trio combo can work effectively when used in gradient maps that create an interesting clash of colours. It especially works well with monochrome touches to offset the bold use of colour.
An imbalance of this trio combo can look too forced or messy. High Blue should ideally be a prominent component in this combo.
Trio combos
Low Blue (as well as other base colours) can be used alongside Blue and Pink to create interesting compositions that have monochrome elements to them.
There should always be an element of High Blue in these compositions - they should never be only monochromatic.
You can use any of the Base colours to apply a monochrome filter over photography that may not be in brand colours / too bright. It should always have elements of Core colours (prioritising High Blue).
If they are monochromatic, High Blue should be prioritised as the highlight colour, there should never only be a presence of Pink.
Trio combos
This trio combo can work effectively when used in gradient maps that create an interesting clash of colours. It especially works well with monochrome touches to offset the bold use of colour.
Blue should be the primary colour (background) or one of the Base colours.
Content coming soon
We created a library of illustrations that reference underground music culture. They were created based on shapes, iconography and characters that occur in prolific club posters and album artworks. They help bring a sense of personality, humanness and character to our overall branding.
Core terms and features
Mixcloud
the entire suite of Mixcloud products
Mixcloud Pro
Our creator subscription product membership (also known as ‘Pro for creators’).
Mixcloud Premium
Our subscription product for listeners (also known as ‘Premium for listeners’).
Channel subscriptions (Previously SELECT)
our fan-to-creator subscription product
Pro members
A creator who pays for Mixcloud Pro
Premium listeners
a user who pays for Mixcloud Premium
Mixcloud Live
our live-streaming product
Posts
A way for creators to communicate with their fans
Charts
lists of popular shows per tag
Categories
featured shows + charts by genre
Stats
creator stats portal
Channel subscription stats
additional stats portal for Pro creators
Dashboard
a user’s logged-in homepage
Chat
the chat room on a live stream
Boosts
our creator self-serve advertising product
Wordmark
The foundation of our visual brand is the Mixcloud logo. It’s an authentic mark reflecting our connection to Mixcloud listeners, creators and the community. Download our logos here.
Icon
Our logo has been designed to dynamically adapt to communications, contracting down to our icon and up to our full wordmark.
Icon examples
The icon represents Mixcloud in areas with limited space or as a visual shorthand across the Mixcloud digital product and our splash screen. The icon should be used in white when on a Blue Background.
Wordmark colour usage
A) Pink on High Blue
Wherever possible, this colour combination should be used to present the wordmark...
B) White on High Blue
...but at small sizes, this combo should be used to retain maximum accessibility.
A) Pink on High Blue
When the logo is overlaid on top of imagery, it should be displayed in white.
B) White on High Blue
Generally logos can be added on top of collages using the same effects as the composition.
Logo misuses
Do not split, re-stack or reflow the logo.
Do not rotate characters.
Do not split the logo into two colours.Mixcloud should always be shown as one word in one colour.
Do not use different colour combinations for primary Mixcloud applications. Ensure the primary palette is always used.
Textures
A bank of spray paint textures that has been created to be used as a background for any asset. These can be used to underline or highlight text. They can be used in original colours, with brand colour overlays or made large and used with the “saturation” blend mode.
Download here
In use
Scribbles
xx
In use
Interacting with text
“Desaturated” to give a Grey tint
Using scribbles as borders around photography
Using scribbles in colour
Photography
The photography we use as part of our graphic language should always capture the energy of underground music culture through its candid nature and lo-fi over high fidelity, with ‘real’ people at its core.
Textures
A bank of spray paint textures that has been created to be used as a background for any asset. These can be used to underline or highlight text. They can be used in original colours, with brand colour overlays or made large and used with the “saturation” blend mode.
Download here
In use
Scribbles
xx
In use
Interacting with text
“Desaturated” to give a Grey tint
Using scribbles as borders around photography
Using scribbles in colour
Photography
The photography we use as part of our graphic language should always capture the energy of underground music culture through its candid nature and lo-fi over high fidelity, with ‘real’ people at its core.
Value proposition
Mixcloud helps music creators build passionate communities by offering a streaming platform that prioritizes human connections.
Company description
Mixcloud is a music streaming service that enables you to legally live stream and upload mixes, radio shows and original tracks for free. We build tools to help DJs, radio hosts and producers build an online community, reach a wider audience and make money from music.
We've created an environment where every genre, scene and grassroot movement can thrive. Where people who care about music can connect deeply, beyond the algorithm, human to human. We have unique license deals and copyright clearing technology, meaning we pay royalties on the music played and you don’t have to worry about copyright issues.
A Pro subscription provides you with tools to further your career, a Premium subscription offers an uninterrupted, offline listening experience. Mixcloud: People-powered music.
Mixcloud Pro
Tagline
All the tools you need to play and share music with your fans
Value proposition
Live stream, upload and share music. We take care of the copyright.
Description
Mixcloud Pro gives you all the tools you need to play and share music. Become a member to Live-stream. Upload. Share. Learn. Engage. We take care of the copyright. Live-stream music without takedowns. Play music and DJ on the only streaming platform that takes care of music copyright for you. Never worry about copyright and DMCA again. We identify the music you play and pay royalties on your behalf.
That means no takedowns for you and the artists and songwriters you play get paid. Grow your fans, followers and career. Unlock features to message your fans, customize your channel and see advanced stats. Everything you need to grow your career.Join the creator community that genuinely cares about music. Mixcloud is one of the only communities that cares about building a fair and equitable future for music. If you care about music, you're already one of us.
Mixcloud Premium
Tagline
Listen without limits and download for on-the-go listening.
Value proposition
Use this message in places where you want to connect the product to a bigger story about the company.
Support the artists and creators behind the music you love, legally and fairly.
Description
Go Premium to upgrade your playback experience across any channel and on any device.Your subscription helps cover the costs of supporting the music without needing to rely on advertising.
tracks
Tagline
All of your music in the right place
Value proposition
Share your unreleased music with a community of tastemakers and curators who are always on the lookout for new music.
Description
A home for everything you do as a creator
Upload and live stream mixes, radio shows and tracks. No other platform offers creators and curators so many ways to express themselves.
Improve your production skills Share unlisted tracks to get private feedback early on and see your ideas progress.
Go Pro to unlock unlimited track uploads
Share as many tracks on Mixcloud as you like. Plus, gain access to live streaming, HQ audio, monetization options, engagement stats and much more.
Channel subscriptions
Tagline
Support the creators you love
Value proposition
Subscribe to a creator’s channel to directly support them and the music they play in their shows.
Description
A fan-to-creator membership Everyday on Mixcloud, over 1 million minutes of audio are uploaded by creators and listened to by fans worldwide for free. Mixcloud Channel Subscriptions let you get more from your favorite creator channels for a small monthly fee.
A model for everyone Mixcloud Channel Subscriptions are more than just a fan club. It’s a unique revenue share model where everyone involved in making the shows you listen to gets their cut, fairly and legally.
Give more to get more By subscribing to a creator, they can reward you with an even better listening experience on their channel.
Value proposition
By boosting your shows you can increase your visibility across Mixcloud, reach new audiences and move up the charts.
BOOSTS
Tagline
Increase your visibility and audience
Strapline
PEOPLE POWERED MUSIC
How we bring the Mixcloud brand to life through motion is an important aspect of our guidelines. The principles of celebrating people first and foremost, as well as the culture of underground music has inspired how we do this.
Animated elements
We have created a bank of graphic elements that can be used to express an analog, hand-made feel to our marketing touch points, be it across socials, on platform, or wherever moving image is utilised.
Scribbles
Gradient Maps
Typography
Backgrounds
Illustrations
TRANSITIONS
we have a bank of transitions that can be used in between the templated compositions or to transition between full bleed content to give it the collage effect. You can look through these here.
Mixcloud Pro
Our creator subscription product membership (also known as ‘Pro for creators’).
Colours
High Blue #5000FF
High Pink #F69AE4
Low Blue #171C2B
White #FFFFFF
Logo variants
Mixcloud Premium
Our subscription product for listeners (also known as ‘Premium for listeners’).
Colours
Low Blue #171C2B
High Blue #5000FF
Yellow Light #F3F810
White #FFFFFF
Logo variants
Sine Sans
Sine Sans is the primary typeface across all marketing material where we want to express the visual brand to its full potential.
Sine Sans is a bespoke typeface created for Mixcloud with creative ligatures and fluid forms, connecting and amplifying communities and cultures across our brand. Wherever it is used, it should always be set in uppercase. Download Sine Sans here.
Considerations
Use Sine Sans in uppercase only
Use Sine Sans across social and marketing material where possible
Avoid over-use of Sine Sans within platform UI
Avoid over-use of ligatures in any given headline
Ligatures & Alts
Sine Sans contains connective, fluid ligatures and a set of alternative characters. These have been designed bespokely to represent movement, rhythm and moods. These ligatures and alts can be used to dial up the Mixcloud personality across headlines.
DM Sans
DM Sans is our secondary, accompanying brand font. In marketing material it is used to support Sine Sans. It has been chosen to work hard across digital environments and small sizes. Download DM Sans here.
Considerations
Use DM Sans for body copy
Use DM Sans Regular wherever possible
Use DM Sans Medium when sub headings require added visual hierarchy
Avoid using DM Sans in uppercase
Best practice
'Functional-first'
The use of DM Sans for headlines within the core platform experience is preferable compared to the use of Sine Sans. The over-use of Sine Sans here takes away from our functional-first design approach.
Sparing use of Sine Sans
Marketing touch points such as the example below should make minimal, impactful use of Sine Sans to add some reference to the Mixcloud visual brand.
Controlled use of ligatures
Allow multiple ligatures to dial up the headline. Middle of the word works best.
Avoid changing the meaning of the word or making it difficult to read through the use of ligatures.
Text effects in marketing material
Sine Sans and DM Sans should be run through the Mixcloud text effect filter when adding it to collage-based assets, so that it blends seamlessly with the image and feels part of it. Download text effect here.
Comfortable line lengths
The optimal line length for body text is 50–75 characters. This count will be smaller for headings.
Avoid using line lengths that are too long (which make it harder to read the content).
DM Sans vs Sine Sans
Use DM Sans when titles are longer than 5 words.
Avoid setting longer titles in Sine Sans.
Sparing use of center-aligned text
If used sparingly and with a comfortable line length, center aligned text works perfectly well within the platform UI.
Product type stack
Font: Sine Sans Font-size: 88px Line-height: 1 Attributes: Uppercase / No Alts
Display one
Font: Sine Sans Font-size: 64px Line-height: 1 Attributes: Uppercase / No Alts
Display Two
Font: DM Sans Regular Font-size: 54px Line-height: 1.1 Attributes: Sentence case no Alts
Display Three
Font: DM Sans Regular Font-size: 42px Line-height: 1.1 Attributes: Sentence case no Alts
Headline One
Font: DM Sans Regular Font-size: 32px Line-height: 1.1 Attributes: Sentence case no Alts
Headline Two
Font: DM Sans Regular Font-size: 24px Line-height: 1.2 Attributes: Sentence case no Alts
Headline Three
Font: DM Sans Regular Font-size: 18px Line-height: 1.1 Attributes: Sentence case no Alts
Headline Four
Font: DM Sans Regular Font-size: 16px Line-height: 1.4 Attributes: Sentence case no Alts
Body Regular
Font: DM Sans Regular Font-size: 14px Line-height: 1.4 Attributes: Sentence case no Alts
Body Small
Font: DM Sans Regular Font-size: 11px Line-height: 1.3 Attributes: Sentence case no Alts
Body Extra Small
Font: DM Sans Regular Font-size: 18px Line-height: 1 Attributes: Uppercase no Alts
Button Large
Font: DM Sans Regular Font-size: 14px Line-height: 1 Attributes: Uppercase no Alts
Button medium
Font: DM Sans Regular Font-size: 14px Line-height: 1 Attributes: Sentence case no Alts
Button Small
Scribbles
A set of hand-drawn scribbles are available to include in any compositions to add a human touch that gives a sense of personality and looseness to the brand. These can be downloaded here.
In use
Interacting with text
“Desaturated” to give a Grey tint
Using scribbles as borders around photography
Using scribbles in colour
Stickers
We created a library of illustrations that reference underground music culture. They were created based on shapes, iconography and characters that occur in prolific club posters and album artworks. They help bring a sense of personality, humanness and character to our overall branding.
This library of illustrations can be used with and without background. They can be used to bring personality and life to an asset, as an emoji within a text paragraph, on a saturation filter overlayed on a texture or on platform to represent creator avatars or to bring characters to the platform. The smiley plays the largest role out of all of the illustrations. There are many variations of the smiley but the standard one is used throughout many assets, to add a human element. It also references music culture like the famous Acid House smiley that has become an iconic symbol of underground dance music culture. Download the stickers here.
In use
These can be used without background similarly to how you would use an emoji to bring meaning or character to a text.
Set to “saturation” overlay to make them semi transparent and grey these can embellish textured backgrounds.
Primarily on UI mock ups, these can be used as avatars or show artworks.
These can be used on platform to add character and colour.
A bank of spray paint textures that has been created to be used as a background for any asset. These can be used to underline or highlight text. They can be used in original colours, with brand colour overlays or made large and used with the “saturation” blend mode. Download here.
Core textures
Secondary textures
B/W textures
In use
The photography we use as part of our graphic language should always capture the energy of underground music culture through its candid nature and lo-fi over high fidelity, with ‘real’ people at its core.
Photography to avoid
Avoid stock imagery that has a corporate, overly produced feel e.g. smoke and lasers EDM vibes from huge festivals and large festival crowds of people. Crop if needed.
Working with press shots
Apply collage technique to press shots. Using masks to give paper or cut out effect. Can apply gradient map and threshold if permission extended and the colours clash with our brand colours.
Avoid leaving press shots untreated without our graphic language injected into the image somehow e.g. the treated typography
.jpg)
.jpg)
