## Tokens

List of all available semantic CSS custom properties / design tokens for theming.

## CSS Variables

Available semantic design tokens for theming.
| name     | value | Description |
| -------- | ----- | ----------- |
| --nve-ref-animation-easing-100 | ease-in-out | Use for smooth transitions |
| --nve-ref-border-color | var(--nve-ref-color-neutral-800) | Use for default borders that match the standard color scheme |
| --nve-ref-border-color-emphasis | var(--nve-ref-color-neutral-1000) | Use for borders that need high contrast and emphasis |
| --nve-ref-border-color-inverse | var(--nve-ref-color-scheme-inverse) | Use for borders on inverse color scheme backgrounds |
| --nve-ref-border-color-muted | var(--nve-ref-color-neutral-700) | Use for subtle borders that blend with backgrounds |
| --nve-ref-border-radius-full | 999px | Use for fully rounded pill-shaped elements like buttons and badges |
| --nve-ref-border-radius-lg | 14px | Use for generous corner rounding on large containers |
| --nve-ref-border-radius-md | 8px | Use for standard corner rounding on cards and panels |
| --nve-ref-border-radius-none | 0px | Use for square corners with no rounding |
| --nve-ref-border-radius-sm | 6px | Use for slight corner rounding on form controls and small components |
| --nve-ref-border-radius-xl | 24px | Use for very rounded corners on prominent containers |
| --nve-ref-border-radius-xs | 4px | Use for subtle corner rounding on compact elements |
| --nve-ref-border-width-lg | 3px | Use for prominent borders on emphasized containers |
| --nve-ref-border-width-md | 2px | Use for standard borders on containers and panels |
| --nve-ref-border-width-sm | 1px | Use for subtle borders on cards and dividers |
| --nve-ref-border-width-xl | 4px | Use for very thick borders on highly emphasized elements |
| --nve-ref-font-family | var(--nve-ref-font-family-inter) | Use for default body text and UI elements |
| --nve-ref-font-size-100 | 12px | Use for small body text or compact labels |
| --nve-ref-font-size-1000 | 40px | Use for default display text |
| --nve-ref-font-size-1100 | 44px | Use for large display text |
| --nve-ref-font-size-1200 | 50px | Use for extra large display text |
| --nve-ref-font-size-200 | 14px | Use for default body text, labels, and small headings |
| --nve-ref-font-size-300 | 16px | Use for large body text or small headings |
| --nve-ref-font-size-400 | 18px | Use for default headings or extra large body text |
| --nve-ref-font-size-50 | 10px | Use for very small labels or compact UI text |
| --nve-ref-font-size-500 | 20px | Use for large headings |
| --nve-ref-font-size-600 | 24px | Use for extra large headings |
| --nve-ref-font-size-700 | 28px | Use for very large headings |
| --nve-ref-font-size-800 | 32px | Use for prominent headings |
| --nve-ref-font-size-900 | 36px | Use for small display text |
| --nve-ref-font-weight-bold | 700 | Use for strong text emphasis |
| --nve-ref-font-weight-extra-bold | 800 | Use for maximum text emphasis |
| --nve-ref-font-weight-light | 200 | Use for subtle text emphasis |
| --nve-ref-font-weight-medium | 500 | Use for labels and medium emphasis |
| --nve-ref-font-weight-regular | 400 | Use for body text and default content |
| --nve-ref-font-weight-semibold | 600 | Use for navigation and strong emphasis |
| --nve-ref-shadow-100 | 0px 16px 32px 0px oklch(12.6% 0.022 276.4 / 0.02) | Use for subtle elevation on cards and floating elements |
| --nve-ref-shadow-200 | 0px 16px 32px 0px oklch(12.6% 0.022 276.4 / 0.05) | Use for light elevation on raised panels and modals |
| --nve-ref-shadow-300 | 0px 16px 32px 0px oklch(12.6% 0.022 276.4 / 0.08) | Use for moderate elevation on dialogs and overlays |
| --nve-ref-shadow-400 | 0px 16px 32px 0px oklch(12.6% 0.022 276.4 / 0.12) | Use for prominent elevation on important floating content |
| --nve-ref-shadow-500 | 0px 16px 32px 0px oklch(12.6% 0.022 276.4 / 0.17) | Use for maximum elevation on top-level modals and popovers |
| --nve-ref-size-100 | 4px | Use for tight padding and margins within small elements |
| --nve-ref-size-1000 | 40px | Use for maximum padding and margins within very large containers |
| --nve-ref-size-150 | 6px | Use for compact padding and margins within elements |
| --nve-ref-size-200 | 8px | Use for standard padding and margins within form controls and small components |
| --nve-ref-size-250 | 10px | Use for comfortable padding and margins within medium elements |
| --nve-ref-size-300 | 12px | Use for standard padding and margins within buttons and interactive elements |
| --nve-ref-size-400 | 16px | Use for comfortable padding and margins within cards and panels |
| --nve-ref-size-50 | 2px | Use for minimal padding and margins within compact elements |
| --nve-ref-size-500 | 20px | Use for generous padding and margins within larger components |
| --nve-ref-size-600 | 24px | Use for spacious padding and margins within containers |
| --nve-ref-size-700 | 28px | Use for extra padding and margins within large components |
| --nve-ref-size-800 | 32px | Use for standard height of form inputs and buttons |
| --nve-ref-size-900 | 36px | Use for extra large padding and margins within oversized elements |
| --nve-ref-space-lg | 24px | Use for generous gaps between major sections and content blocks |
| --nve-ref-space-md | 16px | Use for comfortable gaps between sections and groups of elements |
| --nve-ref-space-none | 0px | Use when no spacing is needed between elements |
| --nve-ref-space-sm | 12px | Use for standard gaps between form fields and sibling elements in layouts |
| --nve-ref-space-xl | 32px | Use for large gaps between distinct page sections |
| --nve-ref-space-xs | 8px | Use for small gaps between form fields and related content |
| --nve-sys-accent-primary-background | var(--nve-ref-color-brand-green-900) | Use for primary accent backgrounds and key visual elements |
| --nve-sys-accent-secondary-background | var(--nve-ref-color-blue-cobalt-1000) | Use for secondary accent backgrounds and supporting visual elements |
| --nve-sys-accent-tertiary-background | var(--nve-ref-color-scheme-inverse) | Use for tertiary accent backgrounds and subtle visual elements |
| --nve-sys-interaction-background | var(--nve-ref-color-neutral-600) | Use for default interactive element backgrounds |
| --nve-sys-interaction-background-100 | var(--nve-ref-color-neutral-600) | Use for subtle interactive element backgrounds |
| --nve-sys-interaction-background-200 | var(--nve-ref-color-neutral-500) | Use for standard interactive element backgrounds |
| --nve-sys-interaction-background-300 | var(--nve-ref-color-neutral-500) | Use for elevated interactive element backgrounds |
| --nve-sys-interaction-color | var(--nve-ref-color-neutral-1200) | Use for default interactive element text color |
| --nve-sys-interaction-destructive-background | var(--nve-ref-color-red-cardinal-1100) | Use for background color in destructive action buttons |
| --nve-sys-interaction-destructive-color | var(--nve-sys-text-white-color) | Use for text color in destructive action buttons |
| --nve-sys-interaction-disabled-background | var(--nve-ref-color-neutral-600) | Use for background color in disabled interactive elements |
| --nve-sys-interaction-disabled-color | var(--nve-ref-color-neutral-800) | Use for text color in disabled interactive elements |
| --nve-sys-interaction-emphasis-background | var(--nve-sys-accent-primary-background) | Use for background color in primary call-to-action buttons |
| --nve-sys-interaction-emphasis-color | var(--nve-sys-text-black-color) | Use for text color in primary call-to-action buttons |
| --nve-sys-interaction-field-background | var(--nve-sys-interaction-background) | Use for background color in form inputs and text fields |
| --nve-sys-interaction-field-background-100 | var(--nve-sys-interaction-background-100) | Use for subtle form input backgrounds |
| --nve-sys-interaction-field-background-200 | var(--nve-sys-interaction-background-200) | Use for standard form input backgrounds |
| --nve-sys-interaction-field-background-300 | var(--nve-sys-interaction-background-300) | Use for elevated form input backgrounds |
| --nve-sys-interaction-field-color | var(--nve-sys-interaction-color) | Use for text color in form inputs and text fields |
| --nve-sys-interaction-field-height | var(--nve-ref-size-800) | Use for standard height of form inputs and buttons |
| --nve-sys-interaction-highlighted-background | var(--nve-ref-color-blue-cobalt-500) | Use for background color in highlighted interactive elements |
| --nve-sys-interaction-highlighted-color | var(--nve-sys-interaction-color) | Use for text color in highlighted interactive elements |
| --nve-sys-interaction-highlighted-muted-background | var(--nve-ref-color-blue-cobalt-300) | Use for subtle highlighted element backgrounds |
| --nve-sys-interaction-hover-background | var(--nve-sys-interaction-background) | Use for background color when hovering over interactive elements |
| --nve-sys-interaction-hover-color | var(--nve-sys-text-emphasis-color) | Use for text color when hovering over interactive elements |
| --nve-sys-interaction-selected-background | var(--nve-sys-interaction-background) | Use for background color in selected interactive elements |
| --nve-sys-interaction-selected-color | var(--nve-sys-text-emphasis-color) | Use for text color in selected interactive elements |
| --nve-sys-interaction-state-base | var(--nve-sys-interaction-background) | Use as the base color when computing dynamic interaction states |
| --nve-sys-interaction-state-mix | var(--nve-ref-color-neutral-1200) | Use as the mix color when computing dynamic interaction states |
| --nve-sys-layer-backdrop-background | var(--nve-ref-color-alpha-black-400) | Use for backdrop behind modals and overlays to dim the background |
| --nve-sys-layer-canvas-accent-background | var(--nve-ref-color-neutral-400) | Use for subtle accent backgrounds on the page body |
| --nve-sys-layer-canvas-background | var(--nve-ref-color-neutral-300) | Use for page body background, the base surface in the layer hierarchy |
| --nve-sys-layer-canvas-color | var(--nve-sys-text-color) | Use for text color on the page body background |
| --nve-sys-layer-container-accent-background | var(--nve-ref-color-neutral-100) | Use for subtle accent backgrounds within containers |
| --nve-sys-layer-container-background | var(--nve-ref-color-white) | Use for card, panel, and tab container backgrounds |
| --nve-sys-layer-container-color | var(--nve-sys-text-color) | Use for text color on container surfaces |
| --nve-sys-layer-overlay-accent-background | var(--nve-ref-color-neutral-100) | Use for subtle accent backgrounds within overlays |
| --nve-sys-layer-overlay-background | var(--nve-ref-color-white) | Use for modal, drawer, and dropdown menu backgrounds |
| --nve-sys-layer-overlay-color | var(--nve-sys-text-color) | Use for text color on overlay surfaces |
| --nve-sys-layer-popover-accent-background | var(--nve-ref-color-neutral-1100) | Use for subtle accent backgrounds within popovers |
| --nve-sys-layer-popover-arrow-offset | var(--nve-ref-size-100) | Use for positioning popover arrow indicators |
| --nve-sys-layer-popover-arrow-padding | var(--nve-ref-size-150) | Use for padding around popover arrow indicators |
| --nve-sys-layer-popover-background | var(--nve-ref-color-neutral-1200) | Use for tooltip, toast, and notification backgrounds |
| --nve-sys-layer-popover-color | var(--nve-sys-text-white-color) | Use for text color on popover surfaces |
| --nve-sys-layer-popover-offset | var(--nve-ref-size-50) | Use for spacing between popover and its anchor element |
| --nve-sys-layer-shell-accent-background | var(--nve-ref-color-neutral-100) | Use for subtle accent backgrounds on the application shell |
| --nve-sys-layer-shell-background | var(--nve-ref-color-scheme-base) | Use for application shell or navigation bar backgrounds |
| --nve-sys-layer-shell-color | var(--nve-sys-text-color) | Use for text color on the application shell |
| --nve-sys-scrollbar-thumb-color | var(--nve-ref-border-color-muted) | Use for scrollbar thumb color in scrollable containers |
| --nve-sys-scrollbar-track-color | var(--nve-ref-color-alpha-black-200) | Use for scrollbar track color in scrollable containers |
| --nve-sys-scrollbar-width | thin | Use for scrollbar width in scrollable containers |
| --nve-sys-status-color | var(--nve-ref-color-neutral-1000) | Use for default task status indicators |
| --nve-sys-status-failed-color | var(--nve-ref-color-red-cardinal-1100) | Use for failed task status indicators |
| --nve-sys-status-finished-color | var(--nve-ref-color-green-grass-1100) | Use for finished task status indicators |
| --nve-sys-status-ignored-color | var(--nve-ref-color-neutral-1100) | Use for ignored task status indicators |
| --nve-sys-status-pending-color | var(--nve-ref-color-neutral-1100) | Use for pending task status indicators |
| --nve-sys-status-queued-color | var(--nve-ref-color-blue-indigo-1100) | Use for queued task status indicators |
| --nve-sys-status-restarting-color | var(--nve-ref-color-yellow-amber-1100) | Use for restarting task status indicators |
| --nve-sys-status-running-color | var(--nve-ref-color-blue-cobalt-1100) | Use for running task status indicators |
| --nve-sys-status-scheduled-color | var(--nve-ref-color-purple-violet-1100) | Use for scheduled task status indicators |
| --nve-sys-status-starting-color | var(--nve-ref-color-green-mint-1100) | Use for starting task status indicators |
| --nve-sys-status-stopping-color | var(--nve-ref-color-pink-rose-1100) | Use for stopping task status indicators |
| --nve-sys-status-unknown-color | var(--nve-sys-text-black-color) | Use for unknown task status indicators |
| --nve-sys-support-accent-color | var(--nve-sys-accent-secondary-background) | Use for accent UI feedback text and icons |
| --nve-sys-support-accent-emphasis-color | var(--nve-ref-color-blue-cobalt-1100) | Use for emphasized accent UI feedback text and icons |
| --nve-sys-support-accent-muted-color | var(--nve-ref-color-blue-cobalt-400) | Use for subtle accent UI feedback text and icons |
| --nve-sys-support-color | var(--nve-ref-color-neutral-1000) | Use for default UI feedback text and icons |
| --nve-sys-support-danger-color | var(--nve-ref-color-red-cardinal-1100) | Use for error feedback text and icons in alerts and badges |
| --nve-sys-support-danger-emphasis-color | var(--nve-ref-color-red-cardinal-1100) | Use for emphasized error feedback text and icons |
| --nve-sys-support-danger-muted-color | var(--nve-ref-color-red-cardinal-400) | Use for subtle error feedback text and icons |
| --nve-sys-support-emphasis-color | var(--nve-ref-color-neutral-1000) | Use for emphasized default UI feedback text and icons |
| --nve-sys-support-muted-color | var(--nve-ref-color-neutral-600) | Use for subtle default UI feedback text and icons |
| --nve-sys-support-success-color | var(--nve-ref-color-green-grass-1100) | Use for success feedback text and icons in alerts and badges |
| --nve-sys-support-success-emphasis-color | var(--nve-ref-color-green-grass-1100) | Use for emphasized success feedback text and icons |
| --nve-sys-support-success-muted-color | var(--nve-ref-color-green-grass-400) | Use for subtle success feedback text and icons |
| --nve-sys-support-warning-color | var(--nve-ref-color-yellow-nova-800) | Use for warning feedback text and icons in alerts and badges |
| --nve-sys-support-warning-emphasis-color | var(--nve-ref-color-yellow-nova-1000) | Use for emphasized warning feedback text and icons |
| --nve-sys-support-warning-muted-color | var(--nve-ref-color-yellow-nova-300) | Use for subtle warning feedback text and icons |
| --nve-sys-text-black-color | var(--nve-ref-color-black) | Use for text that must appear on light backgrounds |
| --nve-sys-text-color | var(--nve-ref-color-neutral-1200) | Use for default body text and general content |
| --nve-sys-text-emphasis-color | var(--nve-ref-color-neutral-1200) | Use for highlighted text, selected items, and high-priority content |
| --nve-sys-text-link-color | var(--nve-ref-color-neutral-1200) | Use for default link text color |
| --nve-sys-text-link-disabled-color | var(--nve-ref-color-neutral-400) | Use for disabled link text |
| --nve-sys-text-link-emphasis-color | var(--nve-ref-color-blue-cobalt-1000) | Use for emphasized link text |
| --nve-sys-text-link-hover-color | var(--nve-ref-color-blue-cobalt-1100) | Use for link text when hovered or focused |
| --nve-sys-text-link-visited-color | var(--nve-ref-color-purple-lavender-1000) | Use for visited link text |
| --nve-sys-text-muted-color | var(--nve-ref-color-neutral-1100) | Use for secondary text, labels, and less prominent content |
| --nve-sys-text-placeholder-color | var(--nve-ref-color-neutral-900) | Use for placeholder text in input fields and form controls |
| --nve-sys-text-white-color | var(--nve-ref-color-white) | Use for text that must appear on dark backgrounds |
| --nve-sys-visualization-categorical-amber | var(--nve-ref-color-yellow-amber-1000) | Use for categorical data visualization when representing distinct groups |
| --nve-sys-visualization-categorical-cyan | var(--nve-ref-color-teal-cyan-800) | Use for categorical data visualization when representing distinct groups |
| --nve-sys-visualization-categorical-grass | var(--nve-ref-color-green-grass-1000) | Use for categorical data visualization when representing distinct groups |
| --nve-sys-visualization-categorical-lavender | var(--nve-ref-color-purple-lavender-900) | Use for categorical data visualization when representing distinct groups |
| --nve-sys-visualization-categorical-nova | var(--nve-ref-color-yellow-nova-800) | Use for categorical data visualization when representing distinct groups |
| --nve-sys-visualization-categorical-pear | var(--nve-ref-color-lime-pear-900) | Use for categorical data visualization when representing distinct groups |
| --nve-sys-visualization-categorical-pumpkin | var(--nve-ref-color-orange-pumpkin-900) | Use for categorical data visualization when representing distinct groups |
| --nve-sys-visualization-categorical-red | var(--nve-ref-color-red-cardinal-1000) | Use for categorical data visualization when representing distinct groups |
| --nve-sys-visualization-categorical-rose | var(--nve-ref-color-pink-rose-900) | Use for categorical data visualization when representing distinct groups |
| --nve-sys-visualization-categorical-seafoam | var(--nve-ref-color-teal-seafoam-900) | Use for categorical data visualization when representing distinct groups |
| --nve-sys-visualization-categorical-slate | var(--nve-ref-color-neutral-1000) | Use for categorical data visualization when representing distinct groups |
| --nve-sys-visualization-categorical-violet | var(--nve-ref-color-purple-violet-1000) | Use for categorical data visualization when representing distinct groups |
| --nve-sys-visualization-sequential-diverging-red-green-100 | oklch(49.9% 0.159 23.4) | Use for the most extreme negative values in a diverging red-green scale |
| --nve-sys-visualization-sequential-diverging-red-green-200 | oklch(59.6% 0.195 23.8) | Use for strong negative values that deviate significantly from center |
| --nve-sys-visualization-sequential-diverging-red-green-300 | oklch(68.4% 0.193 22) | Use for moderate negative values below the neutral midpoint |
| --nve-sys-visualization-sequential-diverging-red-green-400 | oklch(83.3% 0.083 18.1) | Use for slight negative values just below the center point |
| --nve-sys-visualization-sequential-diverging-red-green-500 | var(--nve-ref-color-neutral-400) | Use for neutral values at the center point of a diverging scale |
| --nve-sys-visualization-sequential-diverging-red-green-600 | oklch(86.4% 0.117 148.8) | Use for slight positive values just above the center point |
| --nve-sys-visualization-sequential-diverging-red-green-700 | oklch(72.5% 0.176 148.7) | Use for moderate positive values above the neutral midpoint |
| --nve-sys-visualization-sequential-diverging-red-green-800 | oklch(62.7% 0.157 148.3) | Use for strong positive values that deviate significantly from center |
| --nve-sys-visualization-sequential-diverging-red-green-900 | oklch(47.5% 0.109 150.4) | Use for the most extreme positive values in a diverging red-green scale |
| --nve-sys-visualization-sequential-diverging-virdis-100 | oklch(91.8% 0.187 102.2) | Use for the highest values in a sequential viridis scale |
| --nve-sys-visualization-sequential-diverging-virdis-1000 | oklch(49.1% 0.083 242.3) | Use for very low values in a sequential viridis scale |
| --nve-sys-visualization-sequential-diverging-virdis-1100 | oklch(45.3% 0.094 261.6) | Use for near-minimum values in a sequential viridis scale |
| --nve-sys-visualization-sequential-diverging-virdis-1200 | oklch(41.9% 0.108 278.7) | Use for very low values approaching the bottom of a viridis scale |
| --nve-sys-visualization-sequential-diverging-virdis-1300 | oklch(37.1% 0.124 293.4) | Use for near-bottom values in a sequential viridis scale |
| --nve-sys-visualization-sequential-diverging-virdis-1400 | oklch(33.3% 0.134 306.3) | Use for minimal values in a sequential viridis scale |
| --nve-sys-visualization-sequential-diverging-virdis-1500 | oklch(27.6% 0.132 318.4) | Use for the lowest values in a sequential viridis scale |
| --nve-sys-visualization-sequential-diverging-virdis-200 | oklch(85.9% 0.19 115) | Use for very high values in a sequential viridis scale |
| --nve-sys-visualization-sequential-diverging-virdis-300 | oklch(82.1% 0.194 126.8) | Use for high values in a sequential viridis scale |
| --nve-sys-visualization-sequential-diverging-virdis-400 | oklch(77.5% 0.187 137.2) | Use for moderately high values in a sequential viridis scale |
| --nve-sys-visualization-sequential-diverging-virdis-500 | oklch(73.4% 0.164 147.5) | Use for upper-mid range values in a sequential viridis scale |
| --nve-sys-visualization-sequential-diverging-virdis-600 | oklch(69.1% 0.145 157.3) | Use for mid-range values in a sequential viridis scale |
| --nve-sys-visualization-sequential-diverging-virdis-700 | oklch(64.6% 0.12 169.6) | Use for lower-mid range values in a sequential viridis scale |
| --nve-sys-visualization-sequential-diverging-virdis-800 | oklch(60.2% 0.1 184.4) | Use for moderately low values in a sequential viridis scale |
| --nve-sys-visualization-sequential-diverging-virdis-900 | oklch(56.8% 0.087 200.1) | Use for low values in a sequential viridis scale |
| --nve-sys-visualization-trend-negative-color | var(--nve-ref-color-red-cardinal-1000) | Use for negative trend indicators in data visualizations |
| --nve-sys-visualization-trend-negative-emphasis-color | var(--nve-ref-color-red-cardinal-1100) | Use for emphasized negative trend indicators in data visualizations |
| --nve-sys-visualization-trend-positive-color | var(--nve-ref-color-green-grass-1000) | Use for positive trend indicators in data visualizations |
| --nve-sys-visualization-trend-positive-emphasis-color | var(--nve-ref-color-green-grass-1100) | Use for emphasized positive trend indicators in data visualizations |