Zapnito
BrandGuide

Our brand is our identity. It is a reflection of our values, our team and our product. Here you'll find all of the elements that make up our brand and how you should use them when talking about Zapnito

Our Story

We help brands make Community-Led Growth happen

The Zapnito Team

In 2015, Zapnito was founded by Charles Thiede and Jon Beer to help brands connect and share knowledge with the people that mattered most to their business. Over time, this collaboration with our customers has created a methodology for delivering Community-Led Growth. Zapnito’s platform powers communities for trusted brands such as Springer Nature, Ellen Macarthur Foundation, B2B Marketing, McGraw-Hill, OECD and many other organizations across industries.

Charles & Jon
Our Customer Advisory Board

Use the full logo wherever possible

Applications

The Zapnito logo is typically monotone, however it can live with our different brand accents

Logo Mark

The Zapnito logo mark should only be used in cases where a company icon or avatar is required (traditionally constrained to a perfect square or circle). In all other cases, use the logo

Clear Space

The logo must always be surrounded by open space, free from any other element. The minimum spacing is equivalent to 50% the height of the logomark on all four sides

Misuse

Avoid these examples at all times!

Do not change the colour of the logo
Do not distort the logo
Do not reproduce the logo with text
Do not outline the logo
Do not Fill the wordmark with gradients
Do not Use the logo as an image mask
Do not Place the logo on a busy image
Do not rotate the logo
Do not add shadows or other effects

Colour

Color distinguishes our brand and helps us create consistent experiences across products

Primary Colours

Dark Grey
HEX
#27272A
RGB
39, 39, 42
CMYK
7, 7, 0, 84
White
HEX
#FFFFFF
RGB
255, 255, 255
CMYK
0, 0, 0, 0

Brand Accents

Mint
HEX
#88FED8
RGB
136, 254, 216
CMYK
46, 0, 15, 0
Purple
HEX
#A28BFE
RGB
162, 139, 254
CMYK
36, 45, 0, 0
Pink
HEX
#FE88AB
RGB
254, 136, 171
CMYK
0, 46, 33, 0
Yellow
HEX
#E6FE88
RGB
230, 254, 136
CMYK
9, 0, 46, 0

Tints & Shades

Tints expand upon the brand accents to help ensure accessibility

Darker
HEX
#366656
RGB
54, 102, 86
CMYK
47, 0, 16, 60
Dark
HEX
#5FB297
RGB
95, 178, 151
CMYK
47, 0, 15, 30
Base
HEX
#88FED8
RGB
136, 254, 216
CMYK
46, 0, 15, 0
Light
HEX
#B8FEE8
RGB
184, 254, 232
CMYK
28, 0, 9, 0
Lighter
HEX
#E7FFF7
RGB
231, 255, 247
CMYK
9, 0, 3, 0
Darker
HEX
#312A4C
RGB
49, 42, 76
CMYK
36, 45, 0, 70
Dark
HEX
#615398
RGB
97, 83, 152
CMYK
36, 45, 0, 40
Base
HEX
#A28BFE
RGB
162, 139, 254
CMYK
36, 45, 0, 0
Light
HEX
#C7B9FE
RGB
199, 185, 254
CMYK
22, 27, 0, 0
Lighter
HEX
#ECE8FF
RGB
236, 232, 255
CMYK
7, 9, 0, 0
Darker
HEX
#331B22
RGB
51, 27, 34
CMYK
0, 47, 33, 80
Dark
HEX
#985267
RGB
152, 82, 103
CMYK
0, 46, 32, 40
Base
HEX
#FE88AB
RGB
254, 136, 171
CMYK
0, 46, 33, 0
Light
HEX
#FEB8CD
RGB
254, 184, 205
CMYK
0, 28, 19, 0
Lighter
HEX
#FFE7EE
RGB
255, 231, 238
CMYK
0, 9, 7, 0
Darker
HEX
#2E331B
RGB
46, 51, 27
CMYK
10, 0, 47, 80
Dark
HEX
#8A9852
RGB
138, 152, 82
CMYK
9, 0, 46, 40
Base
HEX
#E6FE88
RGB
230, 254, 136
CMYK
9, 0, 46, 0
Light
HEX
#F0FEB8
RGB
240, 254, 184
CMYK
6, 0, 28, 0
Lighter
HEX
#FAFFE7
RGB
250, 255, 231
CMYK
2, 0, 9, 0

Neutrals

