BizKitHub Logo

Complete corporate identity for web applications including graphic logo, usage guidelines, and brand specifications. Download assets and learn proper implementation.

🎨 Brand Identity

The BizKitHub logo represents our commitment to professional, reliable business solutions. Use these guidelines to maintain consistent brand presentation across all applications.

Logo Variants

Light Logo

Use on light backgrounds and content areas

Best for:Light backgrounds, content, main areas

Format:SVG Vector

Download SVG

Dark Logo

Use on dark backgrounds and headers

Best for:Dark backgrounds, headers, overlays

Format:SVG Vector

Download SVG

Sizing Specifications

Aspect Ratio: 470:100

Always maintain the original aspect ratio when scaling the logo. The logo is designed with a 4.7:1 width-to-height ratio.

Context	Recommended Size	Description	CSS Example
Web Application Header	`150x32 px`	Standard size for navigation headers	`h-8 w-auto (Tailwind CSS)`
Footer	`188x40 px`	Slightly larger for footer visibility	`h-10 w-auto (Tailwind CSS)`
Large Display	`470x100 px`	Original aspect ratio for hero sections	`h-25 w-auto (custom sizing)`

Brand Colors

#ec6c50

Primary Orange

Main brand color, CTAs, highlights

HEX: #ec6c50

RGB: rgb(236, 108, 80)

#1d2125

Primary Font

Main text color, headers

HEX: #1d2125

RGB: rgb(29, 33, 37)

Note: For complete color documentation including all platform colors, visit our Color Documentation page.

Usage Guidelines

✅ Correct Usage

Use appropriate variant for background color
Maintain original aspect ratio (470:100)
Ensure sufficient contrast with background
Use recommended sizes for different contexts
Keep adequate white space around logo

❌ Avoid These Mistakes

Do not stretch or distort the logo
Do not use light logo on light backgrounds
Do not use dark logo on dark backgrounds
Do not modify colors or typography
Do not place logo on busy backgrounds

Implementation Examples

HTML Implementation

<!-- Light logo for dark backgrounds -->
<img 
  src="https://cdn.bizkithub.com/images/bkh-logo/bkh-light.svg" 
  alt="BizKitHub" 
  class="h-8 w-auto"
/>

<!-- Dark logo for light backgrounds -->
<img 
  src="https://cdn.bizkithub.com/images/bkh-logo/bkh-dark.svg" 
  alt="BizKitHub" 
  class="h-8 w-auto"
/>

React/Next.js Implementation

import Link from 'next/link';

// Header logo (light on dark)
<Link href="/" className="flex items-center">
  <img 
    src="https://cdn.bizkithub.com/images/bkh-logo/bkh-light.svg" 
    alt="BizKitHub" 
    className="h-8 w-auto"
  />
</Link>

// Footer logo (dark on light)
<img 
  src="https://cdn.bizkithub.com/images/bkh-logo/bkh-dark.svg" 
  alt="BizKitHub" 
  className="h-10 w-auto"
/>