NxtPeople
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
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.
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.
