Z-Index

Z-Index tokens define layering values to establish consistent stacking order across the design system.

Use the semantic z-index tokens, --nbhd-z-*, in your CSS. Each one points to the matching layer of the base scale (--nbhd-z-100 → --nbhd-base-z-100). Components use the same tokens.

Pick a layer from the scale instead of an arbitrary number, so overlapping components such as headers, menus and dialogs stack the same way on every site.

.site-header {
  position: sticky;
  z-index: var(--nbhd-z-100);
}

Properties

Token	CSS Variable	Value
`z.abyss`	`var(--nbhd-z-abyss)`	`-999999`
`z.buried`	`var(--nbhd-z-buried)`	`-100`
`z.below`	`var(--nbhd-z-below)`	`-1`
`z.ground`	`var(--nbhd-z-ground)`	`0`
`z.auto`	`var(--nbhd-z-auto)`	`auto`
`z.1`	`var(--nbhd-z-1)`	`1`
`z.10`	`var(--nbhd-z-10)`	`10`
`z.100`	`var(--nbhd-z-100)`	`100`
`z.200`	`var(--nbhd-z-200)`	`200`
`z.300`	`var(--nbhd-z-300)`	`300`
`z.400`	`var(--nbhd-z-400)`	`400`
`z.500`	`var(--nbhd-z-500)`	`500`
`z.600`	`var(--nbhd-z-600)`	`600`
`z.700`	`var(--nbhd-z-700)`	`700`
`z.800`	`var(--nbhd-z-800)`	`800`
`z.900`	`var(--nbhd-z-900)`	`900`
`z.1000`	`var(--nbhd-z-1000)`	`1000`
`z.10000`	`var(--nbhd-z-10000)`	`10000`