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 Branding from the Settings UI (Recommended)

Most branding options can be configured directly from the Documentation.AI Settings UI without editing JSON.

Step 1: Open Branding Settings

1. In the left sidebar, go to Settings.

2. Under Documentation Settings, select General.

3. At the top of the page, you’ll see the Documentation Settings section, followed by Brand & Theme.

Changes made here are stored in documentation.json. Publish your documentation to apply the changes to your live site.

Step 2: Configure Documentation Name and URL

In the Documentation Settings section:

• Documentation Name
  Sets the main name of your documentation space. This is used in the UI and appears in browser titles in combination with page titles.

• Documentation Description
  A short summary of what this documentation covers. This may be used in search and meta information.

• Website URL
  Your main website URL. This helps with theme imports and how search engines see your site.

Click Save after updating each field.

Step 3: Upload Logos and Favicon

Scroll down to the Brand & Theme section and locate Documentation Logos. Here you can upload:

• Dark Theme logo
  Displayed when users view your documentation in dark mode.

• Light Theme logo
  Displayed when users view your documentation in light mode.

• Favicon
  Small square icon used in browser tabs and shortcuts.

If you prefer to manage branding via configuration files (for example, in version control), you can use the advanced configuration described below.

Configure Branding via Configuration File (Advanced)

Use this approach if you prefer to manage branding in code or keep everything in version control. The settings here mirror what you configure in the Settings UI.

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-200 px width recommended)

• Small logos/favicons: Square format for browser tabs (16x16, 32x32, 64x64 px)

• 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 and deploy

1. Save your documentation.json changes.

2. Rebuild or deploy your documentation.

3. Confirm logos and colors look correct in both light and dark themes.

4. Check favicon appearance in browser tabs and on mobile.

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