You can easily customize the colors and fonts to match your company’s style. This guide walks you through how to update your fonts, set brand colors, create gradient backgrounds, and more all from your Notiondesk dashboard.
Customizing fonts
Choose your primary font (titles and headers)
You can change the font used for titles, headers, and other main elements of your help center.
To update your primary font:
- Open your Notiondesk dashboard.
- Go to the Customization section.
- Under the Branding settings, find Primary Font.
- Choose a font from the available list. Options include Inter, Lora, Montserrat, Noto, Roboto, and others.
Once selected, the new font will automatically apply to your help center titles and headers.
Choose your secondary font (body text)
You can also set a different font for the body text of your help center articles.
To update your secondary font:
- In your Notiondesk dashboard, go to the Customization section.
- Under Branding, find Secondary Font.
- Select a font from the available list, like Inter, Lora, Montserrat, Noto, Roboto, and more.
The chosen font will apply to all article body text across your help center.
A good secondary font makes your articles easy to read, you can mix fonts for a distinct style or use the same font for both primary and secondary to keep things consistent.
Customizing colors
Update Branding Colors
You can easily update the main colors of your help center to match your brand.
To change your branding colors:
- Open your Notiondesk dashboard.
- Go to the Customization section.
- Under the Branding tab, you can update the following colors:
| Color | Description |
|---|---|
| Primary Color | Used for navigation elements like buttons and active links. |
| Text Color | Used for the main body text across your help center. |
| Link Color | Used for standard hyperlinks. |
| Link Hover Color | Changes the link color when a user hovers over it. |
| Background Color | Sets the background color of your entire help center. |
Each time you pick a new color, the change will instantly reflect on your live site.
Customize header colors
The header section of your help center includes navigational links that visitors see first. You can update the link colors to match your brand or improve visibility.
To change header link colors:
- Go to the Customization section in your Notiondesk dashboard.
- Open the Header tab.
- Update the following options:
| Color | Description |
|---|---|
| Link Color | Sets the default color for links in the header. |
| Link Hover Color | Sets the color for links when users hover over them. |
Customize Hero Block Background
The Hero Block is the top section of your help center, often the first thing visitors see. You can personalize it with a background color or a gradient to better reflect your brand.
Use a simple background color
If you prefer a clean, solid background instead of an image:
- Go to the Customization section in your dashboard.
- Open the Hero Block tab.
- Choose Background: Color.
- Select a background color from the picker or paste your brand hex code.
Your selected color will fill the entire Hero Block background.
Use a gradient background
Gradients let you blend multiple colors into a smooth transition, a great way to add depth to your header without using images.
To set up a gradient:
- In the Hero Block tab, set Background to Gradient.
- Choose a Gradient Type:
- Linear: colors flow in a straight direction.
- Radial: colors radiate outward from the center.
- For Linear gradients, adjust the Rotation (angle) to control the direction of the blend.
- Add your gradient colors. You can set up to 5 colors, each with its own percentage and color code.
Gradients are highly customizable. You can create subtle transitions with two colors or go bold with a multi-color blend. Just be sure your text stays readable on top.
Customize Card and Footer Colors
You can also personalize the colors used in Collection cards, Article cards, and your Help Center’s footer to keep everything on-brand and visually cohesive.
Collections and Articles Cards
Each Collection or Article is shown inside a card on your help center. You can change the background color of these cards to match your style or differentiate between sections.
To update card colors:
- Go to the Customization section in your Notiondesk dashboard.
- Open the Collections or Articles tab.
- Select the background color
Choose solid colors that ensure the text inside the cards remains readable.
Footer Colors
Your footer is the section at the bottom of every help center page. It usually contains links or contact info, so clarity is key.
To update footer colors:
- Go to the Customization section.
- Open the Footer tab.
- Set the Footer Background Color and Footer Text Color.
This helps ensure your footer looks good and stays accessible against your chosen background.
Best Practices for styling your help center
Customizing fonts and colors helps make your help center feel like part of your brand, but keeping it readable and consistent is just as important. Here are a few tips to get the best results:
- Stick to your brand colors
Use the same colors you use on your website and product. This keeps things familiar for your users.
- Use readable fonts
Avoid overly decorative fonts, especially for body text. Stick with clear, legible choices that are easy to scan.
- Keep good contrast
Make sure there’s enough contrast between your text and background. For example, avoid light grey text on a white background.
- Be careful with gradients
Gradients can add visual interest, but too many colors or harsh transitions can make your content hard to read. Stick with two or three colors for best results.
- Preview on desktop and mobile
Check your design on different screen sizes to make sure everything looks clean and professional.