Branding

Five changes make a Nimbus site look like your product. Each is a file or an option you own.

Name

Set title and description in the Nimbus config in astro.config.ts. The title appears in every page’s <title>, in share cards and in llms.txt; the description is the site’s default meta description.

Logo

The logo is drawn once, in src/components/logo.ts: its box and SVG paths. The header and phone menu (Logo.astro) and every share card read it. Replace the paths with your mark to rebrand them all. Keep it a single-colour mark, since each place fills it with its own text colour.

For a multicolour logo or an image, change Logo.astro to render it:

---
interface Props { class?: string }
const { class: cls = "h-5 w-auto" } = Astro.props;
---
<img src="/logo.svg" alt="" class={cls} />

The share cards still draw logo.ts, so replace that too, or change the cards as Customize OG cards shows.

The header keeps the site title as the link’s accessible name, so the logo itself needs no text. To show your name beside the mark, add it inside Logo.astro.

Favicon

Put favicon.svg, favicon.ico or favicon.png in public/. Nimbus links the first it finds, in that order.

Colours

The accent is two tokens in src/styles/globals.css, one for light mode and one for dark:

:root {
  --nb-brand: oklch(0.55 0.2 265);
}

[data-mode="dark"] {
  --nb-brand: oklch(0.8 0.12 265);
}

--nb-brand colours the current page in the sidebar and the icons in cards. Check that text in the brand colour still reads at 4.5:1 against the background in both modes. Theme and tokens lists every token, including the neutrals, radius and fonts.

Share cards

Nimbus draws a share card for every page at build time: the logo, the page’s section and its title. Its colours, fonts and layout are in src/pages/og/_card.ts; see Customize OG cards. A page’s socialImage frontmatter replaces its card with your own image. See Metadata and SEO.