Brand

Guidelines

At zendit all we care about is readability and usability.
This brand guideline is made to give you a feel of our brand.
For your consideration.

Last updated: March 12, 2024

Brand Identity

We want and strive to have our brand to have the following identities;

Calmness
Clean and simple (This is the most important)
Playful and cheerful
Easy to approach

A small TL;DR*

Our product has a developer first approach. So the things we do are naturally aligned with what the general developer population likes.

We try to convey our ideas with the languages that are clear and easy to understand for everyone, and we are supporting this with the help of illustrations and animations.

*too long; didn’t read

Naturally we don’t use soulless corporate imagery.

We don’t use stock images that mean nothing. (aka. Stock image abuse)

We try and rely on illustrations and animations.

Logo

zendit logo follows the icon + text combination

Logo assets and variations

You can use zendit logo with and without the text.

If you don’t want a single logo but all of them in one zip file, click the button below.

Download all logo variations

Logo with text

Default Logo

Try to use on light surfaces

Available downloads: SVG, PNG and JPG

Dark Logo

Use on dark surfaces

Available downloads: SVG, PNG and JPG

Alternative Logo

Completely dark

Available downloads: SVG, PNG and JPG

Alternative Logo

Completely light

Available downloads: SVG, PNG and JPG

Logo without text

Default Logo

Try to use on light surfaces

Available downloads: SVG, PNG and JPG

Alternative Logo

Use on dark surfaces

Available downloads: SVG, PNG and JPG

Alternative Logo

Completely dark

Available downloads: SVG, PNG and JPG

Animated logo for loaders

Default Loader

Try to use on light surfaces

Available downloads: SVG and GIF

Light Loader

Use on dark surfaces

Available downloads: SVG and GIF

Grey Loader

Completely dark

Available downloads: SVG and GIF

Logo do’s and don’ts

Try to use common sense really.

Pay attention to the contrast and readability. Prioritize using the default logo, especially the zendit icon.

Mind the contrast for both the icon and the text.

Pay attention to the logo’s aspect ratio.

Do not add shadows to the logo.

Do not use a different colors on the zendit logo.

Do not use a different colors on the zendit logo.

Scale the logo with its width and height together.

You can wrap the logo with different shapes.

Stick with the existing zendit logo variations.

Colors

We take our inspiration from the Japanese cherry blossom. (Sakura tree)

Use these colors, combinations and variations to create any presentation you like.

Primary Color

Cherry red

#D94453

rgb(217,68,83)

cmyk(10%, 88%, 64%, 1%)

Header Color

Charcoal

#333333

rgb(51, 51, 51)

cmyk(0%, 0%, 0%, 80%)

Light Color

Vanilla

#FCFCFC

rgb(252,252,252)

cmyk(0%, 0%, 0%, 1.18%)

The entire zendit color palette

We have up to 10 versions of each colors to supplement our brand. You can use any of these to create any content you want.

Primary Color Set

Primary-6 is the main color. Click on any box to copy the color code.

Primary-1

#FFF1F0

Primary-2

#FFF0F0

Primary-3

#FEC9C9

Primary-4

#F2999C

Primary-5

#E66C74

Primary-6

#D94453

Primary-7

#B32E40

Primary-8

#8C1D30

Primary-9

#661021

Primary-10

#400A16

Warning Color Set

Warning-6 is the main color. Click on any box to copy the color code.

Warning-1

#FFF9F0

Warning-2

#FFF3E3

Warning-3

#FFE0BA

Warning-4

#FFCA91

Warning-5

#FFB169

Warning-6

#F6903D

Warning-7

#CF6E29

Warning-8

#A85019

Warning-9

#82360D

Warning-10

#5C2308

Info Color Set

Info-6 is the main color. Click on any box to copy the color code.

Info-1

#F0F5FF

Info-2

#D1E0FF

Info-3

#A8C2FF

Info-4

#7EA0FC

Info-5

#5176F0

Info-6

#294DE3

Info-7

#1934BD

Info-8

#0C1E96

Info-9

#030E70

Info-10

#01064A

Success Color Set

Success-6 is the main color. Click on any box to copy the color code.

Success-1

#F0FFF7

Success-2

#D9FFED

Success-3

#A7F2D2

Success-4

#7AE6BA

Success-5

#50D9A7

Success-6

#2BCB95

Success-7

#1BA67C

Success-8

#0E8061

Success-9

#055946

Success-10

#033329

Error Color Set

Error-6 is the main color. Click on any box to copy the color code.

Error-1

#FFF2F0

Error-2

