Brand Resources
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.
Access official logo files, font details, and color tokens for seamless brand consistency everywhere.
Typography
Geist is our primary typeface. Geist Mono is used for labels, badges, and code.
Using an LLM?
Send iMessages from anywhere.
The quick brown fox jumps over.
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
Core tokens for dark pages (#09090A). On light pages, swap text and borders for black-based utilities — see Light & Dark Pages.
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-[#999999]Gradient text endpoint (white → gray gradient)
Light & Dark Pages
Blooio ships two page themes. Use dark tokens on #09090A backgrounds and light tokens on white pages — never mix them on the same surface.
Section label
Section heading
Body and description copy on dark pages.
CaptionDark pages
Homepage, brand kit, and dark marketing sections (bg-[#09090A])
Section label
Section heading
Body and description copy on light pages.
CaptionLight pages
Enterprise (/enterprise) and other white-background pages
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
Icon PNG (Light)
PNG
Icon PNG (Dark)
PNG
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 accents, links, and small badges — not for large section or page backgrounds
- •Use font-normal (400) for section H2 on dark pages and font-medium (500) on light pages; font-medium for card and step titles (H3/H4) everywhere
- •Match the page theme: dark surfaces use white text tokens; light surfaces use black text tokens and border-black/8
- •Body and headings use -0.01em letter-spacing (globals.css)
- •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
- •Mix dark and light tokens on one page (e.g. text-white/60 on white, or font-normal H2 on enterprise)
- •Use font-medium on section H2 for dark pages, or font-normal on light pages
- •Place the logo on busy backgrounds where it’s hard to read
- •Use low-resolution logos or recreate the logo yourself
Need Help?
Questions about brand assets or need a custom format?