Updated September 2022
Brand
guidelines
Introduction
Welcome to the Klaviyo One brand guidelines. The intentional usage of our elements (logos, colors, typography, etc.) helps to create a visual language unique to Klaviyo One. To best understand our capabilities within this system, we have provided some rules and best practices.
1.0
Logo
Klaviyo One's visual identity is how we craft our brand image. Our brand elements—logo, mark, color, typography, and photography come together to create a unified brand visual language.
1.1 Primary logo
1.2 Flag icon
1.3 Clearspaces
1.4 Minimum size
1.5 Incorrect usage
1.1
Primary logo
Elevated and sophisticated, the Klaviyo One logo is the primary visual manifestation of our brand positioning. The simple, iconic flag works to evoke ideas of accomplishment and new frontiers, while its placement between the two words of our brand name represents our central role in helping enterprise brands scale. The flag is foundational to much of the visual language around it. Our name, Klaviyo One, refers to our singularly powerful customer data platform.
Logo colorways
These are the recommended colorways for the Klaviyo One logo to best represent the brand. This primary lockup should always be used in White or Charcoal colors.
1.2
Flag icon
Our flag icon is used as a supporting symbol of our brand. It should be used in conjunction with our logo as a visual representation of our brand.
Media icons
The icon is an important representation of our brand on various digital platforms. We always use our flag mark as our avatar. Most often we use it in White, centered on a Cedar background. In the case of our favicon, we feature the flag in Cedar with a transparent background.
iOS
Social
Favicon
1.3
Clearspace
A minimum area of clear space should surround the Klaviyo One logo. This area of isolation allows the primary logo to stand out by ensuring that any copy, additional identities, or other visual elements are kept clear from the logo.
1.4
Minimum size
Minimum sizing of our logotype is defined in pixels for digital applications and mm for print. These minimum sizing rules ensure the Klaviyo One logos are legible regardless of size.
1.5
Incorrect usage
Consistency is key when it comes to the Klaviyo One logo. In order to preserve the integrity of the logo, the following examples illustrate how it should not be used.
1. Don't distort the logo
2. Don't add effects to the logo
3. Don't change the color of the logo elements
4. Don't rotate the logo
5. Don't place the logo on busy backgrounds
6. Don't place the logo in a container
7. Don’t alter the position of flag icon
8. Don't alter the logo letterforms
9. Don't place the logo on colors with low contrast
2.0
Typography
Confident, refined, and contemporary, the Klaviyo One typographic system is driven by Reckless Neue, and supported by sans-serif Söhne. With these two typefaces, we bring the contemporary voice of our brand to life.
2.1 Our typefaces
2.2 Type styles
2.3 Alternate system typefaces
2.1
Our typefaces
Reckless Neue
Reckless Neue is our primary typeface, which we use for main headlines. It's a contemporary serif with humanistic qualities that balances simplicity and sophistication for Klaviyo One. Generally used for headlines and messaging in the Regular weight.
Söhne
Söhne is our secondary typeface, which we use for our body copy. For most applications we use the Leicht weight, using the scale to create contrast. The Kraftig weight can be used for smaller elements (such as subheadline in copy, eyebrow text, indicate numbers, etc).
2.2
Typestyle
When it comes to type within the Klaviyo One identity, we refrain from using an excessive amount of type sizes—it ultimately depends on the application, but a good practice is to use standard formatting for headlines, copy, and captions (when appropriate) while maintaining their point size relationship and weight contrast to one another.
2.3
Alternate system typefaces
In the event that a Google font is needed in place of the brand font, it is suggested we use Times New Roman as a substitute for Reckless Neue and Helvetica Neue as a substitute for Söhne.
3.0
Color
To create a timeless brand, our palette consists of neutral tones, paired with natural muted tones. These colors work together and balance each other to create an elevated brand color system.
3.1 Brand colors
3.2 Tints & shades
3.3 Color pairings
3.4 Color usage
3.1
Brand colors
Charcoal
HEX #232426
RGB 35, 36, 38
CMYK 73, 66, 63, 70
PMS 419 C
White
HEX #FFFFFF
RGB 255, 255, 255
CMYK 0, 0, 0, 0
Cedar
HEX #405345
RGB 64, 83, 69
CMYK 71, 48, 69, 38
PMS 2409 C
Sage
HEX #BBC7B6
RGB 187, 199, 182
CMYK 28, 14, 29, 0
PMS 4177 C
Storm
HEX #6D777E
RGB 109, 119, 126
CMYK 60, 46, 42, 10
PMS 423 C
Lake
HEX #9BC4CE
RGB 155, 196, 206
CMYK 39, 11, 15, 0
PMS 4156 C
Poppy
HEX #EF6351
RGB 239, 99, 81
CMYK 1, 76, 70, 0
PMS 7417 C
3.2
Tints & shades
Our colors can be broken down into tones and shades for larger digital applications (such as product or the website) that require more variations.
Cedar (tint)
HEX #59705E
RGB 89, 112, 94
CMYK 66, 40, 63, 20
Cedar (shade)
HEX #2C3A2F
RGB 44, 58, 47
CMYK 73, 54, 71, 57
Sage (tint)
HEX #E2EFD3
RGB 226, 239, 211
CMYK 11, 0, 20, 0
Sage (shade)
HEX #96AB8E
RGB 150, 171, 142
CMYK 44, 22, 49, 1
Storm (tint)
HEX #AFAFAF
RGB 175, 175, 175
CMYK 33, 26, 26, 0
Storm (shade)
HEX #42484C
RGB 66, 72, 76
CMYK 71, 60, 55, 39
Lake (tint)
HEX #CAE9ED
RGB 202, 233, 237
CMYK 20, 0, 6, 0
Lake (shade)
HEX #73929C
RGB 115, 146, 156
CMYK 59, 33, 33, 2
3.3
Accessible pairings
When it comes to color, accessibility is a very important factor when using our palettes. We strive to keep our standards high and create designs that do not alienate anyone using our services. Below, we have a pre-approved color combination guide for utilizing our various tones. Any additional color combinations should be put through a pressure test for best user accessibility.
Approved type colors on White
Charcoal
Aa
Cedar
Aa
Approved type colors on Charcoal
White
Aa
Poppy
Aa
Sage
Aa
Sage (tint)
Aa
Poppy
Aa
Storm
Aa
Lake
Aa
Lake (tint)
Aa
Storm (tint) - only use with large type
Aa
Approved type colors on Sage (tint)
Charcoal
Aa
Cedar
Aa
Approved type colors on Sage
Charcoal
Aa
Cedar
Aa
Approved type colors on Sage (shade)
Charcoal
Aa
Approved type colors on Cedar (tint)
White
Aa
Approved type colors on Cedar
White
Aa
Sage
Aa
Approved type colors on Cedar (shade)
White
Aa
Sage
Aa
Approved type colors on Lake (tint)
Charcoal
Aa
Cedar
Aa
Approved type colors on Lake
Charcoal
Aa
Approved type colors on Lake (shade)
White
Aa
Approved type colors on Storm (tint)
Charcoal
Aa
Approved type colors on Storm
White
Aa
Approved type colors on Storm (shade)
White
Aa
Sage
Aa
3.4
Color usage
A careful balance of colors is used to make sure our communications look and feel 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.
USED MOST:
Charcoal, White
USED OFTEN:
Cedar, Sage, Storm, Lake
USED LEAST:
Poppy
4.0
Data visualization
Data visualization can be used in cases where more visual detail is needed. We use precise, consistent line weights. We take inspiration from our graphic rules and use this geometric language to inform chart details.
We pair photography with data visualizations to add context and a human element.
5.0
Composition
When we bring our brand elements together in composition, we use graphic rules and margins to ensure our communication and message are clear and consistent.
5.1 Graphic rules
5.2 Margins
5.3 Example
5.1
Graphic rules
We use graphic rules in our design system to frame typography, connect thoughts, and help delineate information. See the following sections for more examples.
5.2
Margins
For most applications, use of a margin (space that separates content from the edge of the canvas) may be needed. Content can align to margins. The margin width will be the shorter length of the canvas divided by 18.
5.3
Examples
The graphic rules provide a simple and flexible system for our collection of brand elements. When combined with our typographic behaviors, colors, and photography, we create unique and engaging compositions.
6.0
Art direction
Our brand photography tells the stories of our customers—and theirs. Drawing inspiration from editorial styles, our photographic style looks to highlight real people and their stories.
The following approach allows us to create narratives for use across numerous applications and to build a unified library of assets that always expresses our brand spirit.
Please note: Photography in this document is used to guide photography art direction, and is shown strictly for reference only. All content is proprietary and confidential, and appropriate licenses must be obtained before use.
6.1 Lifestyle
6.2 Environment
6.1
Lifestyle
Our lifestyle imagery is shot with warm, natural lighting to capture a wide tonal range.
We showcase our enterprise clients in their place of work, in honest moments of reflection and connection.
Photographer: Justin Chung , Kyle Johnson
6.2
Environment
We capture industrial environments with the same care as our lifestyle portraits.
Warm, natural light, and maximum depth of field allow the entire scene to be in focus. Capturing this macro view establishes a sense of place and connection to the environment.
Photo Source: Cargo Ship
Photographer: Nick Ballon
7.0
Applications
These applications are meant to serve as visual examples of how to bring the Klaviyo One brand to life. Please note, these are not final design executions and are meant to be used as inspirational references for how to imagine the brand.
Please note: Photography in this document is used to guide photography art direction, and is shown strictly for reference only. All content is proprietary and confidential, and appropriate licenses must be obtained before use.
8.0
Product illustration
Product images are not meant to be a 1 to 1 translation of the actual product, but are intended to illustrate the power and ease of particular feature(s). So, some pieces of the UI were removed to simplify the narrative.
DO
- Use only on solid White or Cedar backgrounds
- Employ minimal design elements and type in conjunction with illustrations
DON'T
- Use multiple illustrations in one ad or post
- Layer illustrations over photography
- Alter colors or photography within a product illustration
- Change layout of or crop approved Klaviyo illustration assets to fit a space
8.1
Examples
We recommend reviewing this Figma file first to pick which product image you'd like to use. The copy that informed each illustration is included next to every product image. This will give you context on what features are being illustrated.
After you've made your choice, download the image(s) you've chosen from this link.
Questions:
Maria Asaridis
Associate creative producer
maria.asaridis@klaviyo.com