Brand Guidelines
We keep the system simple and predictable. Page backgrounds use a clean base color of #FAFAFA. Interactive surfaces (cards, popovers, dropdowns, inputs) use pure white #FFFFFF and glass tokens for depth.
Our teal pair has been refreshed: Light Teal is now #B3E5E8 and hoo.be Teal is #8DD8DD. All shadcn primitives are themed via CSS variables and tokens so changes propagate globally.
Logo
The hoo.be logo comes in multiple formats optimized for different use cases. All logos are high-resolution PNG files (8K+) ready for web and print.
Horizontal Logos (Transparent)
Best for: Website headers, email signatures, presentations, banners • Size: ~4577×1288px
Black Text
Navbar, light backgrounds
4577×1288px
Teal Text
Brand color emphasis
4577×1287px
White Text
Dark mode, dark backgrounds
4577×1287pxQuick Reference
Website
Social & Print
Color
Our color system is anchored by our signature teal gradient (Light Teal to hoo.be Teal), along with pure black (#000000) and pure white (#FFFFFF). These colors define the hoo.be identity and are complemented by our accent color system and technical UI colors.
Brand Colors
Official hoo.be brand colors with complete color specifications for print and digital use. All components use pure white (#FFFFFF) for surfaces and pure black (#000000) for text and buttons.
Light Teal to hoo.be Teal
Use for backgrounds, hero sections, and feature highlights
— → —135degSurface Colors
Background colors for pages and interactive surfaces. Page backgrounds use #FAFAFA, while all component surfaces (cards, popovers, inputs) use pure white (#FFFFFF).
Accent Colors
Used for status indicators, feedback, and visual emphasis. Green for success, Amber for warnings, Red for errors.
Typography
Our typography system combines Poppins for everyday content with Monument Extended Ultrabold for powerful, occasional headlines.
The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Type Scale
Font Weights
Usage Examples
Page Title
Executive
Strategic planning and roadmap
Section Title
Revenue Strategy
Four revenue streams create a sustainable business
Body Text
Our platform combines link-in-bio functionality with monetization tools, helping creators build their brand, manage their online presence, and earn income from their influence. We focus on providing a seamless experience across all devices while maintaining consistency in our visual language.
Typography Best Practices
- • Line height: Use 90% for headings, 115% for titles, 115-150% for body text
- • Tracking: -3% for all caps headings, -2% for titles, default for body
- • Hierarchy: Maximum 3 levels of hierarchy per section
- • Contrast: Ensure 4.5:1 contrast ratio for body text, 3:1 for large text
- • Line length: 60-75 characters for optimal readability
Occasional Headline Typeface
For bold, impactful moments only. Use sparingly (1-3 times per page maximum).
THE QUICK BROWN FOX JUMPS
Usage: Hero headlines, major feature callouts, promotional content. Creates bold visual impact. Always use in UPPERCASE for maximum effect.
className="font-monument"Iconography
Custom brand icons representing hoo.be core features. Available with or without teal circular borders.
Brand Icons
Custom icons representing hoo.be core features. Available with or without teal circular borders.
Link
Link-in-bio, connections
Core FeatureWith circle:
<LinkIconCircled
size={80}
className="..."
/>Icon only:
<LinkIcon
size={24}
className="text-light-teal"
/>Creator Pass
Premium features, tickets
Core FeatureWith circle:
<CreatorPassIconCircled
size={80}
className="..."
/>Icon only:
<CreatorPassIcon
size={24}
className="text-light-teal"
/>Analytics
Metrics, growth, insights
Core FeatureWith circle:
<AnalyticsIconCircled
size={80}
className="..."
/>Icon only:
<AnalyticsIcon
size={24}
className="text-light-teal"
/>Import Brand Icons
import {
LinkIcon,
CreatorPassIcon,
AnalyticsIcon,
LinkIconCircled,
CreatorPassIconCircled,
AnalyticsIconCircled
} from '@/components/icons/BrandIcons';Spacing
Consistent spacing creates visual rhythm and hierarchy. Our spacing system uses a 4px base unit for predictable, harmonious layouts.
Spacing Scale
0.5123468121624Common Spacing Patterns
className="px-4"Horizontal padding for responsive containers
1rem (16px) on each side
className="mb-16"Bottom margin between major sections
4rem (64px) bottom spacing
className="p-6"Internal card padding
1.5rem (24px) all around
className="gap-4"Space between flex/grid items
1rem (16px) between elements
className="space-y-3"Vertical spacing between stacked elements
0.75rem (12px) between items
Visual Examples
Teal dashed border shows 1.5rem (24px) padding on all sides
1rem (16px) gap between flex items
• Use spacing scale values consistently
• Increase spacing for visual hierarchy
• Match spacing to content importance
• Use responsive spacing (md:p-8 vs p-4)
• Group related items with less spacing
Quick Reference
• Tight: 2-3 (8-12px) for related items
• Default: 4-6 (16-24px) for components
• Comfortable: 8-12 (32-48px) for sections
• Generous: 16-24 (64-96px) for major divisions
Component Library
View our complete component library in Storybook with interactive examples, live props editing, and auto-generated documentation.
What's in Storybook: