Primitive Scales
cyan
| Token | Value | Utility | |
|---|---|---|---|
| color.cyan.50 | --color-cyan-50 | bg-cyan-50 / text-cyan-50 | |
| color.cyan.100 | --color-cyan-100 | bg-cyan-100 / text-cyan-100 | |
| color.cyan.200 | --color-cyan-200 | bg-cyan-200 / text-cyan-200 | |
| color.cyan.300 | --color-cyan-300 | bg-cyan-300 / text-cyan-300 | |
| color.cyan.400 | --color-cyan-400 | bg-cyan-400 / text-cyan-400 | |
| color.cyan.500 | --color-cyan-500 | bg-cyan-500 / text-cyan-500 | |
| color.cyan.600 | --color-cyan-600 | bg-cyan-600 / text-cyan-600 | |
| color.cyan.700 | --color-cyan-700 | bg-cyan-700 / text-cyan-700 | |
| color.cyan.800 | --color-cyan-800 | bg-cyan-800 / text-cyan-800 | |
| color.cyan.900 | --color-cyan-900 | bg-cyan-900 / text-cyan-900 | |
| color.cyan.950 | --color-cyan-950 | bg-cyan-950 / text-cyan-950 |
red
| Token | Value | Utility | |
|---|---|---|---|
| color.red.50 | --color-red-50 | bg-red-50 / text-red-50 | |
| color.red.100 | --color-red-100 | bg-red-100 / text-red-100 | |
| color.red.200 | --color-red-200 | bg-red-200 / text-red-200 | |
| color.red.300 | --color-red-300 | bg-red-300 / text-red-300 | |
| color.red.400 | --color-red-400 | bg-red-400 / text-red-400 | |
| color.red.500 | --color-red-500 | bg-red-500 / text-red-500 | |
| color.red.600 | --color-red-600 | bg-red-600 / text-red-600 | |
| color.red.700 | --color-red-700 | bg-red-700 / text-red-700 | |
| color.red.800 | --color-red-800 | bg-red-800 / text-red-800 | |
| color.red.900 | --color-red-900 | bg-red-900 / text-red-900 | |
| color.red.950 | --color-red-950 | bg-red-950 / text-red-950 |
orange
| Token | Value | Utility | |
|---|---|---|---|
| color.orange.50 | --color-orange-50 | bg-orange-50 / text-orange-50 | |
| color.orange.100 | --color-orange-100 | bg-orange-100 / text-orange-100 | |
| color.orange.200 | --color-orange-200 | bg-orange-200 / text-orange-200 | |
| color.orange.300 | --color-orange-300 | bg-orange-300 / text-orange-300 | |
| color.orange.400 | --color-orange-400 | bg-orange-400 / text-orange-400 | |
| color.orange.500 | --color-orange-500 | bg-orange-500 / text-orange-500 | |
| color.orange.600 | --color-orange-600 | bg-orange-600 / text-orange-600 | |
| color.orange.700 | --color-orange-700 | bg-orange-700 / text-orange-700 | |
| color.orange.800 | --color-orange-800 | bg-orange-800 / text-orange-800 | |
| color.orange.900 | --color-orange-900 | bg-orange-900 / text-orange-900 | |
| color.orange.950 | --color-orange-950 | bg-orange-950 / text-orange-950 |
yellow
| Token | Value | Utility | |
|---|---|---|---|
| color.yellow.50 | --color-yellow-50 | bg-yellow-50 / text-yellow-50 | |
| color.yellow.100 | --color-yellow-100 | bg-yellow-100 / text-yellow-100 | |
| color.yellow.200 | --color-yellow-200 | bg-yellow-200 / text-yellow-200 | |
| color.yellow.300 | --color-yellow-300 | bg-yellow-300 / text-yellow-300 | |
| color.yellow.400 | --color-yellow-400 | bg-yellow-400 / text-yellow-400 | |
| color.yellow.500 | --color-yellow-500 | bg-yellow-500 / text-yellow-500 | |
| color.yellow.600 | --color-yellow-600 | bg-yellow-600 / text-yellow-600 | |
| color.yellow.700 | --color-yellow-700 | bg-yellow-700 / text-yellow-700 | |
| color.yellow.800 | --color-yellow-800 | bg-yellow-800 / text-yellow-800 | |
| color.yellow.900 | --color-yellow-900 | bg-yellow-900 / text-yellow-900 | |
| color.yellow.950 | --color-yellow-950 | bg-yellow-950 / text-yellow-950 |
green
| Token | Value | Utility | |
|---|---|---|---|
| color.green.50 | --color-green-50 | bg-green-50 / text-green-50 | |
| color.green.100 | --color-green-100 | bg-green-100 / text-green-100 | |
| color.green.200 | --color-green-200 | bg-green-200 / text-green-200 | |
| color.green.300 | --color-green-300 | bg-green-300 / text-green-300 | |
| color.green.400 | --color-green-400 | bg-green-400 / text-green-400 | |
| color.green.500 | --color-green-500 | bg-green-500 / text-green-500 | |
| color.green.600 | --color-green-600 | bg-green-600 / text-green-600 | |
| color.green.700 | --color-green-700 | bg-green-700 / text-green-700 | |
| color.green.800 | --color-green-800 | bg-green-800 / text-green-800 | |
| color.green.900 | --color-green-900 | bg-green-900 / text-green-900 | |
| color.green.950 | --color-green-950 | bg-green-950 / text-green-950 |