Primary lockup
Our signature. Glass icon with the outlined InboxIt wordmark.
INBOXIT / BRAND KITOne brand.
One brand.
Every little detail.
The logos, colours and components that make InboxIt feel like InboxIt. Ready to view, use and download.
Download brand kit ZIP
Made to stand out. Built to scale.01 / THE SIGNATURE
A logo for every space.
True SVG vectors. Transparent backgrounds. Outlined lettering.
SVG
Horizontal logo
The everyday logo for navigation, footers and email.
Stacked logo
A compact arrangement for covers and square placements.
App icon
The full glass treatment for app tiles and larger placements.
Standalone mark
The simplest expression. Use when the name is already nearby.
Single colour
For one-colour printing and places where gradients cannot be used.
02 / OUR PALETTEQuiet foundations.
Download CSS Quiet foundations.
A bright personality.
Purple leads. Mint and lime add a little surprise.
Colour that fades, never cuts.
Blend lavender into violet, with mint entering softly at the lower edge. Keep the gradient inside the artwork; give the rest of the layout room to breathe.
Clear at every size.
Good things
land here.
land here.
Manrope brings a friendly, confident shape to headings. Use 600–800 weight, tight tracking and short lines.
Font licenceEmail for whatever
you’re building.
you’re building.
DM Sans keeps interfaces and longer reading comfortable. Use 400–600 weight and generous line spacing.
Font licenceAa
12pxAa
14pxAa
16pxAa
20pxAa
28pxAa
40pxAa
64px04 / THE DETAILS
Design tokens Everything belongs together.
Soft corners, clear actions and enough space to make the next step obvious.
The landing page systemSoft glass.
Soft glass.
Clear purpose.
These are the same React components used across the landing page: gradient actions, glass surfaces, icon tiles and section headings.
Your emails. Your brand.
Reusable components. One consistent visual language.
Loading, with a little personality.
The shared logo loader reveals two characters at a time. Real loading states use this component and disappear as soon as the data is ready.
Loading your workspace…
Actions
One strong primary action. Supporting actions stay quiet.
VerifiedNeeds setupDraft
Fields & focus
Labels stay visible. Focus uses a purple ring.
Example field · your changes are not saved.Space
48121624324864A 4px base, with 24–32px inside cards and 64–96px between major sections.
Shape & motion
12px24px32px
12px controls · 24px cards · 32px feature panels. Use gentle 220ms transitions; respect reduced-motion preferences.
A little care goes a long way.
Give it space.
Keep clear space around the mark of at least one quarter of its width. Use the standalone mark at 24px or larger.
Choose the right version.
White lettering on dark surfaces. Dark lettering and a purple arrow on light surfaces. Use the glass tile when there is room for detail.
Keep the shape intact.
Do not stretch, crop, rotate or recolour the logo. Avoid extra shadows, busy backgrounds and low-contrast placements.
All the pieces. In one place.
SVG logos, design tokens, fonts, licences and usage notes.