Design

​

Live preview

The Design tab (/dashboard/help-center/design) shows a live preview of your public help center as you change settings. Anything you tweak updates the preview in real time before you save.

​

What you can customize

The design system covers:

​

Themes & colors

Pick primary, body, and action colors. The primary color drives buttons, links, and highlights. The body color is the page background. The action color is used for emphasis on the home page hero. Halo’s design system uses CSS variables, so a custom theme cascades cleanly through every component.

​

Hero section

The hero is the big section at the top of the home page. Configure:

• Style: gradient or solid
• Colors: gradient stops or solid color
• Image: optional background image
• Height: short, medium, tall
• Welcome message: heading and subhead

A search bar sits on top of the hero by default. Customize its size and alignment.

​

Layout

For collection cards on the home page:

• Columns: 1, 2, 3, or 4
• Card style: minimal, bordered, elevated
• Show author: display article authors
• Show description: display article descriptions

For homepage sections, you can add custom sections beyond the default collection grid — useful for highlighting a particular collection or linking out to popular articles.

​

Header and footer

Header:

• Title (defaults to your help center name)
• Navigation links (e.g. “Back to App”, “Contact”, “Status”)

Footer:

• Pre-built templates or custom
• Links (legal, social, custom)
• Social icons
• “Powered by Halo” toggle

​

Article page

Each article page has these toggles:

• Table of contents in the sidebar
• Related articles at the bottom
• Reactions (thumbs up/down)
• Prev/next navigation

Configure defaults at the help-center level (Design tab) or override per article.

​

Embedded chat widget

The chat widget on your help center is the same Halo widget that runs on your app. Configure:

• Position (bottom-right or bottom-left)
• Greeting message
• Color (often matches your primary)
• Agent — pick a specific agent or use the org default

The widget uses an agent_channels row with deployment_key: "help_center:{helpCenterId}". See Help Center Channel on the agents side.

​

Code block themes

Pick from many syntax highlighting themes:

• One Dark, Dracula, Nord
• GitHub Light, GitHub Dark
• Monokai, Solarized Dark, Solarized Light
• Tokyo Night, Atom One Dark
• And many more

The theme applies to all code blocks across your help center. Pick something that matches your brand and dark/light mode setup.

​

Custom CSS

For anything the visual controls don’t cover, use Custom CSS. The CSS is injected into your help center pages and can target any element. Common uses:

• Adjust spacing
• Change typography
• Add custom hover effects
• Style specific collections or articles by class

Custom CSS is sandboxed to your help center — it won’t affect the dashboard or the chat widget.

​

Where to go next