---
title: Branding
description: Configure title, logos, fonts, theme colors, card defaults, tags, and code styling.
---

Branding settings control how your docs identify your product and how global
visual defaults behave across the site.

Use dashboard [Settings](/edit-in-dashboard/settings) when you want no-code
controls. Use this page when you are editing `docs.json` directly.

## Site title

`title` is required.

```json
{
  "title": "Acme Docs"
}
```

Use a short product or documentation name. The title is part of the global docs
identity and can appear in generated surfaces.

## Home page

Use `home` to choose the page readers see first.

```json
{
  "home": "getting-started/welcome"
}
```

If `home` is omitted, Radiant uses the first MDX page it finds in navigation. If
navigation starts with OpenAPI pages and no MDX page is available, set `home`
explicitly when the site needs a docs homepage.

## Logo

Use `logo` to configure light and dark logo variants.

```json
{
  "logo": {
    "href": "/",
    "pill": "Docs",
    "light": "/logo-light.svg",
    "dark": "/logo-dark.svg"
  }
}
```

Logo image paths must point to image files in the docs root. Supported formats
include `.svg`, `.png`, `.jpg`, `.jpeg`, `.webp`, `.gif`, `.ico`, and `.avif`.

`logo.href` can be an internal path starting with `/` or an external
`http://` or `https://` URL.

## Logo padding

Use object logo variants when a logo needs vertical padding in the navbar.

```json
{
  "logo": {
    "light": {
      "image": "/logo-light.svg",
      "padding": {
        "top": 14,
        "bottom": 14
      }
    },
    "dark": {
      "image": "/logo-dark.svg",
      "padding": {
        "top": 14,
        "bottom": 14
      }
    }
  }
}
```

Padding values must be non-negative numbers.

## Logo pill

Use `logo.pill` for a short label next to the logo, such as `Docs` or `API`.

```json
{
  "logo": {
    "pill": "Docs"
  }
}
```

Set `pill` to `false` to hide it.

```json
{
  "logo": {
    "pill": false
  }
}
```

## Favicon

The favicon is file-based. Place a favicon file in the docs root using one of
these names:

```txt
favicon.svg
favicon.ico
favicon.png
favicon.webp
favicon.avif
favicon.jpg
favicon.jpeg
```

Radiant uses the first matching favicon file it finds. There is no `favicon`
key in `docs.json`.

## Theme base color

Use `theme.baseColor` to control the neutral color palette used by the docs UI.

```json
{
  "theme": {
    "baseColor": "slate"
  }
}
```

Allowed values:

```txt
slate, gray, zinc, neutral, stone, taupe, mauve, mist, olive
```

You can use different base colors for light and dark mode:

```json
{
  "theme": {
    "baseColor": {
      "light": "mist",
      "dark": "neutral"
    }
  }
}
```

## Fonts

Use `theme.fonts` to choose preset fonts for body text, headings, and code. If
`heading` is not set, headings use the configured `text` font.

```json
{
  "theme": {
    "fonts": {
      "text": "source-sans-3",
      "heading": "source-serif-4",
      "code": "jetbrains-mono"
    }
  }
}
```

Available presets are `google-sans`, `inter`, `inter-tight`, `geist`,
`source-sans-3`, `source-serif-4`, `public-sans`, `geist-mono`,
`jetbrains-mono`, `google-sans-code`, `system-sans`, `system-serif`, and
`system-mono`.

## Theme color

Use `theme.themeColor` for the primary brand color used by generated UI
elements.

```json
{
  "theme": {
    "themeColor": {
      "light": "#171717",
      "dark": "#f5f5f5"
    }
  }
}
```

Color values must be valid hex colors.

## Card defaults

Use `theme.card` to set default card cover colors or button colors across the
site.

```json
{
  "theme": {
    "card": {
      "cover": {
        "colors": ["#FF692E", "#2E90FA", "#53B1FD", "#FFB400"]
      },
      "button": {
        "color": "#171717"
      }
    }
  }
}
```

Card-level props override these defaults. Use site-wide defaults for brand
consistency, then customize individual cards only when a page needs a stronger
visual distinction.

## Tag defaults

Use `theme.tag.color` to set the default color for navigation tags.

```json
{
  "theme": {
    "tag": {
      "color": "#2E90FA"
    }
  }
}
```

Individual navigation tags can still set their own color.

## Code syntax theme

Use `theme.code.syntaxTheme` to configure syntax highlighting.

```json
{
  "theme": {
    "code": {
      "syntaxTheme": {
        "light": "vitesse-light",
        "dark": "kanagawa-wave"
      }
    }
  }
}
```

Use bundled Shiki theme names. If you provide one string, Radiant uses that
theme in both light and dark mode.

## Common questions

<AccordionGroup>
  <Accordion title="Can I configure favicon in docs.json?">
    No. Add a supported favicon file to the docs root. Radiant detects it by
    filename.
  </Accordion>

  <Accordion title="Should the logo link to my docs home or product site?">
    Use `/` when the logo should return readers to the docs home. Use a full
    URL when the logo should send readers back to your product or marketing
    site.
  </Accordion>

  <Accordion title="Can light and dark mode use different colors?">
    Yes. Many color fields accept either one hex string or an object with
    `light` and `dark` values.
  </Accordion>

  <Accordion title="When should I use card defaults?">
    Use card defaults when cards across the docs should share a brand palette.
    Override individual cards only for important entry points or special
    sections.
  </Accordion>
</AccordionGroup>

## Next pages

<Columns columns={3}>
  <Column>

  <Card title="Card component" href="/edit-markdown/components/card" icon="lucide:credit-card">
    Style linked cards.
  </Card>

  </Column>
  <Column>

  <Card title="Navbar and footer" href="/configure-with-docs-json/navbar-and-footer" icon="lucide:panel-top">
    Configure global links.
  </Card>

  </Column>
  <Column>

  <Card title="Settings" href="/edit-in-dashboard/settings" icon="lucide:settings">
    Use no-code controls.
  </Card>

  </Column>
</Columns>