Guidelines

Working with tokens Use tokens for every color, size and font so your work follows each brand theme. Surfaces and color Set a surface and components choose background, text and link colors that read well together. Styling Customize components with attributes, custom properties and CSS parts instead of overrides. Extending components Compose, wrap and build on components in ways that keep working when Neighborhood updates. Content model Content goes in slots, settings are properties: the content and settings of every component. Content and media Write headlines and calls to action, choose heading levels, and prepare images and video. Layout and responsive Lay out pages with Container, Flex and the spacing scale, and design for each breakpoint. Loading and performance What a page shows before components load, how to avoid layout shift, and how to keep pages fast. Accessibility Neighborhood's WCAG 2.2 AA target: what components handle and what each site owns. Brand theming What a brand theme controls, what stays the same on every brand, and how to request brand changes.