A “refined” design system for the specific requirements of Refine components.

Introduction

I designed a unified design system that brought consistency to Refine's product interfaces, while providing a shadcn/ui based alternative for Refine's concept projects.

Canon — a term from fiction for the body of work officially accepted as authoritative within a story's universe — is our adaptation of shadcn/ui, extended to fit Refine's React components. It's the design system's source of truth, in the same sense the word implies.

Implementation

Relying on Tailwind's color palette as the foundation — since it's already battle-tested across countless production interfaces, I started with implementing primitives like typography, spacing variables, and iconography.

I cataloged every attribute each component would need, then grouped components by the general attributes they shared (theme, size, and color). Those general attributes became the backbone of the system — any child component contained in a set of components could inherit the values of these attributes as default.

After that, I assigned component based attributes for the specific requirements of each component (eg. type, state, and hasIcon for the button component).

Application

Here's the button component example for you to experiment with a combination of various attributes. Interact with the button to see its states (hover, focus, and active).

Conclusion

Canon has successfully been implemented in Refine's product interfaces and template projects, providing a consistent and reliable foundation for future development. See it in action below: