Brand theming

What a brand theme controls, what stays the same on every brand, and how to request brand changes.

A brand theme is the set of token values that makes Neighborhood look like one brand. Every brand uses the same components and the same markup; the theme decides the colors, type and spacing they take on.

What a theme controls

Area	What the theme sets	Example
Colors	The brand palette, the brand’s main and secondary colors, text colors and the focus outline	Moen’s main color is Deep Blue
Surfaces	The background and text colors of each surface	Moen’s `secondary` surface is Moen Light Blue
Type	Font families, and the size, weight and line height of each text style	Moen uses Family for headlines and Denim for body text
Spacing	The step size of the space scale	Moen uses 5px steps, so space 4 is 20px
Layout width	The maximum width of containers	1800px on Moen, 1300px by default
Component details	Small brand touches, such as button corner radius or uppercase eyebrows
Fonts	Loading the brand’s web fonts	Included in each brand’s `all.css`

Each brand page shows its theme’s values.

What stays the same on every brand

Components and their options. Every brand has the same components, with the same properties, slots and events.
Structure and behavior. A Hero Split is laid out and behaves the same way on Moen as on Master Lock.
Accessibility features, such as focus styles and keyboard support.

That’s what lets one page design, one block of markup or one CMS section work on every brand.

Using a theme on your site

Load one brand stylesheet per page, as described in Installation. For internal tools and other work without a brand, load the unbranded tokens instead.

Don’t redefine the brand’s tokens on your site:

/* Avoid: your site drifts from every other site on the brand */
:root {
  --nbhd-color-brand-primary: #0b3c7d;
}

A local override makes your site look different from the brand’s other sites, and it won’t pick up corrections to the theme. If a section needs a different look for a campaign, scope a component’s custom properties to that section, as described in Styling. If the brand itself has changed, update the theme.

Brand changes

Brand themes are part of Neighborhood. To change a brand’s colors, fonts or spacing, request a change with the brand guidelines or examples that show the update. Once the theme is updated, every site on that brand gets the change when it updates its Neighborhood packages.

New brands

To add a brand to Neighborhood, get in touch with:

Brand guidelines, including the color palette and type.
Web fonts and their licenses for web use.
Example pages or designs that show the brand on the web.
The site or sites that will use it, and when.

A new brand gets its own theme and stylesheet. It uses every existing component from the start.