Customizing your help center theme

Your help center should look like your product. Ochre gives you a small set of strong knobs and a custom CSS slot. The defaults are intentionally restrained. The customizations you ship should be too.

Where to find theme settings

Knowledge → Settings → Theme. The settings are split into Colors, Typography, Layout, Hero, Footer, and Custom CSS.

Changes preview live. Save to publish. Saving makes the theme active immediately for every visitor.

Colors

Four color slots:

• Primary. Buttons, link hover, accent dividers.
• Accent. Secondary CTAs, badges, callout backgrounds.
• Text. Body copy. Pick a color with at least 7:1 contrast against the background.
• Background. The page background. White or off-white reads best for long-form articles.

Ochre auto-derives hover, active, and disabled states from these four. Do not pick neon. Pick the colors from your product.

Typography

Pick a font family. Ochre ships with a small curated list (system stack, Inter, IBM Plex Sans, JetBrains Mono, and a serif slot). For custom fonts, host the WOFF2 yourself and reference it in the custom CSS slot.

Two size scales: comfortable (default) and compact. Most teams stay on comfortable. Compact only makes sense if your articles are heavily reference-style and short.

Line height and paragraph spacing are derived. There are no knobs and that is deliberate.

Layout

A few toggles that change the shape of the help center.

• Sidebar visible. Default on. Lists categories on the left of every article.
• Show category icons. Off by default. Turn on if you have configured icons. Otherwise looks empty.
• Article width. Comfortable (~720px) or wide (~960px). Comfortable reads better. Wide makes sense for technical references with code blocks.
• Show "table of contents" on articles. Off by default. Useful for articles over 1000 words.

Hero

The top section of the help center home page. Two layout choices:

• Search-first. Big search bar, small heading. Best for help centers above 50 articles.
• Categories-first. Headline, sub-headline, then category grid. Best for smaller help centers.

You can set the headline, sub-headline, optional background image, and an optional CTA button. Keep the headline under 8 words.

Footer

Footer content shows on every help center page. Set:

• A short blurb (2 lines max).
• Up to 6 footer links (your main site, status page, contact, and so on).
• Social handles.
• Copyright string.

Ochre adds a small "Powered by Ochre" mark by default. Hide it on paid plans.

Custom CSS

For everything the structured options do not cover. Drop CSS into the custom CSS slot. It is appended after the theme stylesheet, so your selectors win on equal specificity.

What gets stripped

Ochre sanitizes custom CSS to keep your help center safe. Stripped patterns:

• expression() (legacy IE injection vector).
• behavior: (legacy IE).
• javascript: URLs in url() or content.
• @import (load external stylesheets through the structured font field instead).

If you paste a stylesheet that includes those, Ochre saves the cleaned version and shows you what was removed. Most modern CSS is unaffected.

What works

Custom properties, transitions, transforms, grid, flex, container queries, media queries, pseudo-elements, vendor-prefixed properties, and @font-face for self-hosted fonts.

Tips

• Scope your selectors. .help-center-article h2 is safer than h2.
• Do not override the four color tokens with hard-coded values. Use the CSS variables Ochre exposes so dark mode and theme switching keep working.
• Test on mobile. The default is mobile-first; aggressive layout overrides break on small screens.

Logo and favicon

Set on Workspace settings → Branding (separate from the theme panel). The logo shows in the header. The favicon is the browser tab icon. See Branding.

Dark mode

The help center auto-switches based on the visitor's prefers-color-scheme. Ochre derives a dark version of your theme automatically from the four color tokens. If the auto-derived dark mode looks wrong, override the dark color tokens directly in the Colors panel.

Mobile

Everything in the theme panel is responsive by default. Hero shrinks, sidebar becomes a drawer, search collapses to a button. You can preview mobile from the live preview pane.

Resetting

If you have made a mess, click Reset to defaults. The custom CSS slot is preserved separately, so you can reset the structured settings without losing custom CSS.

Scope

Theme is workspace-wide. There is no per-article theme override. If you need different brands for different audiences, that is a separate help center. Talk to us about multi-help-center setups.

Related

• Help center custom domain for serving from help.yourdomain.com.
• Branding for logo, favicon, and product-wide identity.
• Help center sitemap for SEO discoverability.