Figma Design Tokens to Tailwind Classes
This table presents the mapping between Figma design tokens and Tailwind utility classes in the Nova design system.
Color Tokens
| Type | Figma Token | Tailwind Class | Value | Code | Preview |
|---|---|---|---|---|---|
| background | --color-dont-use-background | .bg-dont-use | var(--color-gray-ocean-900) | #0b0f11 | |
| background | --color-feedback-error-high-background | .bg-feedback-error-high | var(--color-status-red-300) | #ff6161 | |
| background | --color-feedback-error-low-background | .bg-feedback-error-low | var(--color-status-red-900) | #380101 | |
| background | --color-feedback-information-high-background | .bg-feedback-information-high | var(--color-status-blue-300) | #659fff | |
| background | --color-feedback-information-low-background | .bg-feedback-information-low | var(--color-status-blue-900) | #001c37 | |
| background | --color-feedback-neutral-high-background | .bg-feedback-neutral-high | var(--color-gray-ocean-250) | #9fadb2 | |
| background | --color-feedback-neutral-low-background | .bg-feedback-neutral-low | var(--color-gray-ocean-800) | #171f22 | |
| background | --color-feedback-success-high-background | .bg-feedback-success-high | var(--color-status-green-400) | #45d24d | |
| background | --color-feedback-success-low-background | .bg-feedback-success-low | var(--color-status-green-900) | #002302 | |
| background | --color-feedback-warning-high-background | .bg-feedback-warning-high | var(--color-status-yellow-500) | #e0a917 | |
| background | --color-feedback-warning-low-background | .bg-feedback-warning-low | var(--color-status-yellow-900) | #302300 | |
| background | --color-focus-background | .bg-focus | var(--color-level-00-background) | #0b0f11 | |
| background | --color-focus-background-inverted | .bg-focus-inverted | var(--color-level-inverted-00-background) | #0b0f11 | |
| background | --color-interaction-container-branded-high-background | .bg-interaction-container-branded-high | var(--color-petrol-600) | #1f717d | |
| background | --color-interaction-container-branded-high-background-active | .bg-interaction-container-branded-high-active | var(--color-petrol-700) | #185963 | |
| background | --color-interaction-container-branded-high-background-hover | .bg-interaction-container-branded-high-hover | var(--color-petrol-700) | #185963 | |
| background | --color-interaction-container-branded-low-background | .bg-interaction-container-branded-low | rgba(255, 255, 255, 0) | rgba(255, 255, 255, 0) | |
| background | --color-interaction-container-branded-low-background-active | .bg-interaction-container-branded-low-active | var(--color-petrol-900) | #0b292e | |
| background | --color-interaction-container-branded-low-background-hover | .bg-interaction-container-branded-low-hover | var(--color-petrol-900) | #0b292e | |
| background | --color-interaction-container-neutral-background | .bg-interaction-container-neutral | rgba(255, 255, 255, 0) | rgba(255, 255, 255, 0) | |
| background | --color-interaction-container-neutral-background-active | .bg-interaction-container-neutral-active | var(--color-petrol-900) | #0b292e | |
| background | --color-interaction-container-neutral-background-hover | .bg-interaction-container-neutral-hover | rgba(255, 255, 255, 0.1) | rgba(255, 255, 255, 0.1) | |
| background | --color-level-00-background | .bg-level-00 | var(--color-gray-ocean-900) | #0b0f11 | |
| background | --color-level-05-background | .bg-level-05 | var(--color-gray-ocean-850) | #11171a | |
| background | --color-level-10-background | .bg-level-10 | var(--color-gray-ocean-800) | #171f22 | |
| background | --color-level-15-background | .bg-level-15 | var(--color-gray-ocean-800) | #171f22 | |
| background | --color-level-20-background | .bg-level-20 | var(--color-gray-ocean-700) | #222e33 | |
| background | --color-level-30-background | .bg-level-30 | var(--color-gray-ocean-600) | #2e3e44 | |
| background | --color-level-40-background | .bg-level-40 | var(--color-gray-ocean-500) | #394d55 | |
| background | --color-level-inverted-00-background | .bg-level-inverted-00 | var(--color-gray-ocean-900) | #0b0f11 | |
| background | --color-level-inverted-05-background | .bg-level-inverted-05 | var(--color-gray-ocean-850) | #11171a | |
| background | --color-level-inverted-10-background | .bg-level-inverted-10 | var(--color-gray-ocean-800) | #171f22 | |
| background | --color-level-inverted-15-background | .bg-level-inverted-15 | var(--color-gray-ocean-750) | #1e272b | |
| background | --color-level-inverted-20-background | .bg-level-inverted-20 | var(--color-gray-ocean-700) | #222e33 | |
| background | --color-level-inverted-30-background | .bg-level-inverted-30 | var(--color-gray-ocean-600) | #2e3e44 | |
| background | --color-level-inverted-40-background | .bg-level-inverted-40 | var(--color-gray-ocean-500) | #394d55 | |
| background | --color-rainbow-1-background | .bg-rainbow-1 | var(--color-amber-900) | #432306 | |
| background | --color-rainbow-10-background | .bg-rainbow-10 | var(--color-gray-ocean-75) | #eaeef0 | |
| background | --color-rainbow-2-background | .bg-rainbow-2 | var(--color-orange-900) | #45190a | |
| background | --color-rainbow-3-background | .bg-rainbow-3 | var(--color-yellow-900) | #4d3a00 | |
| background | --color-rainbow-4-background | .bg-rainbow-4 | var(--color-red-800) | #610e0e | |
| background | --color-rainbow-5-background | .bg-rainbow-5 | var(--color-turquoise-900) | #1c2b28 | |
| background | --color-rainbow-6-background | .bg-rainbow-6 | var(--color-crimson-800) | #490019 | |
| background | --color-rainbow-7-background | .bg-rainbow-7 | var(--color-green-800) | #09400c | |
| background | --color-rainbow-8-background | .bg-rainbow-8 | var(--color-petrol-800) | #124148 | |
| background | --color-rainbow-9-background | .bg-rainbow-9 | var(--color-lime-900) | #2a330e | |
| border | --color-content-high-border | .border-high | var(--color-gray-ocean-300) | #889499 | |
| border | --color-content-low-border | .border-low | var(--color-gray-ocean-500) | #394d55 | |
| border | --color-content-medium-border | .border-medium | var(--color-gray-ocean-400) | #617177 | |
| border | --color-dont-use-border | .border-dont-use | var(--color-gray-ocean-750) | #1e272b | |
| border | --color-feedback-error-high-border | .border-feedback-error-high | var(--color-status-red-300) | #ff6161 | |
| border | --color-feedback-error-low-border | .border-feedback-error-low | var(--color-status-red-600) | #bb1919 | |
| border | --color-feedback-information-high-border | .border-feedback-information-high | var(--color-status-blue-300) | #659fff | |
| border | --color-feedback-information-low-border | .border-feedback-information-low | var(--color-status-blue-500) | #2660c2 | |
| border | --color-feedback-neutral-high-border | .border-feedback-neutral-high | var(--color-gray-ocean-250) | #9fadb2 | |
| border | --color-feedback-neutral-low-border | .border-feedback-neutral-low | var(--color-gray-ocean-450) | #3f555e | |
| border | --color-feedback-success-high-border | .border-feedback-success-high | var(--color-status-green-400) | #45d24d | |
| border | --color-feedback-success-low-border | .border-feedback-success-low | var(--color-status-green-600) | #008207 | |
| border | --color-feedback-warning-high-border | .border-feedback-warning-high | var(--color-status-yellow-500) | #e0a917 | |
| border | --color-feedback-warning-low-border | .border-feedback-warning-low | var(--color-status-yellow-700) | #805c00 | |
| border | --color-interaction-container-branded-high-border | .border-interaction-container-branded-high | var(--color-petrol-600) | #1f717d | |
| border | --color-interaction-container-branded-high-border-active | .border-interaction-container-branded-high-active | var(--color-petrol-700) | #185963 | |
| border | --color-interaction-container-branded-high-border-hover | .border-interaction-container-branded-high-hover | var(--color-petrol-700) | #185963 | |
| border | --color-interaction-container-branded-low-border | .border-interaction-container-branded-low | var(--color-petrol-600) | #1f717d | |
| border | --color-interaction-container-branded-low-border-active | .border-interaction-container-branded-low-active | var(--color-petrol-700) | #185963 | |
| border | --color-interaction-container-branded-low-border-hover | .border-interaction-container-branded-low-hover | var(--color-petrol-700) | #185963 | |
| border | --color-interaction-container-neutral-border | .border-interaction-container-neutral | var(--color-content-low-text) | #617177 | |
| border | --color-interaction-container-neutral-border-active | .border-interaction-container-neutral-active | var(--color-petrol-700) | #185963 | |
| border | --color-interaction-container-neutral-border-hover | .border-interaction-container-neutral-hover | var(--color-content-medium-text) | #34464d | |
| border | --color-rainbow-1-border | .border-rainbow-1 | var(--color-amber-700) | #9c5311 | |
| border | --color-rainbow-10-border | .border-rainbow-10 | var(--color-gray-ocean-500) | #394d55 | |
| border | --color-rainbow-2-border | .border-rainbow-2 | var(--color-orange-700) | #963715 | |
| border | --color-rainbow-3-border | .border-rainbow-3 | var(--color-yellow-800) | #795c00 | |
| border | --color-rainbow-4-border | .border-rainbow-4 | var(--color-red-500) | #cc1d1d | |
| border | --color-rainbow-5-border | .border-rainbow-5 | var(--color-turquoise-800) | #32504c | |
| border | --color-rainbow-6-border | .border-rainbow-6 | var(--color-crimson-400) | #ab2d58 | |
| border | --color-rainbow-7-border | .border-rainbow-7 | var(--color-green-600) | #106f15 | |
| border | --color-rainbow-8-border | .border-rainbow-8 | var(--color-petrol-600) | #1f717d | |
| border | --color-rainbow-9-border | .border-rainbow-9 | var(--color-lime-700) | #5c6e1f | |
| icon | --color-content-high-icon | .icon-high | var(--color-gray-ocean-800) | #171f22 | |
| icon | --color-content-inverted-high-icon | .icon-inverted-high | var(--color-gray-ocean-900) | #0b0f11 | |
| icon | --color-content-inverted-low-icon | .icon-inverted-low | var(--color-gray-ocean-450) | #3f555e | |
| icon | --color-content-inverted-medium-icon | .icon-inverted-medium | var(--color-gray-ocean-650) | #27353b | |
| icon | --color-content-low-icon | .icon-low | var(--color-gray-ocean-400) | #617177 | |
| icon | --color-content-medium-icon | .icon-medium | var(--color-gray-ocean-550) | #34464d | |
| icon | --color-feedback-error-high-icon | .icon-feedback-error-high | var(--color-status-red-900) | #380101 | |
| icon | --color-feedback-error-low-icon | .icon-feedback-error-low | var(--color-status-red-600) | #bb1919 | |
| icon | --color-feedback-information-high-icon | .icon-feedback-information-high | var(--color-status-blue-800) | #09285c | |
| icon | --color-feedback-information-low-icon | .icon-feedback-information-low | var(--color-status-blue-500) | #2660c2 | |
| icon | --color-feedback-neutral-high-icon | .icon-feedback-neutral-high | var(--color-gray-ocean-800) | #171f22 | |
| icon | --color-feedback-neutral-low-icon | .icon-feedback-neutral-low | var(--color-gray-ocean-450) | #3f555e | |
| icon | --color-feedback-success-high-icon | .icon-feedback-success-high | var(--color-status-green-800) | #003603 | |
| icon | --color-feedback-success-low-icon | .icon-feedback-success-low | var(--color-status-green-600) | #008207 | |
| icon | --color-feedback-warning-high-icon | .icon-feedback-warning-high | var(--color-status-yellow-900) | #302300 | |
| icon | --color-feedback-warning-low-icon | .icon-feedback-warning-low | var(--color-status-yellow-700) | #805c00 | |
| icon | --color-interaction-container-branded-high-icon | .icon-interaction-container-branded-high | var(--color-base-white) | #ffffff | |
| icon | --color-interaction-container-branded-high-icon-active | .icon-interaction-container-branded-high-active | var(--color-base-white) | #ffffff | |
| icon | --color-interaction-container-branded-high-icon-hover | .icon-interaction-container-branded-high-hover | var(--color-base-white) | #ffffff | |
| icon | --color-interaction-container-branded-low-icon | .icon-interaction-container-branded-low | var(--color-petrol-600) | #1f717d | |
| icon | --color-interaction-container-branded-low-icon-active | .icon-interaction-container-branded-low-active | var(--color-petrol-700) | #185963 | |
| icon | --color-interaction-container-branded-low-icon-hover | .icon-interaction-container-branded-low-hover | var(--color-petrol-700) | #185963 | |
| icon | --color-interaction-container-neutral-icon | .icon-interaction-container-neutral | var(--color-content-low-text) | #617177 | |
| icon | --color-interaction-container-neutral-icon-active | .icon-interaction-container-neutral-active | var(--color-petrol-700) | #185963 | |
| icon | --color-interaction-container-neutral-icon-hover | .icon-interaction-container-neutral-hover | var(--color-content-medium-text) | #34464d | |
| icon | --color-interaction-link-high-icon | .icon-interaction-link-high | var(--color-petrol-600) | #1f717d | |
| icon | --color-interaction-link-high-icon-hover | .icon-interaction-link-high-hover | var(--color-petrol-700) | #185963 | |
| icon | --color-interaction-link-high-icon-inactive | .icon-interaction-link-high-inactive | var(--color-content-low-icon) | #617177 | |
| icon | --color-interaction-link-high-icon-visited | .icon-interaction-link-high-visited | var(--color-petrol-700) | #185963 | |
| icon | --color-interaction-link-inverted-icon | .icon-interaction-link-inverted | var(--color-content-inverted-medium-icon) | #27353b | |
| icon | --color-interaction-link-inverted-icon-disabled | .icon-interaction-link-inverted-disabled | var(--color-content-inverted-low-icon) | #3f555e | |
| icon | --color-interaction-link-inverted-icon-hover | .icon-interaction-link-inverted-hover | var(--color-petrol-600) | #1f717d | |
| icon | --color-interaction-link-inverted-icon-visited | .icon-interaction-link-inverted-visited | var(--color-petrol-700) | #185963 | |
| icon | --color-interaction-link-low-icon | .icon-interaction-link-low | var(--color-content-high-text) | #171f22 | |
| icon | --color-interaction-link-low-icon-disabled | .icon-interaction-link-low-disabled | var(--color-content-low-icon) | #617177 | |
| icon | --color-interaction-link-low-icon-hover | .icon-interaction-link-low-hover | var(--color-petrol-700) | #185963 | |
| icon | --color-interaction-link-low-icon-visited | .icon-interaction-link-low-visited | var(--color-petrol-700) | #185963 | |
| icon | --color-rainbow-1-icon | .icon-rainbow-1 | var(--color-amber-700) | #9c5311 | |
| icon | --color-rainbow-10-icon | .icon-rainbow-10 | var(--color-gray-ocean-500) | #394d55 | |
| icon | --color-rainbow-2-icon | .icon-rainbow-2 | var(--color-orange-700) | #963715 | |
| icon | --color-rainbow-3-icon | .icon-rainbow-3 | var(--color-yellow-800) | #795c00 | |
| icon | --color-rainbow-4-icon | .icon-rainbow-4 | var(--color-red-500) | #cc1d1d | |
| icon | --color-rainbow-5-icon | .icon-rainbow-5 | var(--color-turquoise-800) | #32504c | |
| icon | --color-rainbow-6-icon | .icon-rainbow-6 | var(--color-crimson-400) | #ab2d58 | |
| icon | --color-rainbow-7-icon | .icon-rainbow-7 | var(--color-green-600) | #106f15 | |
| icon | --color-rainbow-8-icon | .icon-rainbow-8 | var(--color-petrol-600) | #1f717d | |
| icon | --color-rainbow-9-icon | .icon-rainbow-9 | var(--color-lime-700) | #5c6e1f | |
| text | --color-content-high-text | .text-high | var(--color-gray-ocean-800) | #171f22 | |
| text | --color-content-inverted-high-text | .text-inverted-high | var(--color-gray-ocean-900) | #0b0f11 | |
| text | --color-content-inverted-low-text | .text-inverted-low | var(--color-gray-ocean-450) | #3f555e | |
| text | --color-content-inverted-medium-text | .text-inverted-medium | var(--color-gray-ocean-650) | #27353b | |
| text | --color-content-low-text | .text-low | var(--color-gray-ocean-400) | #617177 | |
| text | --color-content-lower-text | .text-lower | var(--color-gray-ocean-400) | #617177 | |
| text | --color-content-medium-text | .text-medium | var(--color-gray-ocean-550) | #34464d | |
| text | --color-feedback-error-high-text | .text-feedback-error-high | var(--color-status-red-900) | #380101 | |
| text | --color-feedback-error-low-text | .text-feedback-error-low | var(--color-status-red-600) | #bb1919 | |
| text | --color-feedback-information-high-text | .text-feedback-information-high | var(--color-status-blue-800) | #09285c | |
| text | --color-feedback-information-low-text | .text-feedback-information-low | var(--color-status-blue-500) | #2660c2 | |
| text | --color-feedback-neutral-high-text | .text-feedback-neutral-high | var(--color-gray-ocean-800) | #171f22 | |
| text | --color-feedback-neutral-low-text | .text-feedback-neutral-low | var(--color-gray-ocean-450) | #3f555e | |
| text | --color-feedback-success-high-text | .text-feedback-success-high | var(--color-status-green-800) | #003603 | |
| text | --color-feedback-success-low-text | .text-feedback-success-low | var(--color-status-green-600) | #008207 | |
| text | --color-feedback-warning-high-text | .text-feedback-warning-high | var(--color-status-yellow-900) | #302300 | |
| text | --color-feedback-warning-low-text | .text-feedback-warning-low | var(--color-status-yellow-700) | #805c00 | |
| text | --color-interaction-container-branded-high-text | .text-interaction-container-branded-high | var(--color-base-white) | #ffffff | |
| text | --color-interaction-container-branded-high-text-active | .text-interaction-container-branded-high-active | var(--color-base-white) | #ffffff | |
| text | --color-interaction-container-branded-high-text-hover | .text-interaction-container-branded-high-hover | var(--color-base-white) | #ffffff | |
| text | --color-interaction-container-branded-low-text | .text-interaction-container-branded-low | var(--color-petrol-600) | #1f717d | |
| text | --color-interaction-container-branded-low-text-active | .text-interaction-container-branded-low-active | var(--color-petrol-700) | #185963 | |
| text | --color-interaction-container-branded-low-text-hover | .text-interaction-container-branded-low-hover | var(--color-petrol-700) | #185963 | |
| text | --color-interaction-container-neutral-text | .text-interaction-container-neutral | var(--color-content-low-text) | #617177 | |
| text | --color-interaction-container-neutral-text-active | .text-interaction-container-neutral-active | var(--color-petrol-700) | #185963 | |
| text | --color-interaction-container-neutral-text-hover | .text-interaction-container-neutral-hover | var(--color-content-medium-text) | #34464d | |
| text | --color-interaction-link-high-text | .text-interaction-link-high | var(--color-petrol-600) | #1f717d | |
| text | --color-interaction-link-high-text-disabled | .text-interaction-link-high-disabled | var(--color-content-low-text) | #617177 | |
| text | --color-interaction-link-high-text-hover | .text-interaction-link-high-hover | var(--color-petrol-700) | #185963 | |
| text | --color-interaction-link-high-text-visited | .text-interaction-link-high-visited | var(--color-petrol-700) | #185963 | |
| text | --color-interaction-link-inverted-text | .text-interaction-link-inverted | var(--color-content-inverted-medium-text) | #27353b | |
| text | --color-interaction-link-inverted-text-hover | .text-interaction-link-inverted-hover | var(--color-petrol-600) | #1f717d | |
| text | --color-interaction-link-inverted-text-inactive | .text-interaction-link-inverted-inactive | var(--color-content-inverted-low-text) | #3f555e | |
| text | --color-interaction-link-inverted-text-visited | .text-interaction-link-inverted-visited | var(--color-petrol-700) | #185963 | |
| text | --color-interaction-link-low-text | .text-interaction-link-low | var(--color-content-high-text) | #171f22 | |
| text | --color-interaction-link-low-text-disabled | .text-interaction-link-low-disabled | var(--color-content-low-text) | #617177 | |
| text | --color-interaction-link-low-text-hover | .text-interaction-link-low-hover | var(--color-petrol-700) | #185963 | |
| text | --color-interaction-link-low-text-visited | .text-interaction-link-low-visited | var(--color-petrol-700) | #185963 | |
| text | --color-rainbow-1-text | .text-rainbow-1 | var(--color-amber-700) | #9c5311 | |
| text | --color-rainbow-10-text | .text-rainbow-10 | var(--color-gray-ocean-500) | #394d55 | |
| text | --color-rainbow-2-text | .text-rainbow-2 | var(--color-orange-700) | #963715 | |
| text | --color-rainbow-3-text | .text-rainbow-3 | var(--color-yellow-800) | #795c00 | |
| text | --color-rainbow-4-text | .text-rainbow-4 | var(--color-red-500) | #cc1d1d | |
| text | --color-rainbow-5-text | .text-rainbow-5 | var(--color-turquoise-800) | #32504c | |
| text | --color-rainbow-6-text | .text-rainbow-6 | var(--color-crimson-400) | #ab2d58 | |
| text | --color-rainbow-7-text | .text-rainbow-7 | var(--color-green-600) | #106f15 | |
| text | --color-rainbow-8-text | .text-rainbow-8 | var(--color-petrol-600) | #1f717d | |
| text | --color-rainbow-9-text | .text-rainbow-9 | var(--color-lime-700) | #5c6e1f |