# A design system for a multi-product HR SaaS

I lead product design for NxtPeople, a multi-product HR SaaS platform for employers and candidates. I built NxtPeople-DS, a design system with a two-tier token architecture that keeps every module and sub-brand consistent as the platform grows.

[View Website](https://nxtpeople.com/)

**Product Type:** Multi-product SaaS platform  
**Industry:** HR  
**Timeframe:** 2018–now  
**Role:** Product Design Lead & UX Architect

**Team:** Me, one designer I lead, and the NxtPeople product and engineering team.

**Scope:** Design system, Product UX strategy, Component architecture, AI-enabled design-to-code workflow

![NxtPeople product interfaces, including login, AI assistant, mobile planning and scheduling.](https://superflow.design/_astro/nxtpeople1.Bg8DwEwQ.webp)

## The challenge.

NxtPeople grew from one product into a platform of modules: NxtForm, NxtMatch, NxtPlan, NxtPay and more. Each module risked developing its own patterns, and a sub-brand, GoTemp, needed its own identity on the same foundation. Without a shared system, every new feature meant redesigning basics and every release added inconsistency.

## The key decision.

I separated brand from meaning in a two-tier token architecture: brand tokens hold the raw values, semantic tokens describe their purpose. Components only use semantic tokens. A new module or brand changes values in one place, without touching components.

## The rejected option & why.

A separate component library per product or brand. It looked faster at the start, but it would have multiplied maintenance and let the products drift apart. A second token set on the shared NxtPeople-DS gave GoTemp its own brand without a second system.

## The outcome.

One design system now supports multiple products and a separate brand. Product teams build new screens from shared components instead of designing from scratch.

## Supporting images

![NxtPeople planning interface on desktop and mobile.](https://superflow.design/_astro/nxtpeople2.DLVV5SLi.webp)

![NxtPeople mobile planning used on a phone.](https://superflow.design/_astro/nxtpeople3.DZhvMntV.webp)

![NxtPlan planning and reporting interfaces on a green background.](https://superflow.design/_astro/nxtpeople4.HKNjAbci.webp)

![NxtPeople scheduling, AI match analysis and mobile availability.](https://superflow.design/_astro/nxtpeople5.DTFM-unQ.webp)

## The final verdict.

I own the NxtPeople product experience end to end, aligning design, product and engineering. The design system runs from Figma tokens through Tokens Studio and Style Dictionary into production CSS, feeding a shadcn-based component library in Laravel and Vue. I use Figma MCP and Claude Code to speed up the design-to-code handoff, but every generated component is checked against the system’s rules before it ships. That’s the point: AI makes the components fast, the system decides whether they belong.

{/* Case structure: introduction + metadata → cover → challenge → key decision → rejected option & why → outcome → supporting images → final verdict → contact CTA. See CASE_STUDY.md for the reusable content contract. */}

## Facing the same challenges?

Every case here came down to one decision that was hard to undo. Book a 30-minute product review. I’ll look at your product and tell you which decision matters most right now.

[Get in touch today](/contact)

## Facing something similar? Book a call.

[Book a call](https://superflow.design/contact)