Kenvue White Labeled
Design System

After Kenvue spun off from Johnson & Johnson, the company inherited dozens of consumer health brands, each with its own design patterns, component libraries, and production workflows. Tylenol, Neutrogena, Listerine, OGX, Zarbee's, Motrin, and many more were all building digital experiences independently.

Teams across different markets were duplicating effort, producing inconsistent user experiences, and lacking a shared foundation for accessibility compliance. Every new brand site started from scratch, costing weeks of redundant design and development work.

The mandate: build a single, flexible design system that could white-label across every brand while preserving each brand's unique identity. It needed to work across 129 markets, multiple CMS environments, and teams with varying levels of design maturity.

The system needed to be structured enough to enforce consistency but flexible enough to express 40+ distinct brand identities. I led the UX/UI design across four interconnected phases, working closely with engineering and product to ensure design-to-code parity at every step.

The library spans navigation, forms, content blocks, media modules, and commerce components. Each one supports light and dark modes, multiple density options, and responsive behavior across four breakpoints. Rather than a single theme with color overrides, each brand gets a fully resolved token set so Tylenol's system feels like Tylenol, not "generic design system in red."

The design system powers every page type: homepages, product detail pages, category pages, article templates, and checkout flows. I designed responsive templates at all four breakpoints (mobile, tablet portrait, tablet landscape, desktop) ensuring the system worked seamlessly from 320px to 1440px+.

I created a unified set of KenvuePro templates that enabled regional teams to launch brand and market landing pages, therapeutic area pages, category pages, and product detail pages without starting from scratch. Each template includes annotated notes for developers, design examples, and clear content requirements so teams in any market can self-serve.

Accessibility was a foundation, not a retrofit. Every component in the system ships with WCAG AA compliance: proper color contrast ratios, focus states, ARIA patterns, and semantic markup are enforced at the token level. Brand teams cannot accidentally break accessibility when customizing.

This approach proved its value when OGX Beauty became one of the first brands to fully adopt the system. Their redesign saw bounce rate drop from 49% to 6% and PDP retail exits increase 56% year-over-year, directly demonstrating that accessible design drives business results.

These recordings demonstrate the design system in practice: how components compose together, how brand theming applies across templates, and how the responsive behavior works across breakpoints.

Within the first year, the design system fundamentally changed how Kenvue's brand teams operate. Production timelines were cut in half: what used to take a brand team 8 to 10 weeks to build from scratch now takes 3 to 4 weeks using pre-built patterns and tokens.

Accessibility compliance went from an afterthought to a baseline. Because WCAG requirements are enforced at the component level, every new brand implementation ships accessible by default.

The system also created a shared design language across teams that had never collaborated before. Regional designers in the UK, Brazil, and Japan now reference the same components and contribute improvements back to the library. The progressive rollout approach, starting with Tylenol and OGX as pilots, created a feedback flywheel where each brand launch improved the system for the next.