# Appearance

Brand your docs site with a color, fonts, a default theme, a logo and a favicon.

**Settings → Appearance** makes the site look like your product. A live preview shows the result as you change things. Choose **Save** to apply it to the site.

## Brand color

The color is used for links, buttons, focus rings and the current page in the sidebar.

- Enter a hex color such as `#F24823`. Three-digit codes like `#f40` also work.
- Or pick a preset: Docup orange, Blue, Green, Teal, Rose, Amber or Black.

Text on top of the color switches between white and near-black based on how light the color is, so buttons stay readable.

## Fonts

Choose one font for **headings** and one for **body text**, which also covers menus and buttons.

| Group | Options |
| --- | --- |
| Default | Docup default |
| Sans serif | Inter, DM Sans, Hanken Grotesk, Plus Jakarta Sans, Manrope, IBM Plex Sans, Space Grotesk |
| Serif | Source Serif 4, Lora, Merriweather, Playfair Display |
| System | The reader's own font: `system-ui, -apple-system, "Segoe UI", Roboto, sans-serif` |

Fonts load from Google Fonts, and only the fonts you pick are requested. The system font loads nothing.

## Theme

**First visit** sets how the site looks the first time someone opens it: **Match device**, **Light** or **Dark**. Readers can switch with the theme toggle, and the site remembers their choice.

## Logo and favicon

| Asset | Formats | Size limit | Notes |
| --- | --- | --- | --- |
| Logo | PNG, JPG, WebP, SVG | 500 KB | Shown at about 28 px tall in the header. |
| Dark logo | PNG, JPG, WebP, SVG | 500 KB | Optional. Replaces the logo on dark backgrounds. |
| Favicon | PNG, SVG, ICO | 200 KB | Square, 48 px or larger. |

**Show site name** controls whether the project name appears next to the logo. Without a logo, the name is always shown.

> **Tip:** Use an SVG logo and provide a dark version. SVGs stay sharp on every screen, and a dark logo avoids a dark mark disappearing on a dark header.

Next, set how your site appears in search and when links are shared in [Search and sharing](/settings/search).