Guide Components Icons Utilities Layouts
Colors Utilities

Colors

Beyond the semantic design tokens (brand, tip, warning, danger — themed, and different in light/dark), VoxBlocks ships an extended color palette: seven hues, each a fixed 100–900 tint/shade scale. Reach for these when a component needs a specific hue rather than a themed role — data viz series, tags, status chips, illustrations.

Unlike the semantic tokens, palette swatches are not theme-adaptive: --vox-palette-teal-500 is the same color in light and dark mode, the same way a can of paint doesn’t change color when the lights dim.

Palette

Lower numbers are lighter tints, higher numbers are darker shades. 500 is each hue’s base tone.

Gray

gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900

Teal

teal-100
teal-200
teal-300
teal-400
teal-500
teal-600
teal-700
teal-800
teal-900

Blue

blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900

Green

green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900

Gold

gold-100
gold-200
gold-300
gold-400
gold-500
gold-600
gold-700
gold-800
gold-900

Red

red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900

Purple

purple-100
purple-200
purple-300
purple-400
purple-500
purple-600
purple-700
purple-800
purple-900

Tokens

Every swatch is a --vox-palette-{hue}-{step} custom property, defined once in src/tokens/palette.css (:root only — no dark-mode override):

--vox-palette-teal-500: #41d2c9;

Utility classes

vox-color-{hue}-{step} sets text color, vox-bg-{hue}-{step} sets background:

<span class="vox-bg-teal-100 vox-color-teal-900">New</span>
<span class="vox-bg-purple-600" style="color: white;">Beta</span>

Pairing for contrast

Palette steps aren’t paired with dark/light text automatically the way the semantic -soft tokens are — pick the pairing yourself:

  • Soft badge: a 100 background with 900 text of the same hue. Every hue passes WCAG AA (≥4.5:1) at that pairing.
  • Solid fill: a 600–900 background with white text (--vox-color-text-inverse).

Don’t mix hues in one pairing (e.g. blue-100 background with red-900 text) — contrast wasn’t verified across hues, only within each hue’s own scale.

When to use semantic vs. palette tokens

  • Semantic (--vox-color-brand-*, -tip-*, -warning-*, -danger-*): anything that carries meaning — buttons, alerts, form validation. These adapt to dark mode and to a site’s rebrand via token overrides.
  • Palette (--vox-palette-*): anything that just needs to look like a color — a chart series, a category tag, a decorative accent. These don’t change with theme, which is what you want for a legend where “blue” must stay recognizably blue.

The Dashboard layout uses this exact soft-badge pairing for module category tags — one hue per category, unrelated to any component’s semantic state.