Centri Living Showcase
Turned the system into something the team actually reads. Live component pages, design ops analytics, token maps, docs that derive themselves.
My role · I designed and built the Showcase in React on Vercel, with AI coding tools, as the human-facing output of the registry. Design, engineering and leadership read the same pages.
- 87components, each with its own page
- 2themes: light and dark
- Liveread straight from the registry
A registry no one reads is just a database.
Figma is the design source. Through the Centri ecosystem, every published change reaches the registry already versioned. The Showcase reads that registry directly, so docs, analytics and changelog follow the system without anyone updating them.
Every component, live.
Every component has its own page, built from its latest version in the registry. It explains when to use it and when not to, maps which variant combinations exist, lists the tokens it consumes and breaks down its anatomy. A link opens it in Figma, and its history compares any two versions side by side. It answers the two questions people ask most: what is this component, and how should I use it.
The system, read back to itself.
A view that surfaces how the system is growing. How many components are added over time and in which categories, which ones carry the most props, variants and variables, how each token collection grows, which tokens are shared most and which belong to a single component, and what changed in each library release. It shows where the complexity sits and what deserves attention in the next iteration.
Every token, opened in detail.
Any token in the system opens up and explains itself: where it comes from, which other tokens lean on it, which components are consuming it and how it resolves in each mode. Tokens nobody uses any more are flagged. Traceability runs both ways, from a component to its tokens and from a token to the components that use it, so when a design decision moves, you see exactly who it affects before touching anything.
The system, in chronological order.
Every publication in the system is recorded with its level of impact, its context and the exact detail of what changed. Tokens and components carry their own history, ordered and filterable, so anyone can read the evolution of the system without opening Figma: what was added, what was adjusted, what was retired and why it matters.
The Showcase doesn't decide version numbers; it reads them. Each version arrives from Nexus already classed as patch, minor or major (how that works is in the ecosystem case study).
The primitives, with their own documentation.
The primitives that hold the system together (colour, typography, spacing, surfaces, gradients and icons) come with their own documentation, built from the same token files the product ships. Every token shows up in context, with its real value, in every mode, ready to copy. It is not a separate manual that someone has to keep alive: it is the system documenting itself, so when a decision shifts or disappears, the docs follow on their own.
The system is finally legible.
The system stops being a promise people take on faith and becomes something anyone can read. Design verifies that its decisions made it into the product, engineering works knowing it is implementing the right version and leadership reads the system's health without having to ask for it. The conversation shifts: you no longer argue about what is deployed, you argue about what to do next.
The system is the documentation.
The showcase is the evidence.