Project Showcase — Personio
Customization & Theming
One Intelligent HR Platform for every role you play — Core HR, Recruiting, Performance & Development and more.
Overview
- Role
- Lead Design Engineer
- Year
- 2025
- Team
- 4 Designers · 2 Engineers
- Reporting
- Chief Design Officer
- Ownership
- Colour engine · API service
- Surface
- Product · dark mode · login
Customization was a core feature of the rebrand.
DRI for entire product delivery.
Before
After
Problem
Make Personio feel like an extension of our customer’s brand.
Customers customise Personio with any colour — one simple input.
With no control over what that colour could be, every surface still had to stay legible and on-brand — translating fairly across dark and light, with accessibility a first-class concern.
Research
Listening before building
Customer feedback
An intentional bet against churn. Feedback named “no customization” as a real loss reason — so the work had to shift perception across the whole product, dark mode and login included.
Input models
Any colour — not a set of presets. We weighed Slack’s “safe choices” model, then chose to theme everything tonally instead.
Theming panel · Airbnb example
Design
Designing the system
A single input colour snaps to the closest Radix scale; the same hue delta then shifts every other step, keeping the whole palette harmonious.
The generated scale runs 10–140 — deliberately extended past Radix’s range — to give every token the room it needed, in light and dark.
Application of colour
One brand colour, themed tonally across every product surface.
Build
Built on a modern stack
A Next.js service generates every theme on demand — API routes drive Style Dictionary to emit each flavour, deployed across Vercel and AWS.
Build
Color API
Style Dictionary, wrapped in API routes. One input returns a full themed set — the primitive hue scale, and the semantic tokens that alias it — in whatever format the platform needs.
#21AB63→GET /api/colors/v1/css/21AB63Outcome
Final product
- 1M+
- Themes generated
- 100%
- Uptime
Customers pick an accent — usually their brand primary — and can re-tint the sidebar toward a secondary.
Personio generates custom themed wallpapers (or takes their own), builds every theme in the background, and ships it to the browser as a set of CSS variables.
Shipped theming experience
See it in production