900
HEX
#18181B
RGB
24, 24, 27
CMYK
11, 11, 0, 89
800
HEX
#27272A
RGB
39, 39, 42
CMYK
7, 7, 0, 84
700
HEX
#3F3F46
RGB
63, 63, 70
CMYK
10, 10, 0, 73
600
HEX
#52525B
RGB
82, 82, 91
CMYK
10, 10, 0, 64
500
HEX
#71717A
RGB
113, 113, 122
CMYK
7, 7, 0, 52
400
HEX
#A1A1AA
RGB
161, 161, 170
CMYK
5, 5, 0, 33
300
HEX
#D4D4D8
RGB
212, 212, 216
CMYK
2, 2, 0, 15
200
HEX
#E4E4E7
RGB
228, 228, 231
CMYK
1, 1, 0, 9
100
HEX
#F4F4F5
RGB
244, 244, 245
CMYK
0, 0, 0, 4
50
HEX
#FAFAFA
RGB
250, 250, 250
CMYK
0, 0, 0, 2

Gradients

Gradients are blends of our brand accents

Gradients should be used as an accent in the design to help create visual interest and draw the eye in to important elements. It should not be heavily used in huge blocks

Typography

Typefaces

Our typography consists of two font families, Instrument Sans and Atkinson Hyperlegible

All of Zapnito's chosen typefaces are licensed under the Open Font License.
Instrument Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
1234567890 !@£$%^&*;'\,./:"|?

Instrument Sans Font is a geometric sans-serif font, efficiently built from straight lines and simple circles, echoing Zapnito's core principle of simplicity.

Download
Atkinson Hyperlegible
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
1234567890 !@£$%^&*;'\,./:"|?

Atkinson Hyperlegible, named after the founder of the Braille Institute, is designed specifically specifically to increase legibility for readers with low vision, and to improve comprehension.

Download

Usage

General guidelines when working with typography

Display headings should use Instrument Sans
Body copy, intro/outro text, and captions should use Atkinson Hyperlegible
Keep the font size consistent within each block of copy
Left-align all body copy. Never force-justify, center-align, or right-align typography, unless the written language dictates otherwise

Hierarchy

Instrument Sans should be used for all headings and Atkinson Hyperlegible for all body copy

Subhead
→
Build, Grow, Run
Title
→
Build a knowledge-sharing community to maximize customer lifetime value
Lead
→
Zapnito gives B2B businesses a modern community platform to connect and share knowledge with customers. Discussions, courses, content, events, and more – under one brand domain
Heading
→
We help brands make Community-Led Growth happen
Text
→
Zapnito is on a mission to help businesses create more valuable and frequent engagement by bringing customers and brand experts together to share knowledge. Our all-in-one platform and expert strategic support makes it easy to create customer community experience that provides equal value for your business and your members.

Type Scale

Our typographic scale creates size variations that bring the right balance and contrast to our type

Heading 8XL
Font Size: 96px / 6remLine Height: 96px / 6rem
Heading 7XL
Font Size: 72px / 4.5remLine Height: 72px / 4.5rem
Heading 6XL
Font Size: 60px / 3.75remLine Height: 60px / 3.75rem
Heading 5XL
Font Size: 48px / 3remLine Height: 48px / 3rem
Heading 4XL
Font Size: 36px / 2.25remLine Height: 40px / 2.5rem
Heading 3XL
Font Size: 30px / 1.875remLine Height: 32px / 2rem
Heading 2XL
Font Size: 24px / 1.5remLine Height: 28px / 1.75rem
Heading XL
Font Size: 20px / 1.25remLine Height: 24px / 1.25rem
Heading Lg
Font Size: 18px / 1.125remLine Height: 20px / 1.25rem
Heading Md
Font Size: 16px / 1remLine Height: 20px / 1.25rem
Body XL
Font Size: 20px / 1.25remLine Height: 28px / 1.75rem
Body Lg
Font Size: 18px / 1.125remLine Height: 28px / 1.75rem
Body Md
Font Size: 16px / 1remLine Height: 24px / 1.5rem
Body Sm
Font Size: 14px / 0.875remLine Height: 20px / 1.25rem
Body XS
Font Size: 12px / 0.75remLine Height: 16px / 1rem

Misuse

Avoid these examples at all times!

Heading
Do not use Atkinson for headings
Zapnito is the community software platform built to showcase expertise. Build your own branded community and engage the people who really matter to your business. Showcase individual experts and organizations, with a dedicated page for every registered user that highlights their expertise, interests and contributions to your network.
Do not use Instrument Sans for body text
Times New Roman
Never use any unofficial fonts
Heading
Do not set headings in bold
Heading h1Heading h2
Do not diverge from the typographic hierarchy
Why am I shouting?
Do not set text in all caps
Zapnito is the community software platform built to showcase expertise. Build your own branded community and engage the people who really matter to your business. Showcase individual experts and organizations, with a dedicated page for every registered user that highlights their expertise, interests and contributions to your network.
Do not use insufficient leading
Narrow trackingWide tracking
Do not change kerning or tracking
Zapnito is the community software platform built to showcase expertise. Build your own branded community and engage the people who really matter to your business. Showcase individual experts and organizations, with a dedicated page for every registered user that highlights their expertise, interests and contributions to your network.
Do not right-align paragraph text