About
What Neighborhood is, what ships with it and how one system serves every brand.
Neighborhood is the shared design system for Fortune Brands Innovations websites. Every brand site builds from the same components and the same tokens, and each brand theme gives them its own look.
Without a shared system, each site rebuilds the same buttons, cards and heroes, and each version drifts a little further from the others. With Neighborhood, a component is built once, and a fix or improvement reaches every site that uses it.
Principles
- Works anywhere. Components are Web Components: custom HTML elements that run in plain HTML, React, Next.js or a CMS template.
- One system, many brands. Components read their colors, type and spacing from tokens. Load a different brand theme and the same markup takes on that brand’s look.
- Tokens before overrides. You customize components with tokens and the custom properties they expose, so your changes hold up when Neighborhood updates.
- Content stays in your page. Text and media go into slots in your own HTML, so they render with the page and stay readable before the components load.
- Built for accessibility. Neighborhood aims to meet WCAG 2.2 AA, with focus styles, keyboard support and color contrast built into the components. Accessibility covers what’s built in and what each site owns.
- A shared language. Designers, developers and business teams use the same names for the same things: a Hero Split on an Inverse surface means the same thing to everyone.
What ships
Neighborhood is a set of private packages. Most projects need two or three of them.
| Package | What it is | You need it when |
|---|---|---|
@fbin-web/neighborhood-core |
The Web Components | Always |
@fbin-web/neighborhood-react |
React versions of every component | Your project uses React or Next.js |
@fbin-web/neighborhood-brands |
One stylesheet per brand, with its tokens and fonts | You’re building a brand site |
@fbin-web/neighborhood-tokens |
Every token as CSS, JSON and JavaScript | You’re building without a brand, or reading token values in code |
@fbin-web/neighborhood-css |
Tailwind CSS utilities built from the tokens | You want utility classes that follow the brand theme |
Brands
Neighborhood has a theme for each of these brands:
- Aqualisa
- August
- CFG
- Emtek
- FBIN
- Fypon
- House of Rohl
- Larson
- Master Lock
- Moen
- Moen Flo
- Solar Innovations
- Therma-Tru
- Waste King
- Yale
Each brand page shows the colors, type and spacing that theme uses.
Where to go next
- Set up a project: Installation covers the package token, the packages and loading a brand.
- See what’s ready: Component Status shows which components are ready for production.
- Try components live: Storybook lets you change brands, surfaces and content as you go.
- Learn the shared scale: Foundations covers color, type, spacing and the rest of the tokens.
- Learn the terms: the Glossary explains the words used across these docs.