Branding

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

Use dashboard Settings when you want no-code controls. Use this page when you are editing docs.json directly.

Site title

title is required.

{  "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.

{  "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.

{  "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.

{  "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.

{  "logo": {    "pill": "Docs"  }}

Set pill to false to hide it.

{  "logo": {    "pill": false  }}

Favicon

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

favicon.svgfavicon.icofavicon.pngfavicon.webpfavicon.aviffavicon.jpgfavicon.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.

{  "theme": {    "baseColor": "slate"  }}

Allowed values:

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

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

{  "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.

{  "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.

{  "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.

{  "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.

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

Individual navigation tags can still set their own color.

Code syntax theme

Use theme.code.syntaxTheme to configure syntax highlighting.

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

Next pages