Colors

Most of the colors used by Zirconium comes from the elementary OS color palette. This is to reduce time in formulating and testing colors that work for aesthetics, usability, and accessibility. The following diagrams will show the colors used throughout Zirconium.

Main colors

Bubblegum as primary

Zirconium uses a shade of pink called Bubblegum for most of its primary controls. The hue of this color comes from the elementary OS color palette, while the saturation and lightness were customized to fit Antares Programming's needs. Use Bubblegum for most commonly used actions, like links or buttons. Use the class primary to override elements and components with this color.

Bubblegum 900

--bubblegum-900

Bubblegum 700

--bubblegum-700

Bubblegum 500

--bubblegum-500

Bubblegum 300

--bubblegum-300

Bubblegum 100

--bubblegum-100

Blueberry as accent

Zirconium uses a shade of blue called Blueberry for most of its primary controls. The hue of this color comes from the elementary OS color palette, while the saturation and lightness were customized to fit Antares Programming's needs. Use Blueberry only for actions that need the user's utmost attention without it bringing a sense of warning or error. Use it sparingly. Use the class accent to override elements and components with this color.

Blueberry 900

--blueberry-900

Blueberry 700

--blueberry-700

Blueberry 500

--blueberry-500

Blueberry 300

--blueberry-300

Blueberry 100

--blueberry-100

Content colors

Zirconium uses the patterns set by Hudl Uniform guidelines for content colors. We use a scale of contrast, default, subtle, and non-essential text colors.

Contrast: fully opaque, it differs the most from its background. Use it for more important or dominant elements. Use the class contrast-text to override elements with this color.

This is a text that uses contrast text color. This is a text that uses contrast text color.

Default: this is the starting point for content colors. If you’re not sure which to use, default is the answer. Use the class default-text to override elements with this color.

This is a text that uses contrast text color. This is a text that uses contrast text color.

Subtle: use this for supporting elements. Use the class subtle-text to override elements with this color.

This is a text that uses contrast text color. This is a text that uses contrast text color.

Non-essential: provides the least contrast of our content colors and does not pass accessibility standards. Use it only for additional supportive elements. Nonessential should never be used for important information. Use the class non-essential-text to override elements with this color.

This is a text that uses contrast text color. This is a text that uses contrast text color.

Background Colors

Zirconium also follows the Hudl Uniform guidelines for background colors. We use a system of level 0 to level 3 colors. This is also true for dark mode

Level 0 background

.level-0-bg

Level 1 background

.level-1-bg

Level 2 background

.level-2-bg

Level 3 background

.level-3-bg

Level 0 background

.level-0-bg

Level 1 background

.level-1-bg

Level 2 background

.level-2-bg

Level 3 background

.level-3-bg

Dark mode

One of the goals of Zirconium is to support dark mode by default. This is achieved by providing custom styling using the prefers-color-scheme: dark media query.

Although Zirconium does not make dark or light theme available on demand (perhaps via a switch control that some websites use), Zirconium responds to your device's system setting on whether to use dark mode or not.