Set Up Site Branding

Apply your brand identity to your documentation site using logos, colors, and visual elements. The Documentation.AI platform supports comprehensive branding customization to ensure your documentation aligns with your company's visual identity.

Prerequisites

• Your brand assets (logos in different formats and themes)
• Brand color palette in hex format
• Access to your documentation.json file
• Understanding of your brand guidelines and requirements

Set Up Your Brand Identity

Follow these steps to apply your brand to your documentation site.

Step 1: Configure site name

Set your site's primary identity in documentation.json:

{
  "name": "Your Company Name"
}

Step 2: Prepare your logo assets

Before adding logos, ensure you have:

• Main logos: For header display (120-200px width recommended)
• Small logos/favicons: Square format for browser tabs (16x16, 32x32, 64x64px)
• Theme variants: Light and dark versions of each logo
• Supported formats: PNG, SVG, or WEBP files

Step 3: Upload and configure logos

Add your logo URLs to documentation.json:

{
  "logo-dark": "https://example.com/logo-dark.svg",
  "logo-light": "https://example.com/logo-light.svg", 
  "logo-small-dark": "https://example.com/favicon-dark.svg",
  "logo-small-light": "https://example.com/favicon-light.svg"
}

Step 4: Apply brand colors

Set your brand colors for consistent visual identity:

{
  "colors": {
    "light": {
      "brand": "#3143e3",
      "heading": "#1a1a1a", 
      "text": "#374151"
    },
    "dark": {
      "brand": "#85a1ff",
      "heading": "#f2f2f2",
      "text": "#c1c1c1"
    }
  }
}

Color configuration:

• brand: Primary brand color for buttons and links
• heading: Color for headings and titles
• text: Color for body text and content

Step 5: Test your branding

1. Save your documentation.json file
2. Deploy or preview your site
3. Verify logos display correctly in both themes
4. Check brand colors appear consistently
5. Test browser tab favicon and title
6. Verify mobile responsiveness

Optimize Your Brand Implementation

Logo best practices

• Use SVG when possible: Scalable and crisp at all sizes
• Provide theme variants: Ensure visibility in both light and dark modes
• Optimize file sizes: Compress images for fast loading
• Test readability: Ensure logos are clear at small sizes

Color guidelines

• Maintain brand consistency: Use official brand colors
• Ensure accessibility: Meet WCAG contrast requirements
• Test both themes: Verify colors work in light and dark modes
• Consider user experience: Avoid overly bright or dark colors that strain eyes

Brand compliance tips

• Follow your company's brand guidelines
• Maintain consistent color usage across all elements
• Use approved logo variants and formats
• Ensure proper spacing and sizing ratios

Complete Branding Setup

{
  "name": "Documentation.AI",
  "logo-dark": "https://cdn.example.com/logo-dark.svg",
  "logo-light": "https://cdn.example.com/logo-light.svg", 
  "logo-small-dark": "https://cdn.example.com/favicon-dark.png",
  "logo-small-light": "https://cdn.example.com/favicon-light.png",
  "colors": {
    "light": {
      "brand": "#3143e3",
      "heading": "#1a1a1a",
      "text": "#374151"
    },
    "dark": {
      "brand": "#85a1ff", 
      "heading": "#f2f2f2",
      "text": "#c1c1c1"
    }
  }
}

Troubleshooting Branding Issues

Logo not displaying: Check URL accessibility and file format support

Colors not applying: Verify hex format and proper JSON syntax

Mobile logo issues: Ensure small logo variants are provided

Theme switching problems: Test both light and dark logo variants

What's Next

• Configure colors and typography
• Set up header navigation
• Organize your site navigation
• See complete site configuration reference