Design Tokens
Design tokens are the visual design atoms of the design system—specifically, named entities that store visual design attributes. Use these tokens in place of hard-coded values to ensure flexibility and consistency across all product experiences.
reference tokens (foundation, --nve-ref-*)
- color
- space
- size
- type
system tokens (semantic, --nve-sys-*)
- status
- layers (canvas, containers, overlays, popovers)
- interactions (default, emphasis, destructive)
themes (token overrides)
- dark theme
- compact theme
components (consumers)
- use tokens in CSS, defaulting to system tokens when possible
Size
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-ref-size-50 | --nve-ref-scale-size * 2px | Use for minimal padding and margins within compact elements | ||
| --nve-ref-size-100 | --nve-ref-scale-size * 4px | Use for tight padding and margins within small elements | ||
| --nve-ref-size-150 | --nve-ref-scale-size * 6px | Use for compact padding and margins within elements | ||
| --nve-ref-size-200 | --nve-ref-scale-size * 8px | Use for standard padding and margins within form controls and small components | ||
| --nve-ref-size-250 | --nve-ref-scale-size * 10px | Use for comfortable padding and margins within medium elements | ||
| --nve-ref-size-300 | --nve-ref-scale-size * 12px | Use for standard padding and margins within buttons and interactive elements | ||
| --nve-ref-size-400 | --nve-ref-scale-size * 16px | Use for comfortable padding and margins within cards and panels | ||
| --nve-ref-size-500 | --nve-ref-scale-size * 20px | Use for generous padding and margins within larger components | ||
| --nve-ref-size-600 | --nve-ref-scale-size * 24px | Use for spacious padding and margins within containers | ||
| --nve-ref-size-700 | --nve-ref-scale-size * 28px | Use for extra padding and margins within large components | ||
| --nve-ref-size-800 | --nve-ref-scale-size * 32px | Use for standard height of form inputs and buttons | ||
| --nve-ref-size-900 | --nve-ref-scale-size * 36px | Use for extra large padding and margins within oversized elements | ||
| --nve-ref-size-1000 | --nve-ref-scale-size * 40px | Use for maximum padding and margins within very large containers |
Space
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-ref-space-none | --nve-ref-scale-space * 0px | Use when no spacing is needed between elements | ||
| --nve-ref-space-xxxs | --nve-ref-scale-space * 2px | Use for minimal gaps between tightly grouped elements | ||
| --nve-ref-space-xxs | --nve-ref-scale-space * 4px | Use for very small gaps between closely related elements | ||
| --nve-ref-space-xs | --nve-ref-scale-space * 8px | Use for small gaps between form fields and related content | ||
| --nve-ref-space-sm | --nve-ref-scale-space * 12px | Use for standard gaps between form fields and sibling elements in layouts | ||
| --nve-ref-space-md | --nve-ref-scale-space * 16px | Use for comfortable gaps between sections and groups of elements | ||
| --nve-ref-space-lg | --nve-ref-scale-space * 24px | Use for generous gaps between major sections and content blocks | ||
| --nve-ref-space-xl | --nve-ref-scale-space * 32px | Use for large gaps between distinct page sections | ||
| --nve-ref-space-xxl | --nve-ref-scale-space * 48px | Use for extra large gaps between major page regions | ||
| --nve-ref-space-xxxl | --nve-ref-scale-space * 64px | Use for maximum gaps between completely separate page areas |
Border Color
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-ref-border-color | --nve-ref-color-neutral-800 | Use for default borders that match the standard color scheme | ||
| --nve-ref-border-color-emphasis | --nve-ref-color-neutral-1000 | Use for borders that need high contrast and emphasis | ||
| --nve-ref-border-color-muted | --nve-ref-color-neutral-700 | Use for subtle borders that blend with backgrounds | ||
| --nve-ref-border-color-inverse | --nve-ref-color-scheme-inverse | Use for borders on inverse color scheme backgrounds |
Border Width
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-ref-border-width-sm | --nve-ref-scale-border-width * 1px | Use for subtle borders on cards and dividers | ||
| --nve-ref-border-width-md | --nve-ref-scale-border-width * 2px | Use for standard borders on containers and panels | ||
| --nve-ref-border-width-lg | --nve-ref-scale-border-width * 3px | Use for prominent borders on emphasized containers | ||
| --nve-ref-border-width-xl | --nve-ref-scale-border-width * 4px | Use for very thick borders on highly emphasized elements |
Border Radius
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-ref-border-radius-full | --999px | Use for fully rounded pill-shaped elements like buttons and badges | ||
| --nve-ref-border-radius-none | --nve-ref-scale-border-radius * 0px | Use for square corners with no rounding | ||
| --nve-ref-border-radius-xs | --nve-ref-scale-border-radius * 4px | Use for subtle corner rounding on compact elements | ||
| --nve-ref-border-radius-sm | --nve-ref-scale-border-radius * 6px | Use for slight corner rounding on form controls and small components | ||
| --nve-ref-border-radius-md | --nve-ref-scale-border-radius * 8px | Use for standard corner rounding on cards and panels | ||
| --nve-ref-border-radius-lg | --nve-ref-scale-border-radius * 14px | Use for generous corner rounding on large containers | ||
| --nve-ref-border-radius-xl | --nve-ref-scale-border-radius * 24px | Use for very rounded corners on prominent containers | ||
| --nve-ref-border-radius-xxl | --nve-ref-scale-border-radius * 48px | Use for maximum corner rounding on large containers |
Opacity
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-ref-opacity-0 | --0 | Use for completely transparent elements and hidden overlays | ||
| --nve-ref-opacity-150 | --0.15 | Use for very subtle transparency effects on disabled states | ||
| --nve-ref-opacity-200 | --0.2 | Use for subtle transparency on overlays and disabled content | ||
| --nve-ref-opacity-300 | --0.3 | Use for light transparency on secondary content | ||
| --nve-ref-opacity-400 | --0.4 | Use for moderate transparency on muted content | ||
| --nve-ref-opacity-500 | --0.5 | Use for balanced transparency on semi-transparent overlays | ||
| --nve-ref-opacity-600 | --0.6 | Use for noticeable transparency while maintaining readability | ||
| --nve-ref-opacity-700 | --0.7 | Use for reduced transparency on emphasized content | ||
| --nve-ref-opacity-800 | --0.8 | Use for slight transparency on primary content | ||
| --nve-ref-opacity-900 | --0.9 | Use for minimal transparency on nearly opaque content |
Shadow
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --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 | |
Text
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-ref-font-family-inter | --'Inter', Roboto, 'Open Sans', 'Helvetica Neue', sans-serif | Use for body text and UI elements | font | |
| --nve-ref-font-family-roboto-mono | --'Roboto Mono', 'Lucida Console', Monaco, monospace, sans-serif | Use for code snippets and monospace text | font | |
| --nve-ref-font-weight-light | --200 | Use for subtle text emphasis | weight | |
| --nve-ref-font-weight-regular | --400 | Use for body text and default content | weight | |
| --nve-ref-font-weight-medium | --500 | Use for labels and medium emphasis | weight | |
| --nve-ref-font-weight-semibold | --600 | Use for navigation and strong emphasis | weight | |
| --nve-ref-font-weight-bold | --700 | Use for strong text emphasis | weight | |
| --nve-ref-font-weight-extra-bold | --800 | Use for maximum text emphasis | weight | |
| --nve-ref-font-line-height-tight | --1.12 | Use when vertical space is limited | line-height | |
| --nve-ref-font-line-height-snug | --1.25 | Use for compact text layouts | line-height | |
| --nve-ref-font-line-height-moderate | --1.375 | Use for balanced text readability | line-height | |
| --nve-ref-font-line-height-relaxed | --1.5 | Use for comfortable text reading | line-height | |
| --nve-ref-font-line-height-loose | --1.625 | Use for spacious text layouts | line-height | |
| --nve-ref-font-family | --nve-ref-font-family-inter | Use for default body text and UI elements | font | |
| --nve-ref-font-size-50 | --nve-ref-scale-text * 10px | Use for very small labels or compact UI text | size | |
| --nve-ref-font-size-100 | --nve-ref-scale-text * 12px | Use for small body text or compact labels | size | |
| --nve-ref-font-size-200 | --nve-ref-scale-text * 14px | Use for default body text, labels, and small headings | size | |
| --nve-ref-font-size-300 | --nve-ref-scale-text * 16px | Use for large body text or small headings | size | |
| --nve-ref-font-size-400 | --nve-ref-scale-text * 18px | Use for default headings or extra large body text | size | |
| --nve-ref-font-size-500 | --nve-ref-scale-text * 20px | Use for large headings | size | |
| --nve-ref-font-size-600 | --nve-ref-scale-text * 24px | Use for extra large headings | size | |
| --nve-ref-font-size-700 | --nve-ref-scale-text * 28px | Use for very large headings | size | |
| --nve-ref-font-size-800 | --nve-ref-scale-text * 32px | Use for prominent headings | size | |
| --nve-ref-font-size-900 | --nve-ref-scale-text * 36px | Use for small display text | size | |
| --nve-ref-font-size-1000 | --nve-ref-scale-text * 40px | Use for default display text | size | |
| --nve-ref-font-size-1100 | --nve-ref-scale-text * 44px | Use for large display text | size | |
| --nve-ref-font-size-1200 | --nve-ref-scale-text * 50px | Use for extra large display text | size | |
| --nve-ref-font-line-height-300 | --nve-ref-scale-line-height * 12px | Use when precise vertical spacing is needed for compact text | line-height | |
| --nve-ref-font-line-height-400 | --nve-ref-scale-line-height * 16px | Use when precise vertical spacing is needed for small text | line-height | |
| --nve-ref-font-line-height-500 | --nve-ref-scale-line-height * 20px | Use when precise vertical spacing is needed for body text | line-height | |
| --nve-ref-font-line-height-600 | --nve-ref-scale-line-height * 24px | Use when precise vertical spacing is needed for large text | line-height | |
| --nve-ref-font-line-height-700 | --nve-ref-scale-line-height * 28px | Use when precise vertical spacing is needed for headings | line-height | |
| --nve-ref-font-line-height-800 | --nve-ref-scale-line-height * 32px | Use when precise vertical spacing is needed for large headings | line-height | |
| --nve-ref-font-line-height-900 | --nve-ref-scale-line-height * 36px | Use when precise vertical spacing is needed for display text | line-height | |
| --nve-ref-font-line-height-1000 | --nve-ref-scale-line-height * 40px | Use when precise vertical spacing is needed for large display text | line-height | |
| --nve-sys-text-white-color | --nve-ref-color-white | Use for text that must appear on dark backgrounds | ||
| --nve-sys-text-black-color | --nve-ref-color-black | Use for text that must appear on light backgrounds | ||
| --nve-sys-text-link-hover-color | --nve-ref-color-blue-cobalt-1100 | Use for link text when hovered or focused | ||
| --nve-sys-text-link-visited-color | --nve-ref-color-purple-lavender-1000 | Use for visited link text | ||
| --nve-sys-text-link-emphasis-color | --nve-ref-color-blue-cobalt-1000 | Use for emphasized link text | ||
| --nve-sys-text-color | --nve-ref-color-neutral-1200 | Use for default body text and general content | ||
| --nve-sys-text-muted-color | --nve-ref-color-neutral-1100 | Use for secondary text, labels, and less prominent content | ||
| --nve-sys-text-emphasis-color | --nve-ref-color-neutral-1200 | Use for highlighted text, selected items, and high-priority content | ||
| --nve-sys-text-placeholder-color | --nve-ref-color-neutral-900 | Use for placeholder text in input fields and form controls | ||
| --nve-sys-text-link-color | --nve-ref-color-neutral-1200 | Use for default link text color | ||
| --nve-sys-text-link-disabled-color | --nve-ref-color-neutral-400 | Use for disabled link text |
Animation
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-ref-animation-duration-100 | --0 | Use for instant transitions or reduced motion preferences | | |
| --nve-ref-animation-duration-150 | --150ms | Use for quick UI transitions | | |
| --nve-ref-animation-duration-200 | --200ms | Use for standard UI transitions | | |
| --nve-ref-animation-duration-250 | --250ms | Use for slightly slower transitions | | |
| --nve-ref-animation-duration-300 | --400ms | Use for slower, deliberate transitions | | |
| --nve-ref-animation-duration-400 | --800ms | Use for very slow, dramatic transitions | | |
| --nve-ref-animation-easing-100 | --ease-in-out | Use for smooth transitions |
Layer
Canvas
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-sys-layer-canvas-background | --nve-ref-color-neutral-300 | Use for page body background, the base surface in the layer hierarchy | ||
| --nve-sys-layer-canvas-accent-background | --nve-ref-color-neutral-400 | Use for subtle accent backgrounds on the page body | ||
| --nve-sys-layer-canvas-color | --nve-sys-text-color | Use for text color on the page body background |
Shell
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-sys-layer-shell-background | --nve-ref-color-scheme-base | Use for application shell or navigation bar backgrounds | ||
| --nve-sys-layer-shell-accent-background | --nve-ref-color-neutral-100 | Use for subtle accent backgrounds on the application shell | ||
| --nve-sys-layer-shell-color | --nve-sys-text-color | Use for text color on the application shell |
Container
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-sys-layer-container-background | --nve-ref-color-white | Use for card, panel, and tab container backgrounds | ||
| --nve-sys-layer-container-accent-background | --nve-ref-color-neutral-100 | Use for subtle accent backgrounds within containers | ||
| --nve-sys-layer-container-color | --nve-sys-text-color | Use for text color on container surfaces |
Overlay
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-sys-layer-overlay-background | --nve-ref-color-white | Use for modal, drawer, and dropdown menu backgrounds | ||
| --nve-sys-layer-overlay-accent-background | --nve-ref-color-neutral-100 | Use for subtle accent backgrounds within overlays | ||
| --nve-sys-layer-overlay-color | --nve-sys-text-color | Use for text color on overlay surfaces |
Popover
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-sys-layer-popover-background | --nve-ref-color-neutral-1200 | Use for tooltip, toast, and notification backgrounds | ||
| --nve-sys-layer-popover-color | --nve-sys-text-white-color | Use for text color on popover surfaces | ||
| --nve-sys-layer-popover-accent-background | --nve-ref-color-neutral-1100 | Use for subtle accent backgrounds within popovers | ||
| --nve-sys-layer-popover-offset | --nve-ref-size-50 | Use for spacing between popover and its anchor element | ||
| --nve-sys-layer-popover-arrow-offset | --nve-ref-size-100 | Use for positioning popover arrow indicators | ||
| --nve-sys-layer-popover-arrow-padding | --nve-ref-size-150 | Use for padding around popover arrow indicators |
Interaction
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-sys-interaction-color | --nve-ref-color-neutral-1200 | Use for default interactive element text color | ||
| --nve-sys-interaction-background | --nve-ref-color-neutral-600 | Use for default interactive element backgrounds |
Emphasis
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-sys-interaction-emphasis-color | --nve-sys-text-black-color | Use for text color in primary call-to-action buttons | ||
| --nve-sys-interaction-emphasis-background | --nve-sys-accent-primary-background | Use for background color in primary call-to-action buttons |
Destructive
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-sys-interaction-destructive-background | --nve-ref-color-red-cardinal-1100 | Use for background color in destructive action buttons | ||
| --nve-sys-interaction-destructive-color | --nve-sys-text-white-color | Use for text color in destructive action buttons |
Highlighted
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-sys-interaction-highlighted-background | --nve-ref-color-blue-cobalt-500 | Use for background color in highlighted interactive elements | ||
| --nve-sys-interaction-highlighted-muted-background | --nve-ref-color-blue-cobalt-300 | Use for subtle highlighted element backgrounds | ||
| --nve-sys-interaction-highlighted-color | --nve-sys-interaction-color | Use for text color in highlighted interactive elements |
Selected
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-sys-interaction-selected-color | --nve-sys-text-emphasis-color | Use for text color in selected interactive elements | ||
| --nve-sys-interaction-selected-background | --nve-sys-interaction-background | Use for background color in selected interactive elements |
Disabled
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-sys-interaction-disabled-color | --nve-ref-color-neutral-800 | Use for text color in disabled interactive elements | ||
| --nve-sys-interaction-disabled-background | --nve-ref-color-neutral-600 | Use for background color in disabled interactive elements |
Field
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-sys-interaction-field-height | --nve-ref-size-800 | Use for standard height of form inputs and buttons | ||
| --nve-sys-interaction-field-color | --nve-sys-interaction-color | Use for text color in form inputs and text fields | ||
| --nve-sys-interaction-field-background | --nve-sys-interaction-background | Use for background color in form inputs and text fields | ||
| --nve-sys-interaction-field-background-100 | --nve-sys-interaction-background-100 | Use for subtle form input backgrounds | ||
| --nve-sys-interaction-field-background-200 | --nve-sys-interaction-background-200 | Use for standard form input backgrounds | ||
| --nve-sys-interaction-field-background-300 | --nve-sys-interaction-background-300 | Use for elevated form input backgrounds |
Status
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-sys-status-scheduled-color | --nve-ref-color-purple-violet-1100 | Use for scheduled task status indicators | ||
| --nve-sys-status-queued-color | --nve-ref-color-blue-indigo-1100 | Use for queued task status indicators | ||
| --nve-sys-status-starting-color | --nve-ref-color-green-mint-1100 | Use for starting task status indicators | ||
| --nve-sys-status-running-color | --nve-ref-color-blue-cobalt-1100 | Use for running task status indicators | ||
| --nve-sys-status-restarting-color | --nve-ref-color-yellow-amber-1100 | Use for restarting task status indicators | ||
| --nve-sys-status-stopping-color | --nve-ref-color-pink-rose-1100 | Use for stopping task status indicators | ||
| --nve-sys-status-finished-color | --nve-ref-color-green-grass-1100 | Use for finished task status indicators | ||
| --nve-sys-status-failed-color | --nve-ref-color-red-cardinal-1100 | Use for failed task status indicators | ||
| --nve-sys-status-color | --nve-ref-color-neutral-1000 | Use for default task status indicators | ||
| --nve-sys-status-pending-color | --nve-ref-color-neutral-1100 | Use for pending task status indicators | ||
| --nve-sys-status-unknown-color | --nve-sys-text-black-color | Use for unknown task status indicators | ||
| --nve-sys-status-ignored-color | --nve-ref-color-neutral-1100 | Use for ignored task status indicators |
Support
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-sys-support-accent-muted-color | --nve-ref-color-blue-cobalt-400 | Use for subtle accent UI feedback text and icons | ||
| --nve-sys-support-accent-emphasis-color | --nve-ref-color-blue-cobalt-1100 | Use for emphasized accent UI feedback text and icons | ||
| --nve-sys-support-success-color | --nve-ref-color-green-grass-1100 | Use for success feedback text and icons in alerts and badges | ||
| --nve-sys-support-success-muted-color | --nve-ref-color-green-grass-400 | Use for subtle success feedback text and icons | ||
| --nve-sys-support-success-emphasis-color | --nve-ref-color-green-grass-1100 | Use for emphasized success feedback text and icons | ||
| --nve-sys-support-danger-color | --nve-ref-color-red-cardinal-1100 | Use for error feedback text and icons in alerts and badges | ||
| --nve-sys-support-danger-muted-color | --nve-ref-color-red-cardinal-400 | Use for subtle error feedback text and icons | ||
| --nve-sys-support-danger-emphasis-color | --nve-ref-color-red-cardinal-1100 | Use for emphasized error feedback text and icons | ||
| --nve-sys-support-warning-color | --nve-ref-color-yellow-nova-800 | Use for warning feedback text and icons in alerts and badges | ||
| --nve-sys-support-warning-muted-color | --nve-ref-color-yellow-nova-300 | Use for subtle warning feedback text and icons | ||
| --nve-sys-support-warning-emphasis-color | --nve-ref-color-yellow-nova-1000 | Use for emphasized warning feedback text and icons | ||
| --nve-sys-support-color | --nve-ref-color-neutral-1000 | Use for default UI feedback text and icons | ||
| --nve-sys-support-muted-color | --nve-ref-color-neutral-600 | Use for subtle default UI feedback text and icons | ||
| --nve-sys-support-emphasis-color | --nve-ref-color-neutral-1000 | Use for emphasized default UI feedback text and icons | ||
| --nve-sys-support-accent-color | --nve-sys-accent-secondary-background | Use for accent UI feedback text and icons |
Accent
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-sys-accent-primary-background | --nve-ref-color-brand-green-900 | Use for primary accent backgrounds and key visual elements | ||
| --nve-sys-accent-secondary-background | --nve-ref-color-blue-cobalt-1000 | Use for secondary accent backgrounds and supporting visual elements | ||
| --nve-sys-accent-tertiary-background | --nve-ref-color-scheme-inverse | Use for tertiary accent backgrounds and subtle visual elements |
Color
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-ref-color-white | --oklch(100% 0 0) | Use for pure white backgrounds or text | ||
| --nve-ref-color-black | --oklch(0% 0 0) | Use for pure black backgrounds or text | ||
| --nve-ref-color-alpha-white-100 | --oklch(100% 0 0 / 0) | |||
| --nve-ref-color-alpha-white-200 | --oklch(100% 0 0 / 0.0118) | |||
| --nve-ref-color-alpha-white-300 | --oklch(100% 0 0 / 0.0314) | |||
| --nve-ref-color-alpha-white-400 | --oklch(100% 0 0 / 0.0588) | |||
| --nve-ref-color-alpha-white-500 | --oklch(100% 0 0 / 0.0902) | |||
| --nve-ref-color-alpha-white-600 | --oklch(100% 0 0 / 0.1216) | |||
| --nve-ref-color-alpha-white-700 | --oklch(100% 0 0 / 0.1804) | |||
| --nve-ref-color-alpha-white-800 | --oklch(100% 0 0 / 0.251) | |||
| --nve-ref-color-alpha-white-900 | --oklch(100% 0 0 / 0.3882) | |||
| --nve-ref-color-alpha-white-1000 | --oklch(100% 0 0 / 0.451) | |||
| --nve-ref-color-alpha-white-1100 | --oklch(100% 0 0 / 0.5882) | |||
| --nve-ref-color-alpha-white-1200 | --oklch(100% 0 0 / 0.9216) | |||
| --nve-ref-color-alpha-black-100 | --oklch(0% 0 0 / 0) | |||
| --nve-ref-color-alpha-black-200 | --oklch(0% 0 0 / 0.0118) | |||
| --nve-ref-color-alpha-black-300 | --oklch(0% 0 0 / 0.0314) | |||
| --nve-ref-color-alpha-black-400 | --oklch(0% 0 0 / 0.0588) | |||
| --nve-ref-color-alpha-black-500 | --oklch(0% 0 0 / 0.0902) | |||
| --nve-ref-color-alpha-black-600 | --oklch(0% 0 0 / 0.1216) | |||
| --nve-ref-color-alpha-black-700 | --oklch(0% 0 0 / 0.1804) | |||
| --nve-ref-color-alpha-black-800 | --oklch(0% 0 0 / 0.251) | |||
| --nve-ref-color-alpha-black-900 | --oklch(0% 0 0 / 0.3882) | |||
| --nve-ref-color-alpha-black-1000 | --oklch(0% 0 0 / 0.451) | |||
| --nve-ref-color-alpha-black-1100 | --oklch(0% 0 0 / 0.5882) | |||
| --nve-ref-color-alpha-black-1200 | --oklch(0% 0 0 / 0.9216) | |||
| --nve-ref-color-brand-green-100 | --oklch(99.5% 0.004 121.6) | |||
| --nve-ref-color-brand-green-200 | --oklch(98.4% 0.019 122.8) | |||
| --nve-ref-color-brand-green-300 | --oklch(96.8% 0.043 124.5) | |||
| --nve-ref-color-brand-green-400 | --oklch(94.9% 0.069 125.4) | |||
| --nve-ref-color-brand-green-500 | --oklch(92.6% 0.09 125.6) | |||
| --nve-ref-color-brand-green-600 | --oklch(86% 0.111 125) | |||
| --nve-ref-color-brand-green-700 | --oklch(80.3% 0.143 126.3) | |||
| --nve-ref-color-brand-green-800 | --oklch(71.1% 0.185 128.2) | |||
| --nve-ref-color-brand-green-900 | --oklch(66.1% 0.184 132.1) | |||
| --nve-ref-color-brand-green-1000 | --oklch(70.9% 0.194 131.1) | |||
| --nve-ref-color-brand-green-1100 | --oklch(54.5% 0.148 130.5) | |||
| --nve-ref-color-brand-green-1200 | --oklch(30.1% 0.068 127.8) | |||
| --nve-ref-color-yellow-nova-100 | --oklch(99% 0.007 106.5) | |||
| --nve-ref-color-yellow-nova-200 | --oklch(98.8% 0.029 100.6) | |||
| --nve-ref-color-yellow-nova-300 | --oklch(98.1% 0.054 102.9) | |||
| --nve-ref-color-yellow-nova-400 | --oklch(97% 0.082 102.5) | |||
| --nve-ref-color-yellow-nova-500 | --oklch(95.3% 0.097 100.4) | |||
| --nve-ref-color-yellow-nova-600 | --oklch(92.3% 0.114 98.5) | |||
| --nve-ref-color-yellow-nova-700 | --oklch(86.8% 0.126 93.8) | |||
| --nve-ref-color-yellow-nova-800 | --oklch(81.4% 0.166 90.5) | |||
| --nve-ref-color-yellow-nova-900 | --oklch(88.2% 0.182 99.8) | |||
| --nve-ref-color-yellow-nova-1000 | --oklch(72.8% 0.151 78.2) | |||
| --nve-ref-color-yellow-nova-1100 | --oklch(54.9% 0.114 79.5) | |||
| --nve-ref-color-yellow-nova-1200 | --oklch(28.3% 0.042 85.7) | |||
| --nve-ref-color-lime-pear-100 | --oklch(98.9% 0.005 117.9) | |||
| --nve-ref-color-lime-pear-200 | --oklch(98.4% 0.019 122.8) | |||
| --nve-ref-color-lime-pear-300 | --oklch(96.9% 0.042 123.1) | |||
| --nve-ref-color-lime-pear-400 | --oklch(95% 0.068 124.6) | |||
| --nve-ref-color-lime-pear-500 | --oklch(92.8% 0.088 124.6) | |||
| --nve-ref-color-lime-pear-600 | --oklch(88.6% 0.115 125) | |||
| --nve-ref-color-lime-pear-700 | --oklch(80.5% 0.138 126) | |||
| --nve-ref-color-lime-pear-800 | --oklch(72.3% 0.173 128.3) | |||
| --nve-ref-color-lime-pear-900 | --oklch(80.3% 0.197 128.1) | |||
| --nve-ref-color-lime-pear-1000 | --oklch(75.6% 0.187 128.6) | |||
| --nve-ref-color-lime-pear-1100 | --oklch(50.8% 0.13 129.4) | |||
| --nve-ref-color-lime-pear-1200 | --oklch(28.3% 0.062 127.4) | |||
| --nve-ref-color-green-jade-100 | --oklch(99.4% 0.004 157.2) | |||
| --nve-ref-color-green-jade-200 | --oklch(97.6% 0.018 155.8) | |||
| --nve-ref-color-green-jade-300 | --oklch(96.4% 0.023 157.6) | |||
| --nve-ref-color-green-jade-400 | --oklch(94.4% 0.031 156) | |||
| --nve-ref-color-green-jade-500 | --oklch(91.2% 0.042 157.2) | |||
| --nve-ref-color-green-jade-600 | --oklch(86.6% 0.058 157.4) | |||
| --nve-ref-color-green-jade-700 | --oklch(80.1% 0.078 159.2) | |||
| --nve-ref-color-green-jade-800 | --oklch(71.6% 0.113 160.3) | |||
| --nve-ref-color-green-jade-900 | --oklch(63.2% 0.131 157.6) | |||
| --nve-ref-color-green-jade-1000 | --oklch(59.4% 0.123 158.3) | |||
| --nve-ref-color-green-jade-1100 | --oklch(50.5% 0.109 158) | |||
| --nve-ref-color-green-jade-1200 | --oklch(27.6% 0.038 164.4) | |||
| --nve-ref-color-pink-rose-100 | --oklch(99% 0.007 340.4) | |||
| --nve-ref-color-pink-rose-200 | --oklch(98% 0.013 340.5) | |||
| --nve-ref-color-pink-rose-300 | --oklch(96% 0.024 340.3) | |||
| --nve-ref-color-pink-rose-400 | --oklch(94.3% 0.033 339.8) | |||
| --nve-ref-color-pink-rose-500 | --oklch(91.3% 0.046 341.9) | |||
| --nve-ref-color-pink-rose-600 | --oklch(87% 0.065 341) | |||
| --nve-ref-color-pink-rose-700 | --oklch(81.6% 0.09 342.1) | |||
| --nve-ref-color-pink-rose-800 | --oklch(74.7% 0.122 342.5) | |||
| --nve-ref-color-pink-rose-900 | --oklch(61.4% 0.208 346.1) | |||
| --nve-ref-color-pink-rose-1000 | --oklch(59% 0.218 347.4) | |||
| --nve-ref-color-pink-rose-1100 | --oklch(56.2% 0.221 348.6) | |||
| --nve-ref-color-pink-rose-1200 | --oklch(24.2% 0.082 345.8) | |||
| --nve-ref-color-purple-lavender-100 | --oklch(99.1% 0.005 325.6) | |||
| --nve-ref-color-purple-lavender-200 | --oklch(98.9% 0.007 312.3) | |||
| --nve-ref-color-purple-lavender-300 | --oklch(96.8% 0.019 312.8) | |||
| --nve-ref-color-purple-lavender-400 | --oklch(93.6% 0.034 310.7) | |||
| --nve-ref-color-purple-lavender-500 | --oklch(90.7% 0.048 311.7) | |||
| --nve-ref-color-purple-lavender-600 | --oklch(86.9% 0.063 310.7) | |||
| --nve-ref-color-purple-lavender-700 | --oklch(80.9% 0.089 309.8) | |||
| --nve-ref-color-purple-lavender-800 | --oklch(72.8% 0.124 308.2) | |||
| --nve-ref-color-purple-lavender-900 | --oklch(55.6% 0.183 305.9) | |||
| --nve-ref-color-purple-lavender-1000 | --oklch(52.2% 0.182 305.3) | |||
| --nve-ref-color-purple-lavender-1100 | --oklch(48.3% 0.178 305.4) | |||
| --nve-ref-color-purple-lavender-1200 | --oklch(24.3% 0.096 305.3) | |||
| --nve-ref-color-purple-violet-100 | --oklch(99% 0.004 301.4) | |||
| --nve-ref-color-purple-violet-200 | --oklch(98.7% 0.007 295.5) | |||
| --nve-ref-color-purple-violet-300 | --oklch(96.2% 0.02 295.2) | |||
| --nve-ref-color-purple-violet-400 | --oklch(93.8% 0.031 293.8) | |||
| --nve-ref-color-purple-violet-500 | --oklch(90.4% 0.047 293.5) | |||
| --nve-ref-color-purple-violet-600 | --oklch(86.9% 0.061 293.4) | |||
| --nve-ref-color-purple-violet-700 | --oklch(80.4% 0.086 293.4) | |||
| --nve-ref-color-purple-violet-800 | --oklch(72.7% 0.119 292.6) | |||
| --nve-ref-color-purple-violet-900 | --oklch(53.8% 0.179 288) | |||
| --nve-ref-color-purple-violet-1000 | --oklch(50.9% 0.168 287) | |||
| --nve-ref-color-purple-violet-1100 | --oklch(47.3% 0.158 286.3) | |||
| --nve-ref-color-purple-violet-1200 | --oklch(24.1% 0.095 287.2) | |||
| --nve-ref-color-purple-plum-100 | --oklch(98.9% 0.007 312.3) | |||
| --nve-ref-color-purple-plum-200 | --oklch(98.1% 0.017 325.7) | |||
| --nve-ref-color-purple-plum-300 | --oklch(96.4% 0.024 325.8) | |||
| --nve-ref-color-purple-plum-400 | --oklch(93.7% 0.038 325.9) | |||
| --nve-ref-color-purple-plum-500 | --oklch(91.1% 0.049 324.9) | |||
| --nve-ref-color-purple-plum-600 | --oklch(86.9% 0.065 324.5) | |||
| --nve-ref-color-purple-plum-700 | --oklch(80.6% 0.092 323.3) | |||
| --nve-ref-color-purple-plum-800 | --oklch(73.5% 0.12 322.2) | |||
| --nve-ref-color-purple-plum-900 | --oklch(57.8% 0.185 322) | |||
| --nve-ref-color-purple-plum-1000 | --oklch(55% 0.198 322.1) | |||
| --nve-ref-color-purple-plum-1100 | --oklch(51.4% 0.206 322) | |||
| --nve-ref-color-purple-plum-1200 | --oklch(23.7% 0.088 320.9) | |||
| --nve-ref-color-pink-magenta-100 | --oklch(98.9% 0.006 350.8) | |||
| --nve-ref-color-pink-magenta-200 | --oklch(97.9% 0.013 345.5) | |||
| --nve-ref-color-pink-magenta-300 | --oklch(96% 0.022 348.7) | |||
| --nve-ref-color-pink-magenta-400 | --oklch(94.1% 0.03 348.2) | |||
| --nve-ref-color-pink-magenta-500 | --oklch(91.2% 0.042 349.5) | |||
| --nve-ref-color-pink-magenta-600 | --oklch(86.6% 0.061 349.2) | |||
| --nve-ref-color-pink-magenta-700 | --oklch(81.1% 0.085 352) | |||
| --nve-ref-color-pink-magenta-800 | --oklch(74% 0.116 354.5) | |||
| --nve-ref-color-pink-magenta-900 | --oklch(60.4% 0.214 2.6) | |||
| --nve-ref-color-pink-magenta-1000 | --oklch(67.7% 0.229 1.4) | |||
| --nve-ref-color-pink-magenta-1100 | --oklch(56.6% 0.213 4.7) | |||
| --nve-ref-color-pink-magenta-1200 | --oklch(24.5% 0.073 4.4) | |||
| --nve-ref-color-red-tomato-100 | --oklch(99% 0.01 0) | |||
| --nve-ref-color-red-tomato-200 | --oklch(98% 0.01 25.1) | |||
| --nve-ref-color-red-tomato-300 | --oklch(96% 0.02 25.2) | |||
| --nve-ref-color-red-tomato-400 | --oklch(94% 0.03 27.8) | |||
| --nve-ref-color-red-tomato-500 | --oklch(91.2% 0.042 27) | |||
| --nve-ref-color-red-tomato-600 | --oklch(87% 0.061 29.7) | |||
| --nve-ref-color-red-tomato-700 | --oklch(81.2% 0.084 31.8) | |||
| --nve-ref-color-red-tomato-800 | --oklch(74.6% 0.11 31.6) | |||
| --nve-ref-color-red-tomato-900 | --oklch(62% 0.195 33.3) | |||
| --nve-ref-color-red-tomato-1000 | --oklch(59.7% 0.193 33.1) | |||
| --nve-ref-color-red-tomato-1100 | --oklch(54.9% 0.191 32.8) | |||
| --nve-ref-color-red-tomato-1200 | --oklch(24% 0.047 31.3) | |||
| --nve-ref-color-orange-pumpkin-100 | --oklch(99.2% 0.003 48.7) | |||
| --nve-ref-color-orange-pumpkin-200 | --oklch(97.8% 0.011 54.5) | |||
| --nve-ref-color-orange-pumpkin-300 | --oklch(96.4% 0.021 56.1) | |||
| --nve-ref-color-orange-pumpkin-400 | --oklch(94.3% 0.035 57.6) | |||
| --nve-ref-color-orange-pumpkin-500 | --oklch(91.5% 0.052 56.8) | |||
| --nve-ref-color-orange-pumpkin-600 | --oklch(87.5% 0.08 56.6) | |||
| --nve-ref-color-orange-pumpkin-700 | --oklch(82.8% 0.111 54.4) | |||
| --nve-ref-color-orange-pumpkin-800 | --oklch(75.7% 0.15 52.2) | |||
| --nve-ref-color-orange-pumpkin-900 | --oklch(68.5% 0.194 45) | |||
| --nve-ref-color-orange-pumpkin-1000 | --oklch(65.5% 0.192 43.7) | |||
| --nve-ref-color-orange-pumpkin-1100 | --oklch(55.7% 0.162 44.1) | |||
| --nve-ref-color-orange-pumpkin-1200 | --oklch(27.9% 0.06 40.2) | |||
| --nve-ref-color-yellow-amber-100 | --oklch(99.4% 0.003 84.6) | |||
| --nve-ref-color-yellow-amber-200 | --oklch(98.1% 0.019 83.1) | |||
| --nve-ref-color-yellow-amber-300 | --oklch(96.5% 0.046 90.9) | |||
| --nve-ref-color-yellow-amber-400 | --oklch(94.4% 0.069 89.1) | |||
| --nve-ref-color-yellow-amber-500 | --oklch(92.1% 0.091 87.4) | |||
| --nve-ref-color-yellow-amber-600 | --oklch(88.6% 0.108 80.1) | |||
| --nve-ref-color-yellow-amber-700 | --oklch(82.1% 0.123 75.9) | |||
| --nve-ref-color-yellow-amber-800 | -- oklch(76% 0.152 69.5) | |||
| --nve-ref-color-yellow-amber-900 | --oklch(81.7% 0.164 75.8) | |||
| --nve-ref-color-yellow-amber-1000 | --oklch(78.3% 0.169 66.4) | |||
| --nve-ref-color-yellow-amber-1100 | --oklch(53.9% 0.135 54.2) | |||
| --nve-ref-color-yellow-amber-1200 | --oklch(30.7% 0.077 44.3) | |||
| --nve-ref-color-green-grass-100 | -- oklch(99.4% 0.005 145.5) | |||
| --nve-ref-color-green-grass-200 | --oklch(98.2% 0.015 145.5) | |||
| --nve-ref-color-green-grass-300 | --oklch(96.3% 0.027 145.4) | |||
| --nve-ref-color-green-grass-400 | --oklch(94.1% 0.034 145.3) | |||
| --nve-ref-color-green-grass-500 | --oklch(90.7% 0.05 146) | |||
| --nve-ref-color-green-grass-600 | --oklch(86.1% 0.067 146.9) | |||
| --nve-ref-color-green-grass-700 | --oklch(80% 0.09 147) | |||
| --nve-ref-color-green-grass-800 | --oklch(71.4% 0.13 148.5) | |||
| --nve-ref-color-green-grass-900 | --oklch(64.3% 0.143 147.6) | |||
| --nve-ref-color-green-grass-1000 | --oklch(61% 0.14 147.5) | |||
| --nve-ref-color-green-grass-1100 | --oklch(51.5% 0.125 147.4) | |||
| --nve-ref-color-green-grass-1200 | --oklch(27.8% 0.042 146.7) | |||
| --nve-ref-color-teal-seafoam-100 | --oklch(98.9% 0.006 185.3) | |||
| --nve-ref-color-teal-seafoam-200 | --oklch(97.8% 0.014 186) | |||
| --nve-ref-color-teal-seafoam-300 | --oklch(96.8% 0.02 181.1) | |||
| --nve-ref-color-teal-seafoam-400 | --oklch(94.3% 0.029 180.8) | |||
| --nve-ref-color-teal-seafoam-500 | --oklch(91.3% 0.038 184.3) | |||
| --nve-ref-color-teal-seafoam-600 | --oklch(86.6% 0.05 185.1) | |||
| --nve-ref-color-teal-seafoam-700 | --oklch(80.3% 0.066 183.7) | |||
| --nve-ref-color-teal-seafoam-800 | --oklch(71.8% 0.098 183.3) | |||
| --nve-ref-color-teal-seafoam-900 | --oklch(63.7% 0.112 181.7) | |||
| --nve-ref-color-teal-seafoam-1000 | --oklch(60.2% 0.105 182.4) | |||
| --nve-ref-color-teal-seafoam-1100 | --oklch(51.8% 0.091 183.8) | |||
| --nve-ref-color-teal-seafoam-1200 | --oklch(27.6% 0.038 181.3) | |||
| --nve-ref-color-green-mint-100 | --oklch(99% 0.009 179.6) | |||
| --nve-ref-color-green-mint-200 | --oklch(98.2% 0.02 177.5) | |||
| --nve-ref-color-green-mint-300 | --oklch(96.6% 0.03 176) | |||
| --nve-ref-color-green-mint-400 | --oklch(94.3% 0.041 177.7) | |||
| --nve-ref-color-green-mint-500 | --oklch(91.2% 0.052 178.1) | |||
| --nve-ref-color-green-mint-600 | --oklch(87% 0.066 178) | |||
| --nve-ref-color-green-mint-700 | --oklch(80.9% 0.09 176.6) | |||
| --nve-ref-color-green-mint-800 | --oklch(74% 0.119 176.8) | |||
| --nve-ref-color-green-mint-900 | --oklch(83.6% 0.11 177.1) | |||
| --nve-ref-color-green-mint-1000 | --oklch(81% 0.108 177.3) | |||
| --nve-ref-color-green-mint-1100 | --oklch(52.5% 0.09 180.8) | |||
| --nve-ref-color-green-mint-1200 | --oklch(29.5% 0.047 181.6) | |||
| --nve-ref-color-teal-cyan-100 | --oklch(98.8% 0.005 211) | |||
| --nve-ref-color-teal-cyan-200 | --oklch(98.4% 0.011 204.1) | |||
| --nve-ref-color-teal-cyan-300 | --oklch(96.6% 0.02 208.1) | |||
| --nve-ref-color-teal-cyan-400 | --oklch(94.2% 0.03 204.5) | |||
| --nve-ref-color-teal-cyan-500 | --oklch(90.9% 0.04 208.1) | |||
| --nve-ref-color-teal-cyan-600 | --oklch(86.4% 0.055 207.9) | |||
| --nve-ref-color-teal-cyan-700 | --oklch(80.1% 0.076 209.8) | |||
| --nve-ref-color-teal-cyan-800 | --oklch(72.4% 0.111 211.9) | |||
| --nve-ref-color-teal-cyan-900 | --oklch(65.8% 0.118 218.7) | |||
| --nve-ref-color-teal-cyan-1000 | --oklch(60.8% 0.109 219.6) | |||
| --nve-ref-color-teal-cyan-1100 | --oklch(52.8% 0.094 220.8) | |||
| --nve-ref-color-teal-cyan-1200 | --oklch(28.3% 0.048 217.6) | |||
| --nve-ref-color-blue-sky-100 | --oklch(98.9% 0.009 214.3) | |||
| --nve-ref-color-blue-sky-200 | --oklch(98.3% 0.013 214.4) | |||
| --nve-ref-color-blue-sky-300 | --oklch(96.4% 0.027 217.1) | |||
| --nve-ref-color-blue-sky-400 | --oklch(94.6% 0.036 216) | |||
| --nve-ref-color-blue-sky-500 | --oklch(91.3% 0.05 218.7) | |||
| --nve-ref-color-blue-sky-600 | --oklch(86.6% 0.066 219.4) | |||
| --nve-ref-color-blue-sky-700 | --oklch(80.6% 0.092 220.1) | |||
| --nve-ref-color-blue-sky-800 | --oklch(73.7% 0.127 222.1) | |||
| --nve-ref-color-blue-sky-900 | --oklch(84.2% 0.114 218.5) | |||
| --nve-ref-color-blue-sky-1000 | --oklch(81.2% 0.115 219.3) | |||
| --nve-ref-color-blue-sky-1100 | --oklch(53.3% 0.106 230) | |||
| --nve-ref-color-blue-sky-1200 | --oklch(28% 0.054 225.9) | |||
| --nve-ref-color-blue-cobalt-100 | --oklch(99% 0.005 258.3) | |||
| --nve-ref-color-blue-cobalt-200 | --oklch(98.3% 0.009 247.9) | |||
| --nve-ref-color-blue-cobalt-300 | --oklch(96.6% 0.017 248) | |||
| --nve-ref-color-blue-cobalt-400 | --oklch(94.8% 0.026 246.3) | |||
| --nve-ref-color-blue-cobalt-500 | --oklch(91.4% 0.042 247.2) | |||
| --nve-ref-color-blue-cobalt-600 | --oklch(86.5% 0.059 247.7) | |||
| --nve-ref-color-blue-cobalt-700 | --oklch(80.4% 0.083 245.7) | |||
| --nve-ref-color-blue-cobalt-800 | --oklch(72.8% 0.122 243.8) | |||
| --nve-ref-color-blue-cobalt-900 | --oklch(65.1% 0.192 251.5) | |||
| --nve-ref-color-blue-cobalt-1000 | --oklch(54.8% 0.2 258.1) | |||
| --nve-ref-color-blue-cobalt-1100 | --oklch(54.2% 0.191 256.9) | |||
| --nve-ref-color-blue-cobalt-1200 | --oklch(26.6% 0.084 253.9) | |||
| --nve-ref-color-blue-indigo-100 | --oklch(99.1% 0.001 286.4) | |||
| --nve-ref-color-blue-indigo-200 | --oklch(97.9% 0.01 267.4) | |||
| --nve-ref-color-blue-indigo-300 | --oklch(96.7% 0.015 270) | |||
| --nve-ref-color-blue-indigo-400 | --oklch(93.7% 0.028 268.4) | |||
| --nve-ref-color-blue-indigo-500 | --oklch(91.4% 0.037 270.5) | |||
| --nve-ref-color-blue-indigo-600 | --oklch(86.3% 0.058 270) | |||
| --nve-ref-color-blue-indigo-700 | --oklch(81% 0.079 270.3) | |||
| --nve-ref-color-blue-indigo-800 | --oklch(72.5% 0.114 270.5) | |||
| --nve-ref-color-blue-indigo-900 | --oklch(53.9% 0.194 267) | |||
| --nve-ref-color-blue-indigo-1000 | --oklch(51.2% 0.178 267.3) | |||
| --nve-ref-color-blue-indigo-1100 | --oklch(47.2% 0.155 267.4) | |||
| --nve-ref-color-blue-indigo-1200 | --oklch(23.8% 0.075 268.3) | |||
| --nve-ref-color-gray-denim-100 | --oklch(98.4% 0.003 247.9) | |||
| --nve-ref-color-gray-denim-200 | --oklch(98.3% 0.003 286.4) | |||
| --nve-ref-color-gray-denim-300 | --oklch(95.9% 0.005 275) | |||
| --nve-ref-color-gray-denim-400 | --oklch(93.6% 0.006 255.5) | |||
| --nve-ref-color-gray-denim-500 | --oklch(92.5% 0.008 271.3) | |||
| --nve-ref-color-gray-denim-600 | --oklch(90.9% 0.01 267.4) | |||
| --nve-ref-color-gray-denim-700 | --oklch(87.6% 0.013 271.3) | |||
| --nve-ref-color-gray-denim-800 | --oklch(80.6% 0.022 274) | |||
| --nve-ref-color-gray-denim-900 | --oklch(62.4% 0.028 268.7) | |||
| --nve-ref-color-gray-denim-1000 | --oklch(59.4% 0.032 270.2) | |||
| --nve-ref-color-gray-denim-1100 | --oklch(52.4% 0.032 274.2) | |||
| --nve-ref-color-gray-denim-1200 | --oklch(25.8% 0.013 279) | |||
| --nve-ref-color-gray-slate-100 | --oklch(98.4% 0.003 247.9) | |||
| --nve-ref-color-gray-slate-200 | --oklch(97.6% 0.003 264.5) | |||
| --nve-ref-color-gray-slate-300 | --oklch(95.1% 0.005 258.3) | |||
| --nve-ref-color-gray-slate-400 | --oklch(93.4% 0.005 275) | |||
| --nve-ref-color-gray-slate-500 | --oklch(93% 0.005 258.3) | |||
| --nve-ref-color-gray-slate-600 | --oklch(90.8% 0.006 239.8) | |||
| --nve-ref-color-gray-slate-700 | --oklch(88.3% 0.007 247.9) | |||
| --nve-ref-color-gray-slate-800 | --oklch(82.9% 0.01 238.5) | |||
| --nve-ref-color-gray-slate-900 | --oklch(64.9% 0.013 240) | |||
| --nve-ref-color-gray-slate-1000 | --oklch(61.3% 0.012 243.8) | |||
| --nve-ref-color-gray-slate-1100 | --oklch(52.7% 0.01 236.7) | |||
| --nve-ref-color-gray-slate-1200 | --oklch(19.5% 0.011 229.6) | |||
| --nve-ref-color-red-cardinal-100 | --oklch(99% 0.01 0) | |||
| --nve-ref-color-red-cardinal-200 | --oklch(97.8% 0.011 17.3) | |||
| --nve-ref-color-red-cardinal-300 | --oklch(95.6% 0.022 17.5) | |||
| --nve-ref-color-red-cardinal-400 | --oklch(93.2% 0.034 17.8) | |||
| --nve-ref-color-red-cardinal-500 | --oklch(91.3% 0.041 17.9) | |||
| --nve-ref-color-red-cardinal-600 | --oklch(86.5% 0.062 18.4) | |||
| --nve-ref-color-red-cardinal-700 | --oklch(80.9% 0.084 18.1) | |||
| --nve-ref-color-red-cardinal-800 | --oklch(74.5% 0.111 19.3) | |||
| --nve-ref-color-red-cardinal-900 | --oklch(62.6% 0.193 23) | |||
| --nve-ref-color-red-cardinal-1000 | --oklch(59.6% 0.195 23.8) | |||
| --nve-ref-color-red-cardinal-1100 | --oklch(54.9% 0.194 25.1) | |||
| --nve-ref-color-red-cardinal-1200 | --oklch(23.9% 0.056 17.2) | |||
| --nve-ref-color-scheme-base | --nve-ref-color-white | Use for light backgrounds and containers | ||
| --nve-ref-color-scheme-inverse | --nve-ref-color-black | Use for dark backgrounds and inverse elements | ||
| --nve-ref-color-neutral-100 | --nve-ref-color-gray-slate-100 | |||
| --nve-ref-color-neutral-200 | --nve-ref-color-gray-slate-200 | |||
| --nve-ref-color-neutral-300 | --nve-ref-color-gray-slate-300 | |||
| --nve-ref-color-neutral-400 | --nve-ref-color-gray-slate-400 | |||
| --nve-ref-color-neutral-500 | --nve-ref-color-gray-slate-500 | |||
| --nve-ref-color-neutral-600 | --nve-ref-color-gray-slate-600 | |||
| --nve-ref-color-neutral-700 | --nve-ref-color-gray-slate-700 | |||
| --nve-ref-color-neutral-800 | --nve-ref-color-gray-slate-800 | |||
| --nve-ref-color-neutral-900 | --nve-ref-color-gray-slate-900 | |||
| --nve-ref-color-neutral-1000 | --nve-ref-color-gray-slate-1000 | |||
| --nve-ref-color-neutral-1100 | --nve-ref-color-gray-slate-1100 | |||
| --nve-ref-color-neutral-1200 | --nve-ref-color-gray-slate-1200 |
Categorical
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-sys-visualization-categorical-violet | --nve-ref-color-purple-violet-1000 | Use for categorical data visualization when representing distinct groups | ||
| --nve-sys-visualization-categorical-lavender | --nve-ref-color-purple-lavender-900 | Use for categorical data visualization when representing distinct groups | ||
| --nve-sys-visualization-categorical-rose | --nve-ref-color-pink-rose-900 | Use for categorical data visualization when representing distinct groups | ||
| --nve-sys-visualization-categorical-red | --nve-ref-color-red-cardinal-1000 | Use for categorical data visualization when representing distinct groups | ||
| --nve-sys-visualization-categorical-pumpkin | --nve-ref-color-orange-pumpkin-900 | Use for categorical data visualization when representing distinct groups | ||
| --nve-sys-visualization-categorical-amber | --nve-ref-color-yellow-amber-1000 | Use for categorical data visualization when representing distinct groups | ||
| --nve-sys-visualization-categorical-nova | --nve-ref-color-yellow-nova-800 | Use for categorical data visualization when representing distinct groups | ||
| --nve-sys-visualization-categorical-pear | --nve-ref-color-lime-pear-900 | Use for categorical data visualization when representing distinct groups | ||
| --nve-sys-visualization-categorical-grass | --nve-ref-color-green-grass-1000 | Use for categorical data visualization when representing distinct groups | ||
| --nve-sys-visualization-categorical-seafoam | --nve-ref-color-teal-seafoam-900 | Use for categorical data visualization when representing distinct groups | ||
| --nve-sys-visualization-categorical-cyan | --nve-ref-color-teal-cyan-800 | Use for categorical data visualization when representing distinct groups | ||
| --nve-sys-visualization-categorical-slate | --nve-ref-color-neutral-1000 | Use for categorical data visualization when representing distinct groups |
Sequential Diverging Viridis
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --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-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-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 |
Sequential Diverging Red Green
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --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-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-red-green-500 | --nve-ref-color-neutral-400 | Use for neutral values at the center point of a diverging scale |
Trend
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-sys-visualization-trend-negative-color | --nve-ref-color-red-cardinal-1000 | Use for negative trend indicators in data visualizations | ||
| --nve-sys-visualization-trend-negative-emphasis-color | --nve-ref-color-red-cardinal-1100 | Use for emphasized negative trend indicators in data visualizations | ||
| --nve-sys-visualization-trend-positive-color | --nve-ref-color-green-grass-1000 | Use for positive trend indicators in data visualizations | ||
| --nve-sys-visualization-trend-positive-emphasis-color | --nve-ref-color-green-grass-1100 | Use for emphasized positive trend indicators in data visualizations |