Set Up Site Branding

Add your logos, colors, and visual identity to create a branded documentation site that matches your company's look and feel.

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 Editor (Recommended)

Most branding options can be configured directly from Site Config in the Editor without editing JSON.

Step 1: Open Branding Settings

1. In the Editor, click Site Config in the top toolbar.
2. Scroll to the Brand & Theme section.

Changes made here are stored in documentation.json and appear in the Changes panel. 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.

All uploaded assets are stored under logos in documentation.json. After updating logos, Publish your documentation so changes appear on the live site.

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 Site Config in the Editor.

Step 1: Configure site name

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

{
  "name": "Your Company Name"
}

Site name displayed in the browser title, navigation header, and social media previews. Appears as "Page Title - Site Name" format in browser tabs.

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"
    }
  }
}

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

Remove Footer Branding

By default, published documentation pages include a "Powered by Documentation.AI" footer link. Removing this footer branding (white-label) is available on the Enterprise plan only.

If you are on an Enterprise plan and want to remove the footer branding, contact your customer success manager or support to enable white-label mode for your documentation site.

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

All branding elements are optional except for the site name. Documentation.AI provides professional defaults for any missing assets. You can start with basic branding and add more elements over time as your brand assets become available.