DocsLogo & Brand

Brand Guidelines

Logo & Brand Identity

Complete brand identity documentation including logo variants, sizing specifications, color palette, and implementation guidelines for consistent presentation.

Download Assets Color Reference

Logo Variants

4.7:1

Aspect Ratio

SVG

Vector Format

Brand Colors

Logo Variants

Choose the appropriate variant based on your background color to ensure optimal contrast and visibility.

Light Logo

Designed for dark backgrounds where maximum contrast is needed

Recommended for:Dark headers, overlays, hero sections

Download SVG

Dark Logo

Designed for light backgrounds in content areas

Recommended for:Light backgrounds, footers, documents

Download SVG

Sizing Specifications

Use these recommended sizes to ensure the logo displays correctly across different contexts.

Original Dimensions: 470 x 100 px

Always maintain the 4.7:1 aspect ratio when scaling. The SVG format allows infinite scaling without quality loss.

Context	Size	Tailwind CSS	Description
Navigation Header	`150 x 32 px`	`h-8 w-auto`	Standard header placement
Footer	`188 x 40 px`	`h-10 w-auto`	Slightly larger for visibility
Hero Section	`470 x 100 px`	`h-24 w-auto`	Full-size display

Brand Colors

The official BizKitHub color palette for consistent brand representation.

#ec6c50

Primary

CTAs, highlights, accents

HEX#ec6c50

RGB236, 108, 80

#1d2125

Font

Text, headings

HEX#1d2125

RGB29, 33, 37

For the complete color system including UI colors and accessibility guidelines, visit the Color Documentation.

Usage Guidelines

Follow these guidelines to maintain consistent brand presentation.

Correct Usage

Use the light variant on dark backgrounds
Use the dark variant on light backgrounds
Maintain the original 4.7:1 aspect ratio
Ensure adequate clear space around the logo
Use recommended sizes for each context

Avoid These

Do not stretch or distort the logo
Do not use on low-contrast backgrounds
Do not modify the colors or typography
Do not place on busy or patterned backgrounds
Do not add effects like shadows or gradients

Implementation

Code examples for implementing the logo in your projects.

HTML

<!-- 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

import Link from 'next/link';

// Header logo (light on dark background)
<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 background)
<img
  src="https://cdn.bizkithub.com/images/bkh-logo/bkh-dark.svg"
  alt="BizKitHub"
  className="h-10 w-auto"
/>

Brand Assets Repository

Access the complete BizKitHub logo package with all formats, sizes, and brand guidelines.

View on GitHub

SVG

Vector

PNG

Raster

PDF

Need help with brand implementation?

If you have questions about logo usage or need custom assets, our design team is ready to assist.

Contact Design Team Color Documentation