Shipped 2023
Plinth System
Client
Plinth
Year
2023
Role
Design systems lead
Duration
14 months
Team
2 designers, 4 engineers
Platform
Figma and React
Plinth components in Figma, shared by four products.
01
Context
Plinth makes four B2B products for property managers: leasing, maintenance, billing and reporting. Each had grown its own buttons, tables and forms, and customers who used two products noticed.
Every new feature was designed and built four times. Plinth wanted one system the four teams would choose to use, not one they were told to use.
02
My role
I led the design system for Saltwork Studio, with a second designer and four engineers from Plinth’s platform team.
01
Audited 1,400 components across the four products and grouped them into 38 patterns.
02
Designed the tokens, the components and the usage guidelines in Figma.
03
Paired with platform engineers on the React library, so design and code shared names.
04
Held office hours every week and tracked adoption per team on a public dashboard.
03
Process
Fourteen months, with a release every two weeks. The system grew from the components teams asked for first.
Fig. 01 · Inventory wall, one column per product.
Fig. 02 · Table component with its density settings.
04
Results
92%
New screens built with the system after one year
3×
Faster to ship a standard settings page
38
Patterns, down from 1,400 one-off components
A year after the first release, 92 percent of new screens across the four products used Plinth. A standard settings page went from three weeks of work to one. The billing team retired its own library without being asked, which was the real test.
Our engineers adopted Plinth because it was faster than not using it. That is entirely Noa’s doing.
Clara Weiss
VP Engineering, Plinth
05
Reflection
Documentation came too late. For six months the components lived in Figma and code, and the reasons behind them lived in my head. Writing the guidelines alongside the first components would have made the system less dependent on me.
Fig. 03 · Color, type and spacing tokens.
Fig. 04 · The same table in the leasing and billing products.
(Next) Project 05
Analytics,
2022
Mosaik Reports
Self-serve reporting for retail teams, without a data analyst
Read case study →
