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#f40also 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.
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.