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(100% 0 127) | |||
| --nve-ref-color-brand-green-200 | --oklch(98% 0.02 127) | |||
| --nve-ref-color-brand-green-300 | --oklch(97% 0.04 127) | |||
| --nve-ref-color-brand-green-400 | --oklch(95% 0.07 127) | |||
| --nve-ref-color-brand-green-500 | --oklch(93% 0.09 127) | |||
| --nve-ref-color-brand-green-600 | --oklch(86% 0.11 127) | |||
| --nve-ref-color-brand-green-700 | --oklch(80% 0.14 127) | |||
| --nve-ref-color-brand-green-800 | --oklch(71% 0.19 127) | |||
| --nve-ref-color-brand-green-900 | --oklch(66% 0.18 127) | |||
| --nve-ref-color-brand-green-1000 | --oklch(71% 0.19 127) | |||
| --nve-ref-color-brand-green-1100 | --oklch(55% 0.15 127) | |||
| --nve-ref-color-brand-green-1200 | --oklch(30% 0.07 127) | |||
| --nve-ref-color-yellow-nova-100 | --oklch(99% 0.01 95) | |||
| --nve-ref-color-yellow-nova-200 | --oklch(99% 0.03 95) | |||
| --nve-ref-color-yellow-nova-300 | --oklch(98% 0.05 95) | |||
| --nve-ref-color-yellow-nova-400 | --oklch(97% 0.08 95) | |||
| --nve-ref-color-yellow-nova-500 | --oklch(95% 0.1 95) | |||
| --nve-ref-color-yellow-nova-600 | --oklch(92% 0.11 95) | |||
| --nve-ref-color-yellow-nova-700 | --oklch(87% 0.13 95) | |||
| --nve-ref-color-yellow-nova-800 | --oklch(81% 0.17 95) | |||
| --nve-ref-color-yellow-nova-900 | --oklch(88% 0.18 95) | |||
| --nve-ref-color-yellow-nova-1000 | --oklch(73% 0.15 95) | |||
| --nve-ref-color-yellow-nova-1100 | --oklch(55% 0.11 95) | |||
| --nve-ref-color-yellow-nova-1200 | --oklch(28% 0.04 95) | |||
| --nve-ref-color-lime-pear-100 | --oklch(99% 0.01 125) | |||
| --nve-ref-color-lime-pear-200 | --oklch(98% 0.02 125) | |||
| --nve-ref-color-lime-pear-300 | --oklch(97% 0.04 125) | |||
| --nve-ref-color-lime-pear-400 | --oklch(95% 0.07 125) | |||
| --nve-ref-color-lime-pear-500 | --oklch(93% 0.09 125) | |||
| --nve-ref-color-lime-pear-600 | --oklch(89% 0.12 125) | |||
| --nve-ref-color-lime-pear-700 | --oklch(81% 0.14 125) | |||
| --nve-ref-color-lime-pear-800 | --oklch(72% 0.17 125) | |||
| --nve-ref-color-lime-pear-900 | --oklch(80% 0.2 125) | |||
| --nve-ref-color-lime-pear-1000 | --oklch(76% 0.19 125) | |||
| --nve-ref-color-lime-pear-1100 | --oklch(51% 0.13 125) | |||
| --nve-ref-color-lime-pear-1200 | --oklch(28% 0.06 125) | |||
| --nve-ref-color-green-jade-100 | --oklch(99% 0 158) | |||
| --nve-ref-color-green-jade-200 | --oklch(98% 0.02 158) | |||
| --nve-ref-color-green-jade-300 | --oklch(96% 0.02 158) | |||
| --nve-ref-color-green-jade-400 | --oklch(94% 0.03 158) | |||
| --nve-ref-color-green-jade-500 | --oklch(91% 0.04 158) | |||
| --nve-ref-color-green-jade-600 | --oklch(87% 0.06 158) | |||
| --nve-ref-color-green-jade-700 | --oklch(80% 0.08 158) | |||
| --nve-ref-color-green-jade-800 | --oklch(72% 0.11 158) | |||
| --nve-ref-color-green-jade-900 | --oklch(63% 0.13 158) | |||
| --nve-ref-color-green-jade-1000 | --oklch(59% 0.12 158) | |||
| --nve-ref-color-green-jade-1100 | --oklch(51% 0.11 158) | |||
| --nve-ref-color-green-jade-1200 | --oklch(28% 0.04 158) | |||
| --nve-ref-color-pink-rose-100 | --oklch(99% 0.01 343) | |||
| --nve-ref-color-pink-rose-200 | --oklch(98% 0.01 343) | |||
| --nve-ref-color-pink-rose-300 | --oklch(96% 0.02 343) | |||
| --nve-ref-color-pink-rose-400 | --oklch(94% 0.03 343) | |||
| --nve-ref-color-pink-rose-500 | --oklch(91% 0.05 343) | |||
| --nve-ref-color-pink-rose-600 | --oklch(87% 0.07 343) | |||
| --nve-ref-color-pink-rose-700 | --oklch(82% 0.09 343) | |||
| --nve-ref-color-pink-rose-800 | --oklch(75% 0.12 343) | |||
| --nve-ref-color-pink-rose-900 | --oklch(61% 0.21 343) | |||
| --nve-ref-color-pink-rose-1000 | --oklch(59% 0.22 343) | |||
| --nve-ref-color-pink-rose-1100 | --oklch(56% 0.22 343) | |||
| --nve-ref-color-pink-rose-1200 | --oklch(24% 0.08 343) | |||
| --nve-ref-color-purple-lavender-100 | --oklch(99% 0.01 310) | |||
| --nve-ref-color-purple-lavender-200 | --oklch(99% 0.01 310) | |||
| --nve-ref-color-purple-lavender-300 | --oklch(97% 0.02 310) | |||
| --nve-ref-color-purple-lavender-400 | --oklch(94% 0.03 310) | |||
| --nve-ref-color-purple-lavender-500 | --oklch(91% 0.05 310) | |||
| --nve-ref-color-purple-lavender-600 | --oklch(87% 0.06 310) | |||
| --nve-ref-color-purple-lavender-700 | --oklch(81% 0.09 310) | |||
| --nve-ref-color-purple-lavender-800 | --oklch(73% 0.12 310) | |||
| --nve-ref-color-purple-lavender-900 | --oklch(56% 0.18 310) | |||
| --nve-ref-color-purple-lavender-1000 | --oklch(52% 0.18 310) | |||
| --nve-ref-color-purple-lavender-1100 | --oklch(48% 0.18 310) | |||
| --nve-ref-color-purple-lavender-1200 | --oklch(24% 0.1 310) | |||
| --nve-ref-color-purple-violet-100 | --oklch(99% 0 292) | |||
| --nve-ref-color-purple-violet-200 | --oklch(99% 0.01 292) | |||
| --nve-ref-color-purple-violet-300 | --oklch(96% 0.02 292) | |||
| --nve-ref-color-purple-violet-400 | --oklch(94% 0.03 292) | |||
| --nve-ref-color-purple-violet-500 | --oklch(90% 0.05 292) | |||
| --nve-ref-color-purple-violet-600 | --oklch(87% 0.06 292) | |||
| --nve-ref-color-purple-violet-700 | --oklch(80% 0.09 292) | |||
| --nve-ref-color-purple-violet-800 | --oklch(73% 0.12 292) | |||
| --nve-ref-color-purple-violet-900 | --oklch(54% 0.18 292) | |||
| --nve-ref-color-purple-violet-1000 | --oklch(51% 0.17 292) | |||
| --nve-ref-color-purple-violet-1100 | --oklch(47% 0.16 292) | |||
| --nve-ref-color-purple-violet-1200 | --oklch(24% 0.1 292) | |||
| --nve-ref-color-purple-plum-100 | --oklch(99% 0.01 323) | |||
| --nve-ref-color-purple-plum-200 | --oklch(98% 0.02 323) | |||
| --nve-ref-color-purple-plum-300 | --oklch(96% 0.02 323) | |||
| --nve-ref-color-purple-plum-400 | --oklch(94% 0.04 323) | |||
| --nve-ref-color-purple-plum-500 | --oklch(91% 0.05 323) | |||
| --nve-ref-color-purple-plum-600 | --oklch(87% 0.07 323) | |||
| --nve-ref-color-purple-plum-700 | --oklch(81% 0.09 323) | |||
| --nve-ref-color-purple-plum-800 | --oklch(74% 0.12 323) | |||
| --nve-ref-color-purple-plum-900 | --oklch(58% 0.19 323) | |||
| --nve-ref-color-purple-plum-1000 | --oklch(55% 0.2 323) | |||
| --nve-ref-color-purple-plum-1100 | --oklch(51% 0.21 323) | |||
| --nve-ref-color-purple-plum-1200 | --oklch(24% 0.09 323) | |||
| --nve-ref-color-pink-magenta-100 | --oklch(99% 0.01 354) | |||
| --nve-ref-color-pink-magenta-200 | --oklch(98% 0.01 354) | |||
| --nve-ref-color-pink-magenta-300 | --oklch(96% 0.02 354) | |||
| --nve-ref-color-pink-magenta-400 | --oklch(94% 0.03 354) | |||
| --nve-ref-color-pink-magenta-500 | --oklch(91% 0.04 354) | |||
| --nve-ref-color-pink-magenta-600 | --oklch(87% 0.06 354) | |||
| --nve-ref-color-pink-magenta-700 | --oklch(81% 0.09 354) | |||
| --nve-ref-color-pink-magenta-800 | --oklch(74% 0.12 354) | |||
| --nve-ref-color-pink-magenta-900 | --oklch(60% 0.21 354) | |||
| --nve-ref-color-pink-magenta-1000 | --oklch(68% 0.23 354) | |||
| --nve-ref-color-pink-magenta-1100 | --oklch(57% 0.21 354) | |||
| --nve-ref-color-pink-magenta-1200 | --oklch(25% 0.07 354) | |||
| --nve-ref-color-red-tomato-100 | --oklch(99% 0.01 27) | |||
| --nve-ref-color-red-tomato-200 | --oklch(98% 0.01 27) | |||
| --nve-ref-color-red-tomato-300 | --oklch(96% 0.02 27) | |||
| --nve-ref-color-red-tomato-400 | --oklch(94% 0.03 27) | |||
| --nve-ref-color-red-tomato-500 | --oklch(91% 0.04 27) | |||
| --nve-ref-color-red-tomato-600 | --oklch(87% 0.06 27) | |||
| --nve-ref-color-red-tomato-700 | --oklch(81% 0.08 27) | |||
| --nve-ref-color-red-tomato-800 | --oklch(75% 0.11 27) | |||
| --nve-ref-color-red-tomato-900 | --oklch(62% 0.2 27) | |||
| --nve-ref-color-red-tomato-1000 | --oklch(60% 0.19 27) | |||
| --nve-ref-color-red-tomato-1100 | --oklch(55% 0.19 27) | |||
| --nve-ref-color-red-tomato-1200 | --oklch(24% 0.05 27) | |||
| --nve-ref-color-orange-pumpkin-100 | --oklch(99% 0 51) | |||
| --nve-ref-color-orange-pumpkin-200 | --oklch(98% 0.01 51) | |||
| --nve-ref-color-orange-pumpkin-300 | --oklch(96% 0.02 51) | |||
| --nve-ref-color-orange-pumpkin-400 | --oklch(94% 0.04 51) | |||
| --nve-ref-color-orange-pumpkin-500 | --oklch(92% 0.05 51) | |||
| --nve-ref-color-orange-pumpkin-600 | --oklch(88% 0.08 51) | |||
| --nve-ref-color-orange-pumpkin-700 | --oklch(83% 0.11 51) | |||
| --nve-ref-color-orange-pumpkin-800 | --oklch(76% 0.15 51) | |||
| --nve-ref-color-orange-pumpkin-900 | --oklch(69% 0.19 51) | |||
| --nve-ref-color-orange-pumpkin-1000 | --oklch(66% 0.19 51) | |||
| --nve-ref-color-orange-pumpkin-1100 | --oklch(56% 0.16 51) | |||
| --nve-ref-color-orange-pumpkin-1200 | --oklch(28% 0.06 51) | |||
| --nve-ref-color-yellow-amber-100 | --oklch(99% 0 76) | |||
| --nve-ref-color-yellow-amber-200 | --oklch(98% 0.02 76) | |||
| --nve-ref-color-yellow-amber-300 | --oklch(97% 0.05 76) | |||
| --nve-ref-color-yellow-amber-400 | --oklch(94% 0.07 76) | |||
| --nve-ref-color-yellow-amber-500 | --oklch(92% 0.09 76) | |||
| --nve-ref-color-yellow-amber-600 | --oklch(89% 0.11 76) | |||
| --nve-ref-color-yellow-amber-700 | --oklch(82% 0.12 76) | |||
| --nve-ref-color-yellow-amber-800 | -- oklch(76% 0.152 69.5) | |||
| --nve-ref-color-yellow-amber-900 | --oklch(82% 0.16 76) | |||
| --nve-ref-color-yellow-amber-1000 | --oklch(78% 0.17 76) | |||
| --nve-ref-color-yellow-amber-1100 | --oklch(54% 0.14 76) | |||
| --nve-ref-color-yellow-amber-1200 | --oklch(31% 0.08 76) | |||
| --nve-ref-color-green-grass-100 | -- oklch(99.4% 0.005 145.5) | |||
| --nve-ref-color-green-grass-200 | --oklch(98% 0.02 147) | |||
| --nve-ref-color-green-grass-300 | --oklch(96% 0.03 147) | |||
| --nve-ref-color-green-grass-400 | --oklch(94% 0.03 147) | |||
| --nve-ref-color-green-grass-500 | --oklch(91% 0.05 147) | |||
| --nve-ref-color-green-grass-600 | --oklch(86% 0.07 147) | |||
| --nve-ref-color-green-grass-700 | --oklch(80% 0.09 147) | |||
| --nve-ref-color-green-grass-800 | --oklch(71% 0.13 147) | |||
| --nve-ref-color-green-grass-900 | --oklch(64% 0.14 147) | |||
| --nve-ref-color-green-grass-1000 | --oklch(61% 0.14 147) | |||
| --nve-ref-color-green-grass-1100 | --oklch(52% 0.13 147) | |||
| --nve-ref-color-green-grass-1200 | --oklch(28% 0.04 147) | |||
| --nve-ref-color-teal-seafoam-100 | --oklch(99% 0.01 183) | |||
| --nve-ref-color-teal-seafoam-200 | --oklch(98% 0.01 183) | |||
| --nve-ref-color-teal-seafoam-300 | --oklch(97% 0.02 183) | |||
| --nve-ref-color-teal-seafoam-400 | --oklch(94% 0.03 183) | |||
| --nve-ref-color-teal-seafoam-500 | --oklch(91% 0.04 183) | |||
| --nve-ref-color-teal-seafoam-600 | --oklch(87% 0.05 183) | |||
| --nve-ref-color-teal-seafoam-700 | --oklch(80% 0.07 183) | |||
| --nve-ref-color-teal-seafoam-800 | --oklch(72% 0.1 183) | |||
| --nve-ref-color-teal-seafoam-900 | --oklch(64% 0.11 183) | |||
| --nve-ref-color-teal-seafoam-1000 | --oklch(60% 0.11 183) | |||
| --nve-ref-color-teal-seafoam-1100 | --oklch(52% 0.09 183) | |||
| --nve-ref-color-teal-seafoam-1200 | --oklch(28% 0.04 183) | |||
| --nve-ref-color-green-mint-100 | --oklch(99% 0.01 178) | |||
| --nve-ref-color-green-mint-200 | --oklch(98% 0.02 178) | |||
| --nve-ref-color-green-mint-300 | --oklch(97% 0.03 178) | |||
| --nve-ref-color-green-mint-400 | --oklch(94% 0.04 178) | |||
| --nve-ref-color-green-mint-500 | --oklch(91% 0.05 178) | |||
| --nve-ref-color-green-mint-600 | --oklch(87% 0.07 178) | |||
| --nve-ref-color-green-mint-700 | --oklch(81% 0.09 178) | |||
| --nve-ref-color-green-mint-800 | --oklch(74% 0.12 178) | |||
| --nve-ref-color-green-mint-900 | --oklch(84% 0.11 178) | |||
| --nve-ref-color-green-mint-1000 | --oklch(81% 0.11 178) | |||
| --nve-ref-color-green-mint-1100 | --oklch(53% 0.09 178) | |||
| --nve-ref-color-green-mint-1200 | --oklch(30% 0.05 178) | |||
| --nve-ref-color-teal-cyan-100 | --oklch(99% 0.01 212) | |||
| --nve-ref-color-teal-cyan-200 | --oklch(98% 0.01 212) | |||
| --nve-ref-color-teal-cyan-300 | --oklch(97% 0.02 212) | |||
| --nve-ref-color-teal-cyan-400 | --oklch(94% 0.03 212) | |||
| --nve-ref-color-teal-cyan-500 | --oklch(91% 0.04 212) | |||
| --nve-ref-color-teal-cyan-600 | --oklch(86% 0.06 212) | |||
| --nve-ref-color-teal-cyan-700 | --oklch(80% 0.08 212) | |||
| --nve-ref-color-teal-cyan-800 | --oklch(72% 0.11 212) | |||
| --nve-ref-color-teal-cyan-900 | --oklch(66% 0.12 212) | |||
| --nve-ref-color-teal-cyan-1000 | --oklch(61% 0.11 212) | |||
| --nve-ref-color-teal-cyan-1100 | --oklch(53% 0.09 212) | |||
| --nve-ref-color-teal-cyan-1200 | --oklch(28% 0.05 212) | |||
| --nve-ref-color-blue-sky-100 | --oklch(99% 0.01 220) | |||
| --nve-ref-color-blue-sky-200 | --oklch(98% 0.01 220) | |||
| --nve-ref-color-blue-sky-300 | --oklch(96% 0.03 220) | |||
| --nve-ref-color-blue-sky-400 | --oklch(95% 0.04 220) | |||
| --nve-ref-color-blue-sky-500 | --oklch(91% 0.05 220) | |||
| --nve-ref-color-blue-sky-600 | --oklch(87% 0.07 220) | |||
| --nve-ref-color-blue-sky-700 | --oklch(81% 0.09 220) | |||
| --nve-ref-color-blue-sky-800 | --oklch(74% 0.13 220) | |||
| --nve-ref-color-blue-sky-900 | --oklch(84% 0.11 220) | |||
| --nve-ref-color-blue-sky-1000 | --oklch(81% 0.12 220) | |||
| --nve-ref-color-blue-sky-1100 | --oklch(53% 0.11 220) | |||
| --nve-ref-color-blue-sky-1200 | --oklch(28% 0.05 220) | |||
| --nve-ref-color-blue-cobalt-100 | --oklch(99% 0.01 250) | |||
| --nve-ref-color-blue-cobalt-200 | --oklch(98% 0.01 250) | |||
| --nve-ref-color-blue-cobalt-300 | --oklch(97% 0.02 250) | |||
| --nve-ref-color-blue-cobalt-400 | --oklch(95% 0.03 250) | |||
| --nve-ref-color-blue-cobalt-500 | --oklch(91% 0.04 250) | |||
| --nve-ref-color-blue-cobalt-600 | --oklch(87% 0.06 250) | |||
| --nve-ref-color-blue-cobalt-700 | --oklch(80% 0.08 250) | |||
| --nve-ref-color-blue-cobalt-800 | --oklch(73% 0.12 250) | |||
| --nve-ref-color-blue-cobalt-900 | --oklch(65% 0.19 250) | |||
| --nve-ref-color-blue-cobalt-1000 | --oklch(55% 0.2 250) | |||
| --nve-ref-color-blue-cobalt-1100 | --oklch(54% 0.19 250) | |||
| --nve-ref-color-blue-cobalt-1200 | --oklch(27% 0.08 250) | |||
| --nve-ref-color-blue-indigo-100 | --oklch(99% 0 270) | |||
| --nve-ref-color-blue-indigo-200 | --oklch(98% 0.01 270) | |||
| --nve-ref-color-blue-indigo-300 | --oklch(97% 0.02 270) | |||
| --nve-ref-color-blue-indigo-400 | --oklch(94% 0.03 270) | |||
| --nve-ref-color-blue-indigo-500 | --oklch(91% 0.04 270) | |||
| --nve-ref-color-blue-indigo-600 | --oklch(86% 0.06 270) | |||
| --nve-ref-color-blue-indigo-700 | --oklch(81% 0.08 270) | |||
| --nve-ref-color-blue-indigo-800 | --oklch(73% 0.11 270) | |||
| --nve-ref-color-blue-indigo-900 | --oklch(54% 0.19 270) | |||
| --nve-ref-color-blue-indigo-1000 | --oklch(51% 0.18 270) | |||
| --nve-ref-color-blue-indigo-1100 | --oklch(47% 0.16 270) | |||
| --nve-ref-color-blue-indigo-1200 | --oklch(24% 0.08 270) | |||
| --nve-ref-color-gray-denim-100 | --oklch(98% 0.01 270) | |||
| --nve-ref-color-gray-denim-200 | --oklch(97% 0.01 270) | |||
| --nve-ref-color-gray-denim-300 | --oklch(96% 0.01 270) | |||
| --nve-ref-color-gray-denim-400 | --oklch(94% 0.01 270) | |||
| --nve-ref-color-gray-denim-500 | --oklch(92% 0.02 270) | |||
| --nve-ref-color-gray-denim-600 | --oklch(90% 0.02 270) | |||
| --nve-ref-color-gray-denim-700 | --oklch(88% 0.02 270) | |||
| --nve-ref-color-gray-denim-800 | --oklch(80% 0.02 270) | |||
| --nve-ref-color-gray-denim-900 | --oklch(65% 0.02 270) | |||
| --nve-ref-color-gray-denim-1000 | --oklch(60% 0.025 270) | |||
| --nve-ref-color-gray-denim-1100 | --oklch(55% 0.03 270) | |||
| --nve-ref-color-gray-denim-1200 | --oklch(25% 0.01 270) | |||
| --nve-ref-color-gray-slate-100 | --oklch(98% 0.006 248) | |||
| --nve-ref-color-gray-slate-200 | --oklch(97% 0.006 248) | |||
| --nve-ref-color-gray-slate-300 | --oklch(95% 0.006 248) | |||
| --nve-ref-color-gray-slate-400 | --oklch(94% 0.006 248) | |||
| --nve-ref-color-gray-slate-500 | --oklch(93% 0.006 248) | |||
| --nve-ref-color-gray-slate-600 | --oklch(90% 0.006 248) | |||
| --nve-ref-color-gray-slate-700 | --oklch(88% 0.006 248) | |||
| --nve-ref-color-gray-slate-800 | --oklch(82% 0.006 248) | |||
| --nve-ref-color-gray-slate-900 | --oklch(65% 0.006 248) | |||
| --nve-ref-color-gray-slate-1000 | --oklch(60% 0.006 248) | |||
| --nve-ref-color-gray-slate-1100 | --oklch(53% 0.006 248) | |||
| --nve-ref-color-gray-slate-1200 | --oklch(20% 0.006 248) | |||
| --nve-ref-color-red-cardinal-100 | --oklch(99% 0.01 18) | |||
| --nve-ref-color-red-cardinal-200 | --oklch(98% 0.01 18) | |||
| --nve-ref-color-red-cardinal-300 | --oklch(96% 0.02 18) | |||
| --nve-ref-color-red-cardinal-400 | --oklch(93% 0.03 18) | |||
| --nve-ref-color-red-cardinal-500 | --oklch(91% 0.04 18) | |||
| --nve-ref-color-red-cardinal-600 | --oklch(87% 0.06 18) | |||
| --nve-ref-color-red-cardinal-700 | --oklch(81% 0.08 18) | |||
| --nve-ref-color-red-cardinal-800 | --oklch(75% 0.11 18) | |||
| --nve-ref-color-red-cardinal-900 | --oklch(63% 0.19 18) | |||
| --nve-ref-color-red-cardinal-1000 | --oklch(60% 0.2 18) | |||
| --nve-ref-color-red-cardinal-1100 | --oklch(55% 0.19 18) | |||
| --nve-ref-color-red-cardinal-1200 | --oklch(24% 0.06 18) | |||
| --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 |