Foundations
Colors
Eight core colors and two gradients — the rules for where each one belongs, how they pair with type, and how to keep every combination legible.
Core colors
Eight colors, each with a job.
Our palette is eight colors, split into primary and secondary roles. Primary colors carry layouts, type, and backgrounds. Secondary colors support them, mostly through illustration. If you're reaching outside this palette, stop and ask why. Click any swatch to copy its hex.
Primary
Used across layouts, type, and backgrounds.
Secondary
Used in visual elements like illustrations.
Colors in type
Contrast is the whole job.
Type on color only works when contrast does its job. White text sits on our dark colors, black text on our light ones. These are the approved pairings — don't invent new ones for aesthetic reasons.
White text on
Obsidian.
Black text on
Snow.
White text on
Voltage.
White text on
Iris.
Black text on
Glacier.
Black text on
Dune.
Black text on
Bone.
Black text on
Mist.
Business & Platform
Restrained, precise, credible.
The Business and Platform palette is restrained. Obsidian, Mist, and Snow do most of the work, with Voltage reserved for emphasis. Calm, precise, credible.
Sample usage
Consumer
Brighter, and a little more expressive.
The consumer palette is brighter and more expressive. Voltage leads and gradients are welcome. It should still feel like Xe: confident, not loud.
Sample usage
Gradients
An accent, never the main event.
Gradients add depth and movement, but they're an accent, never the main element of a design. Follow the color order set here. Any modification needs approval from the brand design team. Click a gradient to copy it.
Gradients usage
What it looks like in practice.
Gradients use our core colors in a set order. Here's what that looks like in practice, and what to avoid.
Accessibility
Legible for everyone, by default.
We design to WCAG 2.1 AA as a minimum: body text needs a contrast ratio of at least 4.5:1, large text at least 3:1. Every approved pairing below clears AA for body text — except white on Iris, which only holds up at large or bold sizes.
White on Obsidian
Black on Snow
White on Voltage
White on Iris
Black on Glacier
Black on Dune
Black on Bone
Black on Mist