NV Elements Catalog Starters Repo System Themes About Getting Started Changelog Metrics Support Accessibility Contributions Requests Migration Deprecations Integrations Installation MCP CLI Lint Angular Bundles Extensions Go Hugo Import Maps Lit NextJS Nuxt Preact React SolidJS Svelte TypeScript Vue Foundations Typography Iconography Themes Design Tokens Size & Space Objects Interactions Support Status Color Animation Fonts Layers Custom Layout Horizontal Vertical Grid Popovers i18n Visualization View Transitions Elements Accordion Alert Avatar Badge Breadcrumb Button Button Group Card Chat Message Checkbox Color Combobox Copy Button Datagrid Integrations Column Action Column Alignment Column Fixed Column width Container Card Display Settings Footer Heatmap Keynav Multi Select Pagination Panel Detail Panel Grid Performance Placeholder Row Action Row Groups Row Sort Scroll Height Single Select Stripe Date Datetime Dialog Divider Dot Drawer Dropdown Dropdown Group Dropzone File Forms Validation Actions Control Icon Icon Button Input Input Group Logo Menu Month Notification Page Page Header Page Loader Pagination Panel Progressive Filter Chip Progress Bar Progress Ring Password Preferences Input Pulse Radio Range Resize Handle Search Select Skeleton Sort Button Sparkline Star Rating Steps Switch Tabs Tag Textarea Time Toast Toggletip Toolbar Tooltip Tree Week Patterns Authentication Browse Dashboard Editor Empty States Heatmap Keyboard Shortcut Logging Media Onboarding Panel Responsive Search Subheader Trend Code Codeblock Monaco Input Diff Input Editor Diff Editor Problems Markdown Markdown CSS Utility Labs Responsive Layout Viewport Container Patterns Forms API Design Properties & Attributes Slots Registration CustomEvents Stateless Composition Styles Packaging Glossary Logs Internal Guidelines Agent Harness Documentation Examples TypeScript Testing Unit Testing Accessibility Testing Lighthouse Testing SSR Testing Visual Testing Troubleshooting Component Creation Internal Examples All Examples

Fonts

By default themes provide a default font family globally. For Elements default light and dark theme this is Inter. You can override fonts via the CSS Custom Properties.

Tokens

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