---
title: Widget CSS variables
description: Additional CSS variables for styling dashboard widgets.
dashboard: true
---

## Palette Colors

- `--env-dashboard-color-black`
- `--env-dashboard-color-white`
- `--env-dashboard-color-red-05`
- `--env-dashboard-color-red-20`
- `--env-dashboard-color-red-50`
- `--env-dashboard-color-red-90`
- `--env-dashboard-color-pink-05`
- `--env-dashboard-color-pink-20`
- `--env-dashboard-color-pink-50`
- `--env-dashboard-color-pink-90`
- `--env-dashboard-color-purple-05`
- `--env-dashboard-color-purple-20`
- `--env-dashboard-color-purple-50`
- `--env-dashboard-color-purple-90`
- `--env-dashboard-color-deep-purple-05`
- `--env-dashboard-color-deep-purple-20`
- `--env-dashboard-color-deep-purple-50`
- `--env-dashboard-color-deep-purple-90`
- `--env-dashboard-color-indigo-05`
- `--env-dashboard-color-indigo-20`
- `--env-dashboard-color-indigo-50`
- `--env-dashboard-color-indigo-90`
- `--env-dashboard-color-blue-05`
- `--env-dashboard-color-blue-20`
- `--env-dashboard-color-blue-50`
- `--env-dashboard-color-blue-90`
- `--env-dashboard-color-light-blue-05`
- `--env-dashboard-color-light-blue-20`
- `--env-dashboard-color-light-blue-50`
- `--env-dashboard-color-light-blue-90`
- `--env-dashboard-color-cyan-05`
- `--env-dashboard-color-cyan-20`
- `--env-dashboard-color-cyan-50`
- `--env-dashboard-color-cyan-90`
- `--env-dashboard-color-teal-05`
- `--env-dashboard-color-teal-20`
- `--env-dashboard-color-teal-50`
- `--env-dashboard-color-teal-90`
- `--env-dashboard-color-green-05`
- `--env-dashboard-color-green-20`
- `--env-dashboard-color-green-50`
- `--env-dashboard-color-green-90`
- `--env-dashboard-color-light-green-05`
- `--env-dashboard-color-light-green-20`
- `--env-dashboard-color-light-green-50`
- `--env-dashboard-color-light-green-90`
- `--env-dashboard-color-lime-05`
- `--env-dashboard-color-lime-20`
- `--env-dashboard-color-lime-50`
- `--env-dashboard-color-lime-90`
- `--env-dashboard-color-yellow-05`
- `--env-dashboard-color-yellow-20`
- `--env-dashboard-color-yellow-50`
- `--env-dashboard-color-yellow-90`
- `--env-dashboard-color-orange-05`
- `--env-dashboard-color-orange-20`
- `--env-dashboard-color-orange-50`
- `--env-dashboard-color-orange-90`
- `--env-dashboard-color-brown-05`
- `--env-dashboard-color-brown-20`
- `--env-dashboard-color-brown-50`
- `--env-dashboard-color-brown-90`
- `--env-dashboard-color-gray-05`
- `--env-dashboard-color-gray-20`
- `--env-dashboard-color-gray-50`
- `--env-dashboard-color-gray-90`

### Additional UI Text variables

- `--env-ui-text-label-font-family`
- `--env-ui-text-label-font-color`
- `--env-ui-text-label-font-size`
- `--env-ui-text-label-font-weight`
- `--env-ui-text-label-text-transform`
- `--env-ui-text-label-letter-spacing`
- `--env-ui-text-value-font-family`
- `--env-ui-text-value-font-color`
- `--env-ui-text-value-font-size`
- `--env-ui-text-value-font-weight`
- `--env-ui-text-value-text-transform`
- `--env-ui-text-value-letter-spacing`
- `--env-ui-text-kpi-number-font-family`
- `--env-ui-text-kpi-number-font-color`
- `--env-ui-text-kpi-number-font-size`
- `--env-ui-text-kpi-number-font-weight`
- `--env-ui-text-kpi-number-text-transform`
- `--env-ui-text-kpi-number-letter-spacing`
- `--env-ui-text-kpi-number-font-size-x-small`
- `--env-ui-text-kpi-number-font-size-small`
- `--env-ui-text-kpi-number-font-size-medium`
- `--env-ui-text-kpi-number-font-size-large`
- `--env-ui-text-kpi-number-font-size-x-large`