The Complete Brand Kit
All assets, colors, and design specs needed to represent Blooio.
Find logos, icons, fonts, color palettes, and guidelines—everything required for correct implementation.
Typography
Geist is our primary typeface. Geist Mono is used for labels, badges, and code.
Send iMessages from anywhere.
The quick brown fox jumps over.
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Blooio automatically detects when leads are actively engaged with your messages.
Send and receive messages from your CRM account, seamlessly. Blue messages for your business communications.
Perfect for captions, card descriptions, and supporting text.
Footnotes and legal disclaimers. Used at the bottom of pages.
High-volume Messaging
Send iMessages from anywhere.
Creates more natural, human conversations that convert better.
Color Palette
Every color used across the product, documented with exact values and Tailwind classes.
Core
Primary Blue
text-primary / bg-primaryPrimary actions, links, accent emphasis, badges
White
text-whiteHeading text, primary copy on dark backgrounds
Background
bg-[#09090A]Page background, section backgrounds
Card Surface
bg-[#171718]Cards, elevated surfaces, inputs
Borders
Border Default
border-[#222222]Card borders, dividers
Border Subtle
border-white/8Subtle dividers, secondary card borders
Text Hierarchy
Muted
text-white/60Body text, descriptions, subheadings
Subtle
text-white/40Captions, card descriptions, tertiary text
Faint
text-white/30Footnotes, legal text, decorative labels
Accent Gray
to-[#999]Gradient text endpoint (white → gray gradient)
Spacing & Layout
Consistent spacing tokens and layout patterns used across every section.
Components
Buttons, cards, and recurring UI patterns.
Card Title
Description text using text-sm text-white/40.
Background: bg-[#171718]
Border: border border-[#222222]
Radius: rounded-xl
Padding: p-5
Icon container: p-1 rounded-sm bg-[#1C1C1C]
Title: text-xl font-medium text-white
Description: text-sm text-white/40
Horizontal Logos
Primary logos for headers, banners, and wide spaces.
Horizontal Logo (Light)
PNG
Horizontal Logo (Dark)
PNG
Vertical Logos
For app icons, profile pictures, and square formats.
Vertical Logo (Light)
SVG
Vertical Logo (Dark)
SVG
Vertical Logo Light @2x
PNG
Vertical Logo Dark @2x
PNG
Icons
Standalone icons for favicons, app icons, and compact spaces.
Icon (Light)
SVG
Icon (Dark)
SVG
Usage Guidelines
Keep our brand looking its best.
✓ Do
- •Use the logos on both light and dark backgrounds as intended
- •Maintain clear space around the logo equal to the height of the icon
- •Use Primary Blue (#007AFF) for accent emphasis — never as a background fill
- •Use font-medium (500) for headings — never bold (700)
- •Download SVG files when possible for best quality at any size
✗ Don’t
- •Alter the logo colors or add effects like shadows or gradients
- •Distort, rotate, or modify the logo proportions
- •Use bold (700) or italic — the brand uses medium (500) weight only
- •Place the logo on busy backgrounds where it’s hard to read
- •Use low-resolution logos or recreate the logo yourself
Need Help?
If you have questions about using our brand assets or need a custom format, we’re here to help.
Contact Us