Music is beautiful.

Just as an orchestra is more than boxes of wood and strings and brass, a brand is more than a logo, colors, and fonts. It is a symphony of elements that work together to create something familiar. Music moves us. We hope our brand can do the same.

This is our sheet music.

The color of a creative sets its’ tone and mood. While the ethos of the brand should be fun, bright and bold, rather than setting a static usable palette, creatives should use color appropriate for it’s context.

Contextual Flexibility

Colors used should represent genre, style, and compatibility with other established palettes already present.

While the brand should adapt to it’s context, JioSaavn’s core brand should use the identity colors.

The core identity color system is deliberately limited. It focuses on conveying clarity and consistency.

Identity Color System

Primary

The four primary JioSaavn colors should be the foundation of any design, and used most regularly.

Secondary

Secondary colors should be used as accents to give detail in complex designs, layouts, and type hierarchies.

* Alert for use in UI only.
Don’t use in brand or communications.

JioSaavn has three main platforms with one primary typeface. Our mobile apps (Android and iOS), websites, and marketing materials use the google webfont Lato, in multiple weights and styles in order to distinguish hierarchy within layouts.

JioSaavn has one display font that is used only as a graphic element in creatives, and shouldn't be used for contextual details.

Primary, Lato

Aa

Aa Bb Cc | 1234567890

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz | Download Lato

Display Only, DIN Bold

Download DIN Bold

There are a 4 simple rules to improve typography across any given platform. Follow these and the result will be a clean, neat, and generally well designed piece that fits within the Saavn brand.

Of course, rules are meant to be broken. These rules are only meant to be a starting point, and certain assets can and will fall slightly outside of their descriptions.

Hierarchy

Arguabaly the most important thing to be aware of when using typography is Hierarchy. The primary focus of any design should be clarity in communication – which is the primary role of Hierarchy. Think of Hierarchy as a visual order of importance. This can be achieved with either (or both) size and syling.

Look at your page and ask what you see first, then second, and so on. Does this Hierarchy make sense? Does a Hierarchy even exist?

In the example to the right, you can see the Hierarchy used on this page. There is a clear Hierarchy given to the typography with both size and style.

Blackbird singing in the dead of night.

Take these broken wings and learn to fly.

All your life – you were only waiting for this moment to arise. Blackbird singing in the dead of night. Take these sunken eyes and learn to see. All your life – you were only waiting for this moment to be free.

Sizing

While it is important to maintain a good Hierarchy, it is also important to maintain a sizing system that creates consistency.

No document, webpage, or asset should have more than 5 text sizes. This allows for enough variation to create a strong Hierarchy, without over complicating a layout, or impeding the ability to create a consistent sizing system.

This webpage, for example has only 4.

h1 - Heading

p - Paragraph

Label – Labels

caption - Captions

Accent or Emphasize

Utilizing a fonts’ weights can help create emphasization of words or sentences without breaking your sizing system. Not only that, using accents and emphasis styles can help break up large areas of text.

This document, for example, uses Saavn Green for anchored links within the document, and uses an underline for links out of the document. It also uses bold italics for emphasizing important words or phrases, and uses a separate pullquote style for important content.

Leading & Kerning

Leading is the vertical space between lines of copy, and is important when working with a lot of body copy.

The smaller the text, the larger the leading should be in relation to the text size in order to increase legibility. For example – the text you’re reading is using 16pt text with 24pt leading (a 1: 1.5 ratio). In the Hierarchy example above, though, the large text is using 32pt text and only 40pt leading. Because that text is larger, and includes less lines, the leading can afford to be tighter.

Kerning is most important in headings or large title text. It is the space between each letter in a word. Fonts give each letter space around it, and sometimes, the lockup of two letters will look inconsistent with the rest of a words’ kerning. It’s important to manually kern any large single or few word titles, especially in print.

Good Leading

There must be some kind of way outta here. Said the joker to the thief. There's too much confusion. I can't get no relief.

Bad Leading

Business men, they drink my wine. Plowman dig my earth. None were level on the mind. Nobody up at his word. Hey, hey.

Good Kerning

Bad Kerning

Visuals can only take the Saavn brand so far. The verbal brand experience is weighted just as significantly as the visual. Saavn’s goal is to delight the user. Both visually and verbally.

The personality of any brand is determined in large part by two key components of the verbal experience: voice, and tone. The difference? Our voice stays the same – it’s our style and point of view – but our tone changes, and is specific to the messaging. Let’s face it, looks can only get you to about the third date, and we’re in it for the long haul.

Voice

What we talk about.

Our voice is human, smart, and fun, but – most importantly – clear. Rule of thumb: don’t sound like a computer. *Cough – I’m looking at you, engineers – cough*. That said, the priority is always to deliver the user the information they need to understand and use our products as they are meant to be used.

Tone

How we talk about it.

Our tone is generally informal and witty, but it’s important that the tone is determined by the message. Think of the user and their thoughts. Are they confused and looking for help? That’s probably not the time to be funny. Is the user excited to have become a Pro user? Are they learning something new? Once you know the emotional sate of a user, you can adjust your tone accordingly. If you’re not sure if it’s a good time to be funny, it’s probably not.

