Exem UI — Unifying internal products with a design library

Different structures and component rules created inconsistent experiences and rising maintenance costs. A shared system was needed to preserve consistency as products expanded.

The system was designed as a production library, aligning implementation with each engineering team and the React and Tailwind stack used by the products.

Component props, variable names, and states were defined with engineers so design and implementation could share the same language.

Nested instances, instance swaps, and slots made components reusable across contexts while keeping composition fast and consistent.

Semantic tokens and Figma Variables support light and dark themes, while opacity-based elevation preserves a consistent layer hierarchy.

Clear shared guidance lets new designers and product teams contribute consistently without relying on one person's intuition.

The Exem UI site documents design and development elements, usage, and change history in one shared reference.

An interactive playground and usage guidance explain not only component specs but also behavior and real product context.

Ownership, communication, and contribution processes keep the system improving without dependence on a single person or team.

CLI installation and connected guidelines help LLM tools understand and apply the library to products, documents, and internal tools.

Applying the library and guidance in Claude Code enabled an internal product to move from planning to implementation in three weeks.

Aligning product teams around shared standards turned the project from a UI library into a structural improvement to how the organization works.