Pelago brand guidelines
Introduction
Welcome to the Pelago Brand Guidelines. The following document serves as a reference to guide the communication and design across all visual touch points of the Pelago brand.
It introduces and explains the guiding principles for each element of our visual identity. Together, they reflect who we are as a brand. In each section, you will find details of the many layers that together create the Pelago brand.
Contents
Brand
story
Dependency. It can feel like you’ve been deserted. With no one to talk to or even listen. And yet programs that offer help often look like inaccessibility, a lack of understanding, showing up solo.
So imagine a world where instead of feeling alone, you could feel support. The kind that steers you to shore through stormy weather. Where care informed by science lets you reach uninhabited parts of yourself and guides you to places of possibility. A newer you.
When you feel all at sea, we’re at your side. Here to navigate you through substance use with technology as your teammate and treatment as your anchor. Think of us as allies on your island. Conquering cravings and overcoming obstacles you didn’t even know existed. Ready to start at once, all at the tap of a button.
That’s us, helping more and reaching many. Because sometimes to get to a sunnier space, you need those kinds of people in your corner. Watching transformations from the sidelines at every step. The ultimate sidekick.
Visual
identity
Logo
Our logo consists of two elements: the Pelago wordmark and Pelago icon.
To maintain the integrity of these assets and promote the consistency of the brand, it is essential to use both assets as described in these guidelines. The examples shown illustrate how to use the logo correctly.
Wordmark
The Pelago wordmark acts as an optimistic, accessible face to the brand.
Throughout this section, there are examples intended to demonstrate how to use the wordmark and icon across a variety of situations, ensuring they are always presented in the best light.
Wordmark color usage
When pairing our logo with color, ensure the mark is legible and accessible. Please refer to these pre-approved pairings as a starting point.
Clear space
Used correctly over time, our logo will become a valuable asset.
Aim to keep it simple, clear, and compelling. Make sure you provide enough padding around the logo as shown here. This helps our logo standout with confidence.
Minimum size
The minimum size of our wordmark is measured by its height.
Print: 0.625 inch (15.875mm)
Digital: 60 pixels (on screen)
On rare occasions, smaller sizes for print may be necessary, however, legibility should always be our top priority.
When using restricted sizes, like a favicon or social media profile image, use the icon (details outlined below).
Wordmark placement & scale
The logo should be placed in the center or one of the corners of a composition.
The scale of the Pelago wordmark should always be relative to the contents of the application, but as a general rule of thumb keep it to 15-25% composition width or smaller.
Alternatively, we love a large logo moment so spanning the logo full width to the top of a composition is another viable option.
Hover for full width example.
Partner lockups
When using our logo with a partners logo use a central line.
This will help give each logo it’s own space and stand out.
Wordmark misuse
The success and recall of our brand depends on our logo maintaining a consistent appearance in all communications.
In order to preserve the integrity of the wordmark, the following examples illustrate how it should not be used.
Icon
The icon is best suited for use-cases where the brand expression needs to exist at smaller sizes with limited space.
Clear space
Make sure you provide enough clear space around the icon, shown here. This helps the icon standout with confidence.
Social icon
The social icon is an important representation of our brand on various digital platforms. In order to keep a consistent view of our brand we always feature our P Icon as our avatar in Jet Black, centered on a Pelago Yell-o background.
Color
Our primary palette is natural, warm and inviting, to embody the Pelago story. Pelago Yell-o can be thought of as our brand color. We utilize our other brand colors depending on the audience and communication.
PELAGO YELL-O
HEX: #FAE355
RGB: 250, 227, 85
CMYK: 0, 9, 65, 2
PMS: 100 C
JET BLACK
HEX: #212633
RGB: 33, 38, 51
CMYK: 0, 0, 0, 100
PMS: Black C
WHITE
HEX: #FFFFFF
RGB: 255, 255, 255
CMYK: 0, 0, 0, 0
PMS: N/A
MAROON
HEX: #722F49
RGB: 114, 47, 73
CMYK: 19, 90, 50, 50
PMS: 195 C
MOSS GREEN
HEX: #4D6525
RGB: 77, 101, 37
CMYK: 9, 0, 25, 60
PMS: 371 C
CERULEAN
HEX: #A4BDFF
RGB: 164, 189, 255
CMYK: 36, 26, 0, 0
PMS: 2716 C
PUNCH PINK
HEX: #EEBCFF
RGB: 238, 188, 255
CMYK: 7, 26, 0, 0
PMS: 243 C
TEA GREEN
HEX: #DDF1C4
RGB: 221, 241, 196
CMYK: 8, 0, 18, 5
PMS: 7485 C
MIST BLUE
HEX: #E8EEFF
RGB: 232, 238, 255
CMYK: 9, 7, 0, 0
PMS: 656 C
TAN
HEX: #BDA98C
RGB: 189, 169, 140
CMYK: 0, 8, 19, 26
PMS: 4735 C
PEACH
HEX: #FCD3BF
RGB: 252, 211, 191
CMYK: 0, 16, 24, 1
PMS: 475 C
CREAM
HEX: #FFF4DC
RGB: 250, 244, 220
CMYK: 0, 4, 14, 0
PMS: N/A
Color usage
A careful balance of colors are used to make sure our communication looks and feels consistent.
This color breakdown shows which colors we use more, and which colors we use less. This is a rough guideline—every color does not need to be represented at the same time or in the exact amount as shown here.
Color pairings
A careful balance of colors are used to make sure our communication looks and feels consistent. This color breakdown shows which colors we use more, and which colors we use less.
This is a rough guideline—every color does not need to be represented at the same time or in the exact amount as shown here.
Use this as a cheat sheet for pre-approved color pairings
Typography
Our typeface reflects our optimistic and accessible nature, allowing us to adapt to context and conversation while remaining recognizable.
Used properly it is a powerful asset that allows us to communicate both complex information and impactful statements with clarity.
Typography Hierarchy
The Pelago brand uses different weights of Rebond Grotesque and Suisse Neue, depending on the context. Shown here is a primary use case to help guide how our typefaces should be applied.
H1: 103% leading, 0 tracking
H2: 105% leading, -0.75% tracking
Body: 135% leading, 0 tracking
CTA: 135% leading, tracking (all caps)
Alternative Google Fonts
In the event that a Google font is needed in place of the brand fonts, it is suggested we use DM Sans as a substitute for Rebond, and Roboto Slab as a substitute for Suisse Neue. We can utilize the regular, medium, and bold weights. However, we suggest using DM Sans Regular as our primary weight. We use Roboto Slab primarily for body copy.
DM Sans and Roboto Slab can be downloaded here.
Iconography
Our custom icons are designed to express the approachable and distinct qualities of our visual Identity. The geometric yet warm construction, along with a subtle rotation within the forms, make them unique and tie them back to our graphic system.
Iconography grid
Shown here is the grid that is used to create our icons.
Most of the icon should live within the middle 60–75% of the grid.
Iconography principles
Our icons adhere to a series of principles that help make them distinct and ownable. When designing new iconography, please refer to the principles outlined below.
1. Instead of perfect circles, our icons use a series of ovals that share a slight tilt.
2. To emulate the appearance of an angled stroke, we tilt shapes that sit within the larger icon at a slight angle ranging from 2–4 degrees clockwise.
3. Our icons use rounded corners with a radius that sits between 13–35 degrees depending on the shape/icon.
Iconography smallest size
24 px.
Art
direction
Photography
Art direction explores the overarching elements that make our photography style unique.
Photography is an important aspect of the Pelago brand. It communicates the humanity of the Pelago service, often serving alongside visual and verbal expressions. Our selection of imagery shows our diverse audience.
Overall our imagery is warm, optimistic, and honest with a journalist approach, capturing real people and not models or actors.
PLEASE NOTE: Photography in this document is used to guide photography art direction and shown strictly for reference only. All content is proprietary and confidental, and appropriate licenses must be obtained before use.
Illustration
Illustration is a powerful tool we use to help communicate complex and important information in a way that’s easy for customers to digest. Above all, our illustration expression should always echo our brand story and personality, and should be in service of supporting clients and members.
Illustration principles
Our illustration expression can be used in a variety of branded communications from OOH/marketing to functional in-product screens.
Below are a few examples of how illustration comes to life across different communications.
1. Marketing materials - generally more colorful/expressive
2. Email/in-product engagement - balance of expressive and functional
3. In-product daily use - generally less colorful and more functional for the customer
Graphic Language
Our graphic language is inspired by an Archipelago, using oval shapes representative of islands to create a sense of safety and support. These elements feature throughout the Pelago system to bring visual coherence, and a distinctive branded look.
Graphic language principles
The main part of our graphic language consists of 2 dynamic, joined oval/island shapes. When cropping to use as a window for imagery or typography, make sure to include enough of an area so the image or typography can be easily seen.
Graphic language usage
The general rule of thumb for using graphic language when communicating with our different audiences is as follows; When creating design and marketing for clients or potential clients, we make the graphic elements smaller, with more prominent use of photography. When speaking to our members, we can make our graphic language larger and louder in overall feel.
Graphic language quote treatment
When highlighting quotes, there is the option to give it a branded, ownable touch by using our graphic language as a starting quote mark.
Showcase
Digital assets examples
Putting it all together. Now that every element in the visual identity has been introduced, we can see how each element works in symphony to create various brand touchpoints. Below, you can see examples of the brand and get a sense for how each element flexes within a composition.
Messaging
& Tone
How we speak
Our verbal identity is an essential part of how we differentiate ourselves and deepen member and client relationships. We build on our core brand idea, story, and personality, to create a guiding set of Tone of Voice principles and Messaging examples that clearly convey how we communicate.
Messaging
Hero messaging:
B2B
Substance Use Management for the Workplace
—
Virtual Substance Use Management Platform
—
Propelling people forward
Pelago’s leading Substance Use Management platform provides personalized treatment for your employees to overcome tobacco, alcohol, and opioid use.
Hero messaging:
Member
Navigate towards brighter days.
Looking to stop or cut back your tobacco, alcohol, or opioid use? We’ll guide and support you with a personalized virtual program that’s completely confidential and at no cost to you.
Light message:
Member
Healthier habits start here.
Reducing tobacco and alcohol use looks different for every person. We’ll work with you to understand what you’re looking for and help you reach your goals.
Heavy message:
Member
A sea of support to take your life back.
We create a confidential, judgment-free program that guides you through recovery from alcohol or opioid use. Get started with a counselor, clinician, and support system at no cost to you.
Tone of voice
Inviting
Not cheeky
We know that we’re working against a stigma, so we go the extra mile to make sure that everyone feels welcome. From the moment they sign up, until they complete their goals, we’re their biggest advocate. We never judge members, their goals, or what they’ve tried in the past. By using language that’s friendly and easy to understand, we inspire people to become a better version of themself. Although we’re optimistic, we’re careful not to seem disingenuous by not taking into account the seriousness of getting treatment.
Like this:
It doesn’t matter how many times you’ve tried, we’re here to help you stop smoking.
Not this:
Ready to stop smoking?
You can do it!
Compassionate
Not soft
We genuinely care about each and every person we interact with. We’re empathetic and warm in how we communicate with members. We recognize that no two journeys are the same, and we treat every path with kindness and understanding. Even though we’re welcoming and caring, we never act too mushy or familiar with members. We support them through treatment, but we’re not trying to be their best friend.
Like this:
Cutting back or getting sober isn’t easy. We’ll be with you every step of the way, because we know you have it in you.
Not this:
Industry leading clinical outcomes. Proven by science.
Purposeful
Not clinical
While we definitely have the data to back up how our approach works, we are considered about when and how we use it. We show how we can help by sharing our results and our process, but we’re also mindful about the emotions behind the numbers. Since our approach is transformational, we speak with passion and purpose that matches our mission.
Like this:
Industry leading success rates. Life-changing outcomes.
Not this:
Industry leading clinical outcomes. Proven by science.
Forward-looking
Not techy
We look towards the better days that treatment provides. The days where it’s easier to show up for work on time, where people feel like they’re living their healthiest lives, and no longer feeling like they’re alone in their substance dependence. We speak about these through a human-first lens, acknowledging our technology that got them there, but focusing on what that means for people’s futures.
Like this:
Treatment that helps your future. It’s as simple as that.
Not this:
Technology-tailored addiction treatment, driving better outcomes.
How we speak:
Getting the right mix
Clients & partners
20% Inviting
10% Compassionate
30% Purposeful
40% Forward-looking
Members
40% Inviting
30% Compassionate
10% Purposeful
20% Forward-looking
Dos & Don’ts
What to do
1. Be hopefull
2. Talk about the science and approach in a human-first way
3. Refer to Pelago as a platform or program
4. Write in a conversational tone
5. Use island or ocean metaphors when it feels natural
What not to do
1. Be overly excited or upbeat
2. Use jargon or industry terms, especially when speaking to members
3. Reference Pelago as just an app
4. Be overly familiar or casual
5. Use more than one island or ocean metaphor per page
Contact
Info
Selim Cherif
Design Director
selim@pelagohealth.com