Compass
On this pageUpdate the shared config
  1. Update the shared config
  2. Adjust the docs structure
  3. Refine presentation

Compass Docs

Customize Your Docs Site

Adjust branding, layout choices, and content presentation across your docs.

1 min readUpdated

Compass is meant to be re-skinned. The fastest way to make it feel like your product is to update the shared site config first, then refine the content model and styles.

Update the shared config

Start in src/config/site.ts:

  • name
  • title
  • description
  • siteUrl
  • the header action button
  • editBaseUrl for “Edit this page” links

The homepage hero copy, popular searches, recently updated list, and closing band live in src/config/home.ts.

Adjust the docs structure

Then update src/config/docs.ts so the homepage cards and navigation match your actual docs sections.

Refine presentation

Common customizations include:

  • changing copy across the homepage and article descriptions
  • changing the accent color, shadows, and dark mode palette through the tokens at the top of src/styles/global.css
  • swapping the fonts in public/fonts and the @font-face rules in src/styles/global.css
  • editing layouts in src/layouts
  • adding reusable MDX components for callouts or demos