Customizing your status page colors

Customizing your status page colors

Your status page is often the first place users visit to check the health of your services, so its design should reflect your brand while remaining clear and user-friendly. StatusGator’s customization options allow you to tailor the appearance of your page to your preferences, including header styles and color schemes for both light and dark themes.

Understanding Primary and Secondary colors

StatusGator allows you to define both Primary and Secondary colors for light and dark themes, ensuring a cohesive look regardless of the user's device settings.

• Primary Color:
  This is the main color of your brand and is used for interactive elements such as buttons, checkboxes, radio buttons, and layout switchers. If the Bold header style is selected, it is also used as the background color for the header, enhancing your brand visibility

• Secondary Color:
  The Secondary color complements the Primary color by providing contrast. It is used for text on buttons and labels in the Original style or as the text color for the Bold header background. This ensures a harmonious design that is accessible and easy to read.
  
  

Note: If you wish to revert any changes, you can reset the colors to the default StatusGator palette.

Header styles: Original vs. Bold

One of the key visual decisions for your status page is choosing between the Original or Bold header style, as this choice influences how your selected colors are applied throughout the page.

• Original header style:
  The header uses a minimal design, and the Primary color is applied to key UI elements like buttons, checkboxes, radio buttons, and the layout switcher. The focus is on a clean and uncluttered look, with text and labels in contrasting Secondary colors.

• Bold header style:
  The header features a striking background in the Primary color, making it a prominent part of your status page. Key UI elements like buttons and layout switchers also use the Primary color, while the Secondary color serves as a contrasting text color for buttons and labels, ensuring legibility and vibrancy.

Status page examples with custom color options

Regular header style

Bold header style