Skip to content
Nizivo UI

Spacing and sizes

The space scale, control and icon sizes, and the tokens that change with the viewport.

Space

TokenValuePreview
--nz-space-00rem0px
--nz-space-0-50.125rem2px
--nz-space-10.25rem4px
--nz-space-1-50.375rem6px
--nz-space-20.5rem8px
--nz-space-30.75rem12px
--nz-space-41rem16px
--nz-space-51.25rem20px
--nz-space-61.5rem24px
--nz-space-82rem32px
--nz-space-102.5rem40px
--nz-space-123rem48px
--nz-space-164rem64px
--nz-space-205rem80px
--nz-space-246rem96px

Sizes

Control heights, icon sizes, the minimum touch target and border widths.

TokenValuePreview
--nz-size-control-lg3rem48px
--nz-size-control-md2.5rem40px
--nz-size-control-sm2rem32px
--nz-size-icon-lg1.5rem24px
--nz-size-icon-md1.25rem20px
--nz-size-icon-sm1rem16px
--nz-size-touch-min2.75rem44px
--nz-border-width-default1px
--nz-border-width-focus2px

Responsive tokens

These tokens change value at the custom media queries in @nizivo/tokens/custom-media.css. --nz-lg is provisional until design confirms the threshold.

TokenBase--nz-sm (width >= 40rem)--nz-lg (width >= 80rem)provisional
--nz-grid-columns4812
--nz-grid-gutter1rem1.25rem1.5rem
--nz-grid-margin1rem1.5rem2rem
--nz-layout-content-max22.375rem61rem80rem
--nz-layout-sidebar0rem4.5rem16.5rem
--nz-section-gap1.25rem1.5rem2rem
--nz-type-display2.25rem2.75rem3.5rem
--nz-type-h11.5rem1.75rem2rem
--nz-type-kpi1.75rem1.75rem2rem

Layers above the page

  • --nz-z-raised: 1
  • --nz-z-sticky: 100
  • --nz-z-chrome: 200
  • --nz-z-overlay: 1000
  • --nz-z-toast: 1100

Typography

Text styles as single font shorthands, with their tracking.

Radius

Corner radius tokens.

On this page

SpaceSizesResponsive tokensLayers above the page