Support
Support colors combine with text or iconography to convey the status of an element or interaction. Status type components include alerts, badges, tags and form control messages.
defaultaccentsuccesswarningdanger
Icon Support
Semantic color variations to communicate different states, priorities, and contextual meanings in user interfaces.
Dot Support
Semantic color variations for general status communication, enabling clear visual distinction of different states and priorities.
Badge Support
Support status badges for general feedback states. Use for success, warning, error, or informational messages.
Alert Support
Alert status variants for semantic messaging. Use accent for informational updates, warning for cautionary messages requiring attention, success for confirmations, and danger for errors or critical issues that may block user progress.
Alert Group
Alert groups with inherited status styling for all children. Applying status at the group level ensures visual consistency across related messages, perfect for form validation where many fields share the same error context.
Alert Group Banner
High-prominence alerts with emphasis styling for full-width banners. Use prominence="emphasis" for system-wide announcements like maintenance windows, feature launches, or critical security updates that need max visibility and impact across the entire interface.
Notification Snackbar
Notification status variants for different message types and severity levels. Use status to convey message importance: success for confirmations, warning for cautions, danger for errors, and accent for general information requiring attention.
Toasts
Toast status variants for different feedback types. Use success for confirmations, warning for cautions, and danger for error notifications, helping users quickly identify message importance through color and iconography.
Support Tokens
Support tokens define supplementary colors and styles for the design system.
| 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 Tokens
| 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 |