DESIGN TOKENS
Token explorer
Generated from @nitro-core/tokens. Components consume these values. They never hardcode them.
| Preview | Figma variable | Token | CSS | Value | Status |
|---|---|---|---|---|---|
| Color / brand / blue | color.brand.blue | --nitro-color-brand-blue | #0473ea | Synced | |
| Color / brand / green | color.brand.green | --nitro-color-brand-green | #38d200 | Synced | |
| Color / action / primary | color.action.primary | --nitro-color-action-primary | #0473ea | Synced | |
| Color / action / primary Hover | color.action.primaryHover | --nitro-color-action-primary-hover | #aef1ea | Synced | |
| Color / action / primary Hover Text | color.action.primaryHoverText | --nitro-color-action-primary-hover-text | #0473ea | Synced | |
| Color / action / primary Active | color.action.primaryActive | --nitro-color-action-primary-active | #aef1ea | Synced | |
| Color / action / primary Disabled | color.action.primaryDisabled | --nitro-color-action-primary-disabled | #cfe4fb | Synced | |
| Color / action / primary Disabled Text | color.action.primaryDisabledText | --nitro-color-action-primary-disabled-text | #719ac1 | Synced | |
| Color / action / primary Dark | color.action.primaryDark | --nitro-color-action-primary-dark | #3beb8d | Synced | |
| Color / action / primary Dark Text | color.action.primaryDarkText | --nitro-color-action-primary-dark-text | #0c3a66 | Synced | |
| Color / action / primary Dark Hover | color.action.primaryDarkHover | --nitro-color-action-primary-dark-hover | #ffffff | Synced | |
| Color / action / primary Dark Hover Text | color.action.primaryDarkHoverText | --nitro-color-action-primary-dark-hover-text | #0473ea | Synced | |
| Color / action / primary Dark Disabled | color.action.primaryDarkDisabled | --nitro-color-action-primary-dark-disabled | #557ca1 | Synced | |
| Color / action / primary Dark Disabled Text | color.action.primaryDarkDisabledText | --nitro-color-action-primary-dark-disabled-text | #aabed0 | Synced | |
| Color / action / primary Dark Loading Text | color.action.primaryDarkLoadingText | --nitro-color-action-primary-dark-loading-text | #87bdf6 | Synced | |
| Color / action / primary Overlay | color.action.primaryOverlay | --nitro-color-action-primary-overlay | #0a519e | Synced | |
| transparent | Color / action / secondary | color.action.secondary | --nitro-color-action-secondary | transparent | Synced |
| Color / action / secondary Text | color.action.secondaryText | --nitro-color-action-secondary-text | #0c3a66 | Synced | |
| Color / action / secondary Text Dark | color.action.secondaryTextDark | --nitro-color-action-secondary-text-dark | #ffffff | Synced | |
| Color / action / secondary Hover | color.action.secondaryHover | --nitro-color-action-secondary-hover | #0473ea | Synced | |
| Color / action / secondary Hover Dark | color.action.secondaryHoverDark | --nitro-color-action-secondary-hover-dark | #e7f1fd | Synced | |
| Color / action / secondary Disabled | color.action.secondaryDisabled | --nitro-color-action-secondary-disabled | #859cb2 | Synced | |
| Color / action / secondary Disabled Dark | color.action.secondaryDisabledDark | --nitro-color-action-secondary-disabled-dark | #527596 | Synced | |
| Color / text / primary | color.text.primary | --nitro-color-text-primary | #0c3a66 | Synced | |
| Color / text / secondary | color.text.secondary | --nitro-color-text-secondary | #5a6b66 | Synced | |
| Color / text / tertiary | color.text.tertiary | --nitro-color-text-tertiary | #7a8b86 | Synced | |
| Color / text / body | color.text.body | --nitro-color-text-body | #191919 | Synced | |
| Color / text / muted | color.text.muted | --nitro-color-text-muted | #555555 | Synced | |
| Color / text / placeholder | color.text.placeholder | --nitro-color-text-placeholder | #aaaaaa | Synced | |
| Color / text / on Primary | color.text.onPrimary | --nitro-color-text-on-primary | #ffffff | Synced | |
| Color / text / on Danger | color.text.onDanger | --nitro-color-text-on-danger | #ffffff | Synced | |
| Color / text / disabled | color.text.disabled | --nitro-color-text-disabled | #719ac1 | Synced | |
| Color / text / inverse | color.text.inverse | --nitro-color-text-inverse | #ffffff | Synced | |
| Color / background / canvas | color.background.canvas | --nitro-color-background-canvas | #ffffff | Synced | |
| Color / background / surface | color.background.surface | --nitro-color-background-surface | #ffffff | Synced | |
| Color / background / subtle | color.background.subtle | --nitro-color-background-subtle | #f4f7f5 | Synced | |
| Color / background / muted | color.background.muted | --nitro-color-background-muted | #e7eee9 | Synced | |
| Color / background / inverse | color.background.inverse | --nitro-color-background-inverse | #0c3a66 | Synced | |
| rgba(12, 58, 102, 0.48) | Color / background / overlay | color.background.overlay | --nitro-color-background-overlay | rgba(12, 58, 102, 0.48) | Synced |
| Color / border / default | color.border.default | --nitro-color-border-default | #d7e2dc | Synced | |
| Color / border / strong | color.border.strong | --nitro-color-border-strong | #b7c9c0 | Synced | |
| Color / border / focus | color.border.focus | --nitro-color-border-focus | #0473ea | Synced | |
| Color / border / danger | color.border.danger | --nitro-color-border-danger | #d0021b | Synced | |
| Color / border / input | color.border.input | --nitro-color-border-input | #aaaaaa | Synced | |
| Color / border / input Focus | color.border.inputFocus | --nitro-color-border-input-focus | #38d200 | Synced | |
| Color / border / input Subtle | color.border.inputSubtle | --nitro-color-border-input-subtle | #e5e5e5 | Synced | |
| Color / feedback / success | color.feedback.success | --nitro-color-feedback-success | #00a651 | Synced | |
| Color / feedback / warning | color.feedback.warning | --nitro-color-feedback-warning | #c45c12 | Synced | |
| Color / feedback / error | color.feedback.error | --nitro-color-feedback-error | #d0021b | Synced | |
| Color / feedback / info | color.feedback.info | --nitro-color-feedback-info | #0473ea | Synced | |
| Color / nav / active | color.nav.active | --nitro-color-nav-active | #044385 | Synced | |
| Color / nav / inactive | color.nav.inactive | --nitro-color-nav-inactive | #191919 | Synced | |
| Color / nav / selection | color.nav.selection | --nitro-color-nav-selection | #eeeeee | Synced | |
| Color / nav / badge | color.nav.badge | --nitro-color-nav-badge | #d0021b | Synced | |
| Color / date / selected | color.date.selected | --nitro-color-date-selected | #9ce980 | Synced | |
| Color / date / today | color.date.today | --nitro-color-date-today | #38d200 | Synced | |
| Color / toast / background | color.toast.background | --nitro-color-toast-background | #6b6e73 | Synced | |
| Color / toast / error | color.toast.error | --nitro-color-toast-error | #e05667 | Synced | |
| Color / toast / text | color.toast.text | --nitro-color-toast-text | #ffffff | Synced | |
| rgba(255, 255, 255, 0.1) | Color / toast / cta | color.toast.cta | --nitro-color-toast-cta | rgba(255, 255, 255, 0.1) | Synced |
| Color / palette / main Black | color.palette.mainBlack | --nitro-color-palette-main-black | #000000 | Synced | |
| Color / palette / main Blue | color.palette.mainBlue | --nitro-color-palette-main-blue | #2772c7 | Synced | |
| Color / palette / main Green | color.palette.mainGreen | --nitro-color-palette-main-green | #1f8845 | Synced | |
| Color / palette / main Red | color.palette.mainRed | --nitro-color-palette-main-red | #d0021b | Synced | |
| Color / palette / main Grey | color.palette.mainGrey | --nitro-color-palette-main-grey | #6b6e73 | Synced | |
| Color / palette / main White | color.palette.mainWhite | --nitro-color-palette-main-white | #ffffff | Synced | |
| Color / palette / main Orange | color.palette.mainOrange | --nitro-color-palette-main-orange | #ff9526 | Synced | |
| Color / palette / main Purple | color.palette.mainPurple | --nitro-color-palette-main-purple | #8b0fed | Synced | |
| Color / palette / brand Blue | color.palette.brandBlue | --nitro-color-palette-brand-blue | #0473ea | Synced | |
| Color / palette / brand Green | color.palette.brandGreen | --nitro-color-palette-brand-green | #38d200 | Synced | |
| Color / palette / brand Dark | color.palette.brandDark | --nitro-color-palette-brand-dark | #525355 | Synced |