Customize the Branding

Set the site metadata

Open config.mjs and replace the placeholder values:

• siteName: Title shown in the browser tab, sidebar, and footer.
• description: A short tagline that appears in meta tags and search results.
• url: The canonical production URL for your docs.
• social: Update or remove the items to match the platforms you want to highlight.

These settings flow into the Starlight configuration so you only have to update them in one place.

Update the logo

Replace the SVG files in src/assets/ with your own artwork. Keep the same file names to avoid changing imports. Provide both light and dark variants if possible so the site looks good in both color schemes.

Need a quick placeholder while design work is in progress? Edit the SVGs directly and customize the text labels or colors—they are plain vector files.

Adjust typography and colors

Fine-tune the look and feel through src/styles/custom.css.

:root {
  --sl-color-accent: #2563eb; /* Replace with your brand color */
}

Override any additional variables as needed. The CSS file is scoped to the entire site, so you can add selectors for callouts, cards, or code samples.

Refresh the landing page copy

Edit src/components/Lander.astro to update the headline, supporting text, and CTA links. The component intentionally avoids product-specific references, so plug in messaging that fits your project. Feel free to remove sections you do not need or duplicate blocks to showcase more features.