How to design an on-brand help center
Make your knowledge base look and feel like your product.
You click the “Help” link inside an app you like, and suddenly you’re somewhere that looks like a different company built it. Different fonts, a stock-photo header, a logo two versions out of date. The answers might be fine, but that whiff of neglect makes you trust them a little less anyway.
Good help center design is what stops that happening to your customers. It’s the practice of making your knowledge base look and feel like a natural part of your product while keeping it genuinely easy to use. It usually comes near the end of the knowledge base build process, once you have a structure and a few articles worth showing off. The trick is holding two goals at once: on-brand enough to feel trustworthy, and plain enough that nobody struggles to find an answer.
That balance matters. Harvard Business Review found that 81% of customers try to handle an issue themselves before they ever contact a person (Harvard Business Review). They’re already showing up at your help center. Your design decides whether they stay and solve the problem, or bounce back into your inbox.
What does good help center design mean?
It’s two jobs wearing one coat. The first is brand: the logo, colors, typography, and domain that tell a customer they’re still in safe hands, not off on some random third-party site. The second is usability: search, navigation, and layout that get people to an answer fast. When those two pull against each other, usability wins every time.
How do you brand a knowledge base?
Start with the elements that do the most work. Your logo goes top-left where people expect it, linked back to your main site or app. Your brand colors carry through headers, links, and buttons, but resist the urge to paint everything: readers need calm, high-contrast text far more than a wall of brand pink.
Typography is the quiet hero. Match your product’s typeface if you can, keep body text around 16 to 18 pixels, and give lines room to breathe. Then set a custom domain, something like help.yourcompany.com, so the URL itself reassures people they never left your world. Most platforms let you set up and customize your help center without touching code. Here’s a quick map of what to change and why each piece earns its place.
| Brand element | What to set | Why it matters |
|---|---|---|
| Logo | Top-left, linked home | Instant recognition and a way back to your product |
| Colors | Headers, links, buttons | Signals “this is us” without hurting readability |
| Typography | Product typeface, 16 to 18px body | Trust plus comfortable long-form reading |
| Custom domain | help.yourcompany.com | Keeps customers on a URL they recognize |
| Favicon and social card | Your icon and share image | Polish in browser tabs and shared links |
How should you design the homepage and layout?
Your help center homepage is a signpost, not a landing page. The moment someone arrives, they should see a big search bar and a clear set of categories, with nothing else competing for attention. Skip the hero video and the marketing copy: people came here with a question, so answer “where do I go?” immediately.
Lead with your categories as the visual front door, each with a plain-language label and maybe an icon. Good knowledge base categories do most of the navigational heavy lifting, so give them room. On article pages, a consistent shape (title, short intro, steps, related links) means readers always know where they are.
Where should search and navigation live?
Front and center, every time. Search is how most people prefer to find things, so put the bar high on the page, make it wide, and keep it visible as they scroll. Autocomplete helps, because customers see answers forming before they finish typing. Navigation is your safety net for the browsers: a persistent header with your logo, a search field, and a link back to the categories should follow readers everywhere, and breadcrumbs let them climb back a level.
How do you keep it consistent with your product?
Consistency turns “some articles on a website” into a help center people trust. That means visual consistency with your product (same fonts, same button style, same tone) and internal consistency across articles, so the look feels like the same team made both your app and its docs.
The words matter as much as the pixels. A documentation style guide keeps everyone writing “sign in” instead of a mix of “log in” and “sign on,” formatting steps the same way, and hitting the same friendly register. It’s what makes a library written by many hands read like one confident voice. There’s a payoff, too: Lucidpress reported that consistent brand presentation can lift revenue by up to 33% (PR Newswire). Your help center is a brand touchpoint like any other.
Don’t let polish get in the way of finding answers
This is where well-meaning teams trip. Slow custom fonts, low-contrast gray-on-gray text, tiny tap targets, and clever animations all look great in a mockup and quietly hurt real people trying to solve a problem.
Design for accessibility from the start. Keep text contrast strong (aim for a 4.5:1 ratio on body copy), make sure everything works with a keyboard, and write descriptive alt text for screenshots. Test on a phone early and often, since a large share of help center traffic is mobile and a two-column desktop layout can collapse on a small screen. If a design choice makes an answer harder to reach, it isn’t polish, it’s a bug.
Get this right and your knowledge base stops feeling like an afterthought bolted onto your product. It becomes a place customers actually want to help themselves, which is the entire point.
