Spacing

Use the semantic space tokens, --nbhd-space-*, in your CSS. Each one points to the matching step of the base scale (--nbhd-space-4 → --nbhd-base-space-4), so a brand that changes its step size, like Moen’s 5px step, changes every space token with it. Components use the same tokens.

Use gap on flex and grid parents instead of margins on children.

.card {
  display: flex;
  gap: var(--nbhd-space-3);
  padding: var(--nbhd-space-6);
}