In all of the samples above, you can see that while our voice and tone are human and witty, we are also sure to be thorough and clear.

The JioSaavn Brand is built around a direct visualization of goosebumps. It is a modular system that is flexible and identifiable. At the core of the system is a wave element, and many others that stem from the same concept, as the most basic building block to our brand. It symbolizes anything from sound waves, to movement, to goosebumps.

There are two main styles that should be used on photography within the JioSaavn brand.

These stylization techniques help define our brand and should be used among other branding elements to create visually appealing creatives.

Polygon

Portraits

The process of creating a polygon starts with permission from the artist (or their label) and a well lit, (preferably) high res photo.

Creating the illustration is a result of many polygonal shapes (no curves) drawn so that each shape connects to the next. The result is a vector illustration that should strike an easily recognizable likeness to its' reference image.

Because they are vector, these can be used at any proportional size, and are great for print especially.

Nucleya Polygon

The Weeknd

Badshah

Chris Martin

Arijit Singh

Motion Halftone

Portraits & Backgrounds

The motion halftone stylization should be used on full photos, cutout photos, or photo backgrounds, to bring interest and consistency to the brand and its' creatives.

The motion halftone effect uses a wave pattern as a halftone over an image, and uses color similar to the way albums used to be printed in halftone dots. It brings an element of visual interest to a photo, while incorporating a nostalgic purpose and familiarity.

Drake Motion Halftone

A collection of elements build the JioSaavn brand. Elements can be layered together or individually to bring interest and familiarity to creatives.

These elements should be used in JioSaavn creatives with consistency.

Waves

The waves element evokes movement, and can symbolize anything from sound waves to rhythm, to the goosebumps you get from a great song. When motion is applied, the waves create an illusion of movement.

Blob

While visually underwhelming on it’s own, the blob is an invaluable piece of the brand. It should be used as a background element in creatives to create depth and as a way of highlighting the subject.

Text Pattern

The text pattern element can be used in more minimal designs to bring interest to the creative. Actual contextual information shouldn’t be used - this is only meant to be a visual element.

Ripple

The ripple element is meant to visualize movement, similar to the way waves of sound move in a rippled state through space. When motion is applied, the ripple creates an illusion of movement.

There are variations to the ripple element, including three shapes, with options for each.

Text Wave

A text wave element can be used in more minimal designs to bring interest to the creative. Actual contextual information shouldn’t be used - this is only meant to be a visual element.

Frame

The frame can be used in association with an image, and can include other overlapping elements to create dimension.

Album Art

Album art can be used as a foreground element in creatives. Colors used should be pulled from the album art. The album art shouldn’t have any effects or treatments added.

The Angle

3.5°

The Saavn angle should be used as a divider in any medium to bring contrast and interest to the space between two sections.

The Saavn Angle is a 3.5° top only angle. This means that the left and right sides of the container should still be at 90°, and the bottom should be at 0°.

The Saavn Angle

There are several child properties of the JioSaavn brand (lovingly referred to as JioSaavn+) with their own brand identities. These should be treated with the same respect to their guidelines as the regular Saavn logo.

The same basic colorways and impoper uses apply to these logos unless otherwise specified.

JioSaavn’s Music + department houses two logos. JioSaavn Original Programming, and JioSaavn AIR. Saavn Originals are original programming show podcasts within the app. Saavn AIR (Artist in Residence) is used to promote artists who have collaborated with us as an AIR.

These logos are utilized both in marketing materials as well as in app assets.

JioSaavn Original Programming

JioSaavn OG has two logo constructions: Full press, and condensed. Depending on the usage, one may be more appropriate to use than the other.

Full Construction

Condensed Construction

Saavn AIR

JioSaavn AIR has two logo constructions: Full press, and condensed. Depending on the usage, one may be more appropriate to use than the other.

Full Construction

Condensed Construction

Artist Originals (AO) is Saavn’s in-house record label and artist development program dedicated to amplifying the careers of independent artists globally.

The Aritst Originals logo has two logo constructions: Full and badge only. Depending on the usage, one may be more appropriate to use than the other.

Colorway options for the Artist Originals logo are independent to it's brand, and include a single monotone palette.

Full Construction

Internal and external partnerships pop up from time to time where the JioSaavn logo either needs to include an extension, or needs it an alternate brand logo need to be equal weights. There are constructions available for both cases.

Any internal or external partnerships need to follow these guidelines. Any requests for curstom logos for either case will not be permitted.

There are two primary internal logo styles: the lockup and the tagline.

The lockup is reserved for JioSaavn products or original IP. The tagline is used for partnerships, campaigns, and other verticals.

Lockup

Tagline

Partner lockups include a hairline separating the JioSaavn logo asset from the partner logo.

The space between the logos is the width of the Saavn burst, with the hairline at half that width. The partner logo size is determined using the “saavn” text height as a guide.

External Partners

Download the full JioSaavn Logo pack, or visit our complete resources page after you have read all brand and trademark guidelines. If there are any questions or confusion, please contact us immediately for clarification.

Jump to the logo section to read and comply with all brand and trademark guidelines.

I have read, and agree to abide by, all of the brand guidelines.