Versatile brand style

Compass knowledge base template

Compass is a calm, green knowledge base template with a search-first home page, a light and dark switch for visitors, and three-column articles.

  • Inter
  • Comfortable spacing
  • Dark mode built in
  • 6 pages designed

Included on every plan, and in the 14-day free trial. No credit card needed.

Every page, designed

See Compass on every page.

Real screenshots of a demo help center running Compass exactly as it ships, before any changes. Pick a page to see it.

Compass knowledge base template: the whole home page
The whole Compass home page, top to bottom.
Compass knowledge base template: a category page
A category page, listing the category’s articles and subcategories.
Compass knowledge base template: a article page
An article page, in the reading layout Compass gives every article.
Compass knowledge base template: a search results page
Compass knowledge base template: the home page in dark mode
The home page in dark mode. Compass follows each visitor’s device setting, and it is the one template with its own light and dark switch in the header too.
Compass knowledge base template on a phone: the home page
The home page on a phone, 390 pixels wide.
About the template

About Compass

Compass is the template every new HelpCenter.io help center starts on. The home page leads with one question, “How can we help?”, a large search box and a row of popular searches, then lays your categories out as cards, each with an icon and an article count.

Articles get three columns: your topics on the left, the article in the middle and an “On this page” outline on the right, so long guides stay easy to follow. It is also the only template with its own light and dark switch in the header, on top of following each visitor’s device setting.

Best for

  • SaaS and product teams that want a clean, familiar help center
  • Long how-to guides that need an outline beside them
  • A first help center that should look finished on day one

Looking for a free knowledge base template?

Compass is also free and open source under GPL-3.0 on knowledgebase.dev. Download it as plain HTML, CSS and JavaScript and host it yourself, with six Markdown article blueprints and a launch checklist.

Get the free Compass template
Page by page

What’s on each page.

What Compass puts on each page before you change anything. Every section can be removed, reordered or added to in the editor.

Home page

  • A large search box
  • Category cards“3 across”
  • An article list“A good place to start”

Category pages

  • The category’s articles and subcategories
  • Search in the header

Article pages

  • Search in the header
  • A topic tree in the sidebar“Browse topics”
  • Related articles“Keep exploring”
  • A table of contents in the side rail
  • An export menu

Search results, contact and 404 pages are designed in the same style.

Make it yours

Start from Compass’s settings. Change any of them.

These are the settings Compass ships with. Each one is a control in the visual editor, and changing it restyles every page at once. Add your logo, use your own fonts, and add custom CSS when you want full control.

Start with Compass
Typefaces

Headings Inter

Body Inter

Colours

Light

  • Primary: #24644f
  • Accent: #edf6f1
  • Background: #ffffff
  • Surface: #f6f8f6

Dark

  • Primary: #a2e3bd
  • Accent: #263d31
  • Background: #131b18
  • Surface: #1b2520
Corners
  • Small: 8px
  • Medium: 12px
  • Large: 14px
Spacing

Comfortable

One of compact, comfortable or spacious, set for the whole help center.

Included with Compass, and with every template

What every template includes
  • Search with instant results
  • Dark mode, built in
  • Reflows down to 320px
  • WCAG AA colour contrast
  • Sitemap, meta and hreflang
  • Every language you publish in
FAQ

Questions about Compass.

More in the templates FAQ, or ask our team from our help center.

Is the Compass template free?

Compass is included in every HelpCenter.io plan at no extra cost, like every template, and you can try it free for 14 days with no credit card needed. If you would rather host it yourself, Compass is also a free, open-source knowledge base template on knowledgebase.dev, under GPL-3.0.

Can I change Compass’s colours and fonts?

Yes. Compass starts with Inter and #24644f as its primary colour. Both are settings in the visual editor, along with your logo, the rest of the palette, the corner radius and the spacing, and changing one restyles every page.

Does Compass have a dark mode?

Yes. Compass follows each visitor’s device setting, and it is the one template with its own light and dark switch in the header too. You can edit the dark palette separately from the light one, and add a logo made for dark backgrounds.

Can I switch from Compass to another template later?

Yes, whenever you like, from the theme gallery in the editor. You compare the new template with your current design and choose which parts of it to apply. Your articles and categories are never touched, and nothing changes for visitors until you publish.

Does Compass work on phones?

Yes. Compass is built to reflow on screens as narrow as 320px, and the editor previews desktop, tablet and mobile sizes before you publish. The phone screenshot on this page shows its home page 390 pixels wide.

Keep browsing

More versatile brand styles.

Browse all 15 templates
  • Home page of the Aurora Support knowledge base template

    Aurora Support

    A modern support home lit by a soft gradient hero, with search front and centre.

  • Home page of the Support Classic knowledge base template

    Support Classic

    A warm, familiar support hub with a hero search customers reach for first.

  • Home page of the Stripe Clean knowledge base template

    Stripe Clean

    A crisp, documentation-first layout that suits product and developer teams.

Start your help center on Compass.

Your 14-day trial starts with Compass already applied. Make it yours in the editor and publish when it looks right. No credit card needed.