Color Palette

Every color in Meteor starts here. The palette is the raw material that Tokens draw from to apply usage and meaning in components and layouts.

Naming convention

Each palette color is identified by its hue name and a numeric shade. The number represents luminosity on a scale from 50 (lightest) to 950 (darkest). For example, color-blue-500 is the mid-range blue, while color-blue-50 is a near-white tint and color-blue-950 is near-black.

This naming convention makes the scale predictable: a higher number is always darker, a lower number is always lighter, regardless of hue.

How to use

Palette values have no semantic meaning on their own. They are the toolbox designers use to define semantic tokens and build themes. Tokens carry intent (such as "primary action" or "destructive state") and adapt correctly across different themes. Reaching for a raw palette value skips that layer of meaning and breaks theming.