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

Size & Space

Size

Size tokens provide a scale of values used for element sizing. This includes padding and margins retained within the bounds of the element.

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

Space tokens provide a scale of values used for consistent whitespace used in layouts between elements.

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