Exem UI — Bringing products together with a shared design library

Each product had its own layouts and component conventions, making the experience inconsistent and maintenance more costly. We needed shared standards that could hold up as the products grew.

I worked with each engineering team to align the library with how their products were built, including React and Tailwind. The system needed to work in production as well as in design files.

I defined component props, variable names, and states with engineers so the design library and code followed the same structure.

Nested instances, instance swaps, and slots let designers build for different contexts with fewer components while keeping screens consistent.

Semantic color tokens and Figma variables support both themes. Opacity-based elevation gives layers a consistent visual hierarchy.

I documented shared criteria so new designers and teams across products could contribute to the system consistently.

I built the Exem UI documentation site to bring design components, code, usage guidance, and release history into one place.

An interactive playground lets teams change props and states to see how components behave. Usage guides explain where and how to use them.

I defined ownership, permissions, communication, and contribution workflows so the system could evolve without depending on one person.

CLI installation and linked design guidelines give LLM tools the context to use the library, extending the same design language to internal tools and documentation.

Using Exem UI and its guidelines with Claude Code, I took an internal product through planning, design, and development in three weeks, putting the library to a practical test.

I aligned teams with different priorities around shared standards. The work extended beyond individual screens to address recurring inefficiencies across the organization.