Brand
The Mind the Product brand kit
Logos, colour, and type — everything you need to put Mind the Product on a slide, a stage backdrop, a sponsor page, or a community meetup poster. Take what you need.
Logos
Marks and variants
Four colourways of each mark, as scalable SVG and as PNG at three sizes. Every file is transparent-background.
Mind the Product
The stacked wordmark. This is the primary identity and the one to reach for unless you have a specific reason not to.
#mtpcon
The conference lockup. Use it for event material only — it does not stand in for the Mind the Product mark.
Usage
Using the logo well
A short set of rules that keeps the mark legible everywhere it lands.
Do
- Give the logo room — keep clear space of at least the cap height of the “P” in PRODUCT on every side.
- Scale it proportionally. Hold shift, always.
- Pick the variant with the strongest contrast against its background.
- Use the SVG wherever the medium supports it; fall back to the 2× PNG.
Don’t
- Don’t recolour the mark outside the four supplied variants.
- Don’t stretch, skew, rotate, or condense it.
- Don’t add shadows, outlines, gradients, or glows.
- Don’t place it on a busy image without a scrim behind it.
- Don’t rebuild the wordmark in another typeface.
Clear space
Keep a margin of at least x on all four sides, where x is the cap height of the “P” in PRODUCT — about 15% of the logo’s width. Nothing else sits inside that box.
Minimum size
Below 120px wide on screen — or 30mm in print — the two lines start to close up. Go smaller and you need a different asset, not a smaller logo.
Colour
The palette
Click any swatch to copy its hex. Token names match the CSS variables and Tailwind utilities used across mindtheproduct.com.
Core
The three colours that carry the brand. Blue leads every primary action; midnight is the default ink and the darkest surface. Note the legacy CSS variable name: --mtp-color-cyan is the blue.
MTP Blue
Primary buttons, links, focus states
- RGB
- 18, 108, 255
- Tailwind
- bg-v2-primary
- CSS
- --mtp-color-cyan
Midnight
Body copy, headings, dark surfaces
- RGB
- 23, 4, 74
- Tailwind
- bg-v2-dark
- CSS
- --mtp-color-midnight
White
Default page surface, reversed type
- RGB
- 255, 255, 255
- Tailwind
- bg-v2-white
- CSS
- --mtp-color-white
Accent
Used sparingly for emphasis, highlights, and to distinguish sub-brands. Never as a substitute for MTP Blue on primary actions.
Highlight Yellow
Marker highlights, callouts, event flashes
- RGB
- 236, 240, 35
- Tailwind
- bg-v2-highlight
- CSS
- --mtp-color-markup-yellow
Zingy Cyan
Illustration, gradients, data accents
- RGB
- 33, 204, 250
- Tailwind
- bg-v2-cyan
- CSS
- --mtp-color-zingy-cyan
Purple
AI and product-craft surfaces
- RGB
- 139, 75, 239
- Tailwind
- bg-v2-purple
- CSS
- --mtp-color-purple
Blurple
Secondary fills, gradient midpoints
- RGB
- 69, 70, 224
- Tailwind
- bg-v2-blurple
- CSS
- --mtp-color-blurple
Neutral
Backgrounds, dividers, and quiet UI. Off Black is the deep surface for full-bleed dark sections.
Off Black
Full-bleed dark sections
- RGB
- 6, 1, 25
- Tailwind
- bg-v2-off-black
Black
Print, one-colour reproduction
- RGB
- 0, 0, 0
- Tailwind
- bg-v2-black
- CSS
- --mtp-color-black
Mid Grey
Borders, disabled states, meta text
- RGB
- 198, 193, 219
- CSS
- --mtp-color-mid-gray
Light Grey
Section backgrounds, cards, input fills
- RGB
- 239, 238, 242
- Tailwind
- bg-v2-gray-lightest
- CSS
- --mtp-color-light-gray
Typography
Cera Pro
One typeface, four weights, everywhere. Cera Pro is a licensed font — buy a licence from TypeMates before using it in your own material, or substitute a geometric sans such as Poppins.
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &@#!?
Everything in one file
Both marks, every colourway, SVG and PNG. Something missing, or need the brand reviewed for a partnership? Get in touch.
