Design system: the case of cards

2022

I don’t want to bore you with details of how I designed a button component with 312 variants for a SaaS application. Instead, here is a case about a card component to illustrate the process of creating a design system, which can also be read as a recipe for designing a dashboard page.

Let there be card

Not that easy. But not that difficult either if you already have your colors, spacing, icons and typographic styles in place. Using only those, a title, a button, and a chip component can easily be created. Compose these components into a formulaic slot-based auto-layout with interaction states and dynamic content, and voila, you have a card component. Change the variants of the title, button and chip components to adapt the card to particular needs.

Ways to browse cards

Next up, define spacing rules in which the cards will be listed or composed to make up a catalog component. Depending on the expected number of cards and indexibility of the information in the cards, add modifiers to your list such as search and filters. To do that, I borrow the table-modifier component from our datatables.

Dashboard page layout

Now that we have multiple ways to browse cards, a.k.a catalog variants, we can combine them in various ways to create a page layout. In my case, I used two catalog variants and created a dashboard page.