Pubb identity
Brand guidelines
Our logo, colors, and typography. Everything you need to make Pubb look like Pubb, wherever it appears.
The logo
Our folded symbol and lowercase wordmark, together. Use this version whenever you introduce Pubb. Choose a light or dark background, then download the asset you need.
SVG for sharp artwork at any size. PNG for presentations and documents. All downloads have transparent backgrounds.
The wordmark
A name with its own character. Our wordmark is custom outlined artwork. Use these original shapes, and keep the letters and their spacing together.
The symbol
The blue-violet fold is our compact signature. Use it for avatars, app icons, and spaces where the full logo won’t fit.
Our colors
Signal Blue and Fold Violet bring the energy. A quiet set of neutrals gives the content room to breathe. Keep gradients inside the original symbol.
Primary accent
Secondary accent
Headings & text
Dark surfaces
Light surfaces
Backgrounds
Supporting text
Secondary details
Select a swatch to copy its HEX code.
Typography
Inter carries the conversation. JetBrains Mono makes the technical details clear. The logo’s custom lettering is separate from both.
Inter
Headings & interfaceAa Bb Cc
Bring your applications to life.
Regular 400Medium 500Semibold 600Bold 700
JetBrains Mono
Code & technical textAa 01 {}
pubb.connect();
Regular 400
Keep it consistent
A little space and the right proportions go a long way. These basics keep the Pubb identity clear and recognizable.
Give it room
Leave at least one-sixth of the symbol’s height as clear space around the artwork. The supplied files already include clear-space margins.
Keep it readable
Use the full logo at 160px wide or larger, and the standalone symbol at 32px or larger. Use the dedicated favicon for smaller browser icons.
Download favicon SVG
Keep the original shape
Keep proportions, rotation, colors, and spacing intact. Don’t stretch the logo, add effects, or recreate the wordmark with a font.
Write it as Pubb
Use Pubb in sentences and pubb.io for the domain. The lowercase lettering belongs to the logo. Keep other copy separate from the artwork.