Sizing

Use the semantic size tokens, --nbhd-size-*, for the dimensions of icons, controls and media in your CSS. Each one is named for what it sizes and points to a step of the base size scale (--nbhd-size-icon-sm → --nbhd-base-size-16). Components use the same tokens.

Container sizes set the narrowest layout Neighborhood supports and the widest a content container grows before it centers on the page.

.page {
  min-inline-size: var(--nbhd-size-container-min);
  max-inline-size: var(--nbhd-size-container-max);
  margin-inline: auto;
}

Size an icon from the icon scale and a clickable target from the control scale, so they match the icons and buttons inside Neighborhood components.

.toolbar-button {
  block-size: var(--nbhd-size-control-xl);
  inline-size: var(--nbhd-size-control-xl);
}

.toolbar-button svg {
  block-size: var(--nbhd-size-icon-md);
  inline-size: var(--nbhd-size-icon-md);
}

--nbhd-size-control-xl (44px) meets the WCAG minimum target size. Use it for anything people tap on a touch screen.

Size tokens don’t change with a brand’s spacing step, so an icon is the same size on Moen’s 5px grid as on the default 4px grid. Use the space scale for the gaps around an element, not for the element’s own size.