#FFF0ED

Error-3

#FFCAC4

Error-4

#FFA29C

Error-5

#FF7773

Error-6

#F14747

Error-7

#CC3136

Error-8

#A61F28

Error-9

#80121D

Error-10

#590C16

Kate Color Set

Kate-6 is the main color. Click on any box to copy the color code.

Kate-1

#E6F9FF

Kate-2

#B0E9FF

Kate-3

#87D9FF

Kate-4

#5EC7FF

Kate-5

#33ABF5

Kate-6

#0C8CE9

Kate-7

#006BC2

Kate-8

#00509C

Kate-9

#003975

Kate-10

#00244F

Neutral Color Set for the Light Theme ☀️

This set is used for system elements, typography and reusable blocks across our platforms.

White

#FFFFFF

Table Header

#FCFCFC

Background

#F6F6F6

Divider

#F2F2F2

Border

#E0E0E0

Disabled

#BCBEC5

Secondary

#7F828A

Primary

#444444

Title

#333333

Neutral Color Set for the Dark Theme 🌙

This set is used for system elements, typography and reusable blocks across our platforms.

Black

#000000

Table Header

#33353C

Background

#35373C

Divider

#3C3E44

Border

#494B50

Disabled

#5C5C5C

Secondary

#7F828A

Primary

#D7D7D7

Title

#E4E4E4

Dark 🌙 and Light ☀️ Mode Example

As long as you stick with the neutral colors everything should fall into place.

Be mindful of the colors and contrast

Typography

Curvy heads, sharp bodies.

Urbanist

Used for all headers in zendit ecosystem.

💡Tip: For the marketing materials, please use only this font.

Check out Urbanist in Google Fonts

Manrope

Used for all body content in zendit ecosystem.

💎 Pro Tip: Do not use this font for zendit brand headers, ever.

Check out Manrope in Google Fonts

Desktop vs Mobile

We scale our DISPLAY and HEADER fonts by using REM and also we use different sizing for the mobile devices.

Notice: We do not change the size of our body font. It’s always fixed on all platforms to whatever device default is.

Display 1

font-size: 64px / 4 REM line-height: 1.125

Display 2

font-size: 50px / 3.125rem line-height: 1.16

Display 3

font-size: 42px / 2.625rem line-height: 1.19

Header 1

font-size: 36px / 2.25rem line-height: 1.22

Header 2

font-size: 30px / 1.875rem line-height: 1.26

Header 3

font-size: 24px / 1.5rem line-height: 1.33

Header 4

font-size: 20px / 1.25rem line-height: 1.4

Header 5

font-size: 16px / 1rem line-height: 1.5

Header 6

font-size: 14px / 0.875 REM line-height: 1.3

Display 1 mobile

font-size: 50px / 3.125 REM line-height: 1.16

Display 2 mobile

font-size: 42px / 2.625 REM line-height: 1.19

Display 3 mobile

font-size: 36px / 2.25rem line-height: 1.23

Header 1 mobile

font-size: 28px / 1.75rem line-height: 1.28

Header 2 mobile

font-size: 24px / 1.5rem line-height: 1.33

Header 3 mobile

font-size: 22px / 1.375rem line-height: 1.36

Header 4 mobile

font-size: 18px / 1.125rem line-height: 1.36

Header 5 mobile

font-size: 16px / 1rem line-height: 1.44

Header 6 mobile

font-size: 14px / 0.875 REM line-height: 1.3

Desktop font scaling Mobile font scaling

Be mindful of the font size / line height combination

Brand Vibes

Energetic, clean and bold.

As long as materials you prepare are clean and easy to read you can do whatever you want.

Stick to the brand’s colors. Do not use pastel or faded stuff.
Use only Urbanist font
Try not to use stock images.
Keep it simple and clean. I think I said it 1001 times already.

Icons, Illustrations and all materials

We use a custom icon set that we draw ourselves in order to convey
the ideas we have in mind.

Primary color is the dominant color used in our icons.

Icons and Illustrations

Just like our icons, our illustrations are also hand crafted.

Please try to use the illustrations in your materials. No stock image abuse.

Get all zendit illustrations

zendit Google Slides Template

For presentations

Stick to this presentation template and it has variations inside.

Get zendit presentation

zendit materials in Gdrive

From marketing to print materials are all collected here, make sure you have access.

Get all zendit materials

Ps. you either need to ask @don.kutbay in slack for access, or have an idt email address.

👋 Hi There

Drop us your email, and we'll get back to you shortly! ✨ This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

COPIED TO CLIPBOARD