Customize your status page colors
Your status page is often one of the first places users check to see how your services are doing, so its appearance matters. StatusGator gives you control over colors, header style, and layout so your page reflects your brand while staying readable and accessible.
Understanding Primary & Secondary colors
- Primary color — This is your main brand color. It’s used for interactive elements like buttons, checkboxes, radio buttons, and layout switchers. If you use the Bold header style, the Primary color also becomes the header background.
- Secondary color — Used to complement the Primary color. In the Original header style, it's used for text on buttons and other labels. In the Bold style, it becomes the contrasting text color when the header background is painted in the Primary color.
Header style options
- Original header style — Clean and minimal. Primary and Secondary colors are used more subtly. The header stays light and unobtrusive.
- Bold header style — More prominent. The header background uses the Primary color, and text or labels use the Secondary color to ensure contrast. Buttons and other interactive elements also use the Primary color.
How to customize colors & header style
- Go to Status Page → Design tab.
- Under Advanced settings, locate the color editorsfor:
- Primary color (light theme)
- Secondary color (light theme)
- Primary color (dark theme)
- Secondary color (dark theme)
- Pick your preferred color values (you can enter hex codes or use the color picker).
- Choose between Original or Bold header styles.
- After making your changes, click Save to apply them.
Resetting to defaults
If you want to revert any of your color customizations back to the original StatusGator palette, use the Reset colors to default link.
Tips for good design & readability
- Test color contrast in both light and dark themes to ensure text and UI elements are readable.
- Avoid using too many bright or highly saturated colors for text — secondary colors should help with contrast.
- Keep consistency with your existing brand colors for buttons, logos, etc., so everything feels unified.