Logo

There are two sets of files and they are not interchangeable. The website uses the logo without the mascot. Social media and brand material use the logo with Zapinho.

On the website

logo-zappost-preta.webp on light backgrounds, logo-zappost-branca.webp on dark ones. 38px tall in the header, 32px in the footer.

On social media and brand material

logo-horizontal.png and logo-quadrada.png. They carry Zapinho and are for posts, stories, decks and ads.

Colors

The website has a light theme and a dark theme, following the person's system setting. Every color rule considers both. Click a color to copy its code.

Primary blue

There are two blues because each one was calibrated for its background. #3B7BF0 on white drops to a 2.7 contrast ratio and disappears.

Dark theme

Light theme

Typography

New material (posts, carousels, stories, brand pieces) uses Manrope: 700 for headings, 400 for body text. For handwritten-style notes, Caveat 700.

Highlights in headings

When part of a heading gets the blue, only the words get it. The period, question mark and comma stay in the color of the surrounding text, and in the code they sit outside the <em>.

Tomorrow's post is already <em>done</em>.

Tomorrow's post is already <em>done.</em>

Tone

We talk like a friend who solves the problem, not like a startup selling AI.

The person on the other side opens Instagram during lunch, sees they haven't posted anything this week and closes the app feeling guilty. That is who we talk to. We talk about what they get (the post ready, the time back) and almost never about the technology behind it.

What we use

• You, always. Second person in everything.
• Concrete language. "A notification on your phone and the post is ready to download", "no hours in Canva".
• The problem before the pitch. "Tired of opening Canva and closing it without posting anything?"
• Plain verbs and short sentences. If "it didn't work" says it, we don't write "it presented unexpected behavior".

What we avoid

• Marketing and tech jargon: "innovative solution", "revolutionize", "disruptive".
• AI hype and vague promises. We talk about the practical result.
• Corporate formality: "Dear customer", "come and discover our platform".
• Guaranteed results. Results vary by niche and by consistency, and we say so.
• Em dashes in any public text. They become a period, a comma or a separate sentence.
• Counting how many pages the site has inside the copy. The number changes and nobody comes back to fix it.

AI tells

None of this goes out, and it is not a ZapPost preference: it applies to every published text, ours and every customer's.

How Zapinho talks

Inside the app and on social media, the mascot has a voice of his own: upbeat, playful, celebrates small wins and is never mean.

Slang and contractions are fine here: it is the character talking, not the website.

Who he is

• Overly optimistic. Sees an opportunity in everything, like that coworker who is always motivated.
• Laid-back. Talks like a friend, not like a brand.
• Genuinely interested. Wants to know how the customer's business is going, and isn't just selling.
• Celebrates small wins. Every new follower and every sale is a reason to party.
• No positive filter. Jokes around, sometimes ironic, never mean.

The six versions

All share the same base: blue body, dark outline, the speech bubble and the bolt. What changes is the accessory and the expression, depending on the context.

PartyNew feature in the app, customer hit a goal, ZapPost's birthday.

AwePost went viral, milestone reached, positive feedback.

MoneyCustomer revenue, plan announcements, sales case studies.

LoveTestimonials, passion for the business, "customer first".

CoolLifestyle, style tips, lighter content.

CowboyAgribusiness, countryside, rural niches.

Where he belongs

• In-app notifications, celebrating what the person did.
• Ads and email. Marketing outside the website.
• Posts, stories and Reels, always in one of the versions above.
• Onboarding: welcome, guides, tutorials.
• Error and success messages, to keep them human.

Where he doesn't

• Don't stretch, distort or remove parts (the bubble and the bolt are part of him).
• Don't change the body color. A contrast adjustment is the only exception.
• Don't use him in negative or aggressive contexts.
• Don't place him on a background that makes the face hard to read.

Sizes and color

• 128px tall, minimum, in interfaces. 256px in marketing material.
• 8px of clear space on every side, minimum.
• Body in the brand blue: #3B7BF0 on dark backgrounds, #1E5FE3 on light ones. Outline #1a2e5c.
• Accessories can have other colors (green hat, golden dollar sign). Zapinho himself is always blue.

Not yet available: SVG version, Lottie animation and a dark-theme adjustment (the sunglasses vanish on dark backgrounds).

The two slides

The alternate slide inverts the theme instead of getting a little darker. First the alternate was the website's card color #1e2330 (a 4% difference, invisible on phones), then #262c3d (1.29 contrast, still subtle). Both attempts made the same mistake: changing only the background and keeping the light ink. Now the light slide brings the whole pair, background and ink, and the contrast from one slide to the next is 16.4.

12px corner radius. Manrope 700 for headings, 400 for text. Caveat 700 for handwritten notes.

The kit colors

Alternate and inverse

They are two different things.

• fundo-alt is the second shade of the same theme, next to the background. The dialogue layout uses it on both sides of the chat; the explainer, the annotated photo, the dated story, the before-and-after, the offer card and the modern creative use it to alternate.
• fundo-inverso is the opposite theme, with background and ink swapped together.

When the inverse took over the name fundo-alt, the dialogue came out with a white bubble and white text, and a whole white slide with an invisible signature. Nobody had touched the dialogue.

Over photos

The normal supporting gray (#8a8f9e) was calibrated against the flat background. With an image underneath it drops to 2.51 on the light parts and disappears. On a slide with a photo, supporting text uses tinta-suave-foto (#c3c8d4), which holds 4.83 on the worst patch.

Website and social

The product

Where the customer lives: studio.zappost.ai, in the dark theme. Screenshot for reference on tone and color.

Logos

PNG for the logo with Zapinho, WebP for the website logo.

Zapinho

The six versions, as 1024 × 1024 PNGs with a white background.

Fonts

All four are free. The ones for posts are on Google Fonts; the website ones are on Fontshare.

How to use

• Logo without the mascot on anything about the product: website, decks, documents.
• Logo with Zapinho on social media and in ads.
• Don't stretch, crop or recolor. On dark backgrounds, use the white version.
• Zapinho is at least 128px tall on screen, with 8px of clear space around him.

A use that isn't covered here? Talk to us.