# 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`:
```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`:
```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:
```json
{
  "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](mailto:hello@documentation.ai) to enable white-label mode for your documentation site.

## Complete Branding Setup

```json
{
  "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](/content/docs/customize/colors-and-typography/index.html)
- [Set up header navigation](/content/docs/customize/header-and-navbar/index.html)
- [Organize your site navigation](/content/docs/customize/navigation-and-sidebar/index.html)
- [See complete site configuration reference](/content/docs/customize/site-configuration/index.html)

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.