Cake slices > Atomic Design

Forget Atomic Design, here’s a delicious alternative to design systems methodology by Dan Mall:

There are two ways to get cake from a grocery store. You can either buy the ingredients to make cake, or you can buy a ready-made cake.

Design system teams generally act like a grocery store and provide either basic ingredients or ready-made cakes. But they don’t always have the resources to provide both. So they start with the ingredients.

This is how I’ve created design systems in the past, by starting with the ingredients (colors, typography, buttons etc). The problem with the ingredients-first approach is that product teams don’t always know how to make good cake. They’ll wing the recipe and hope it tastes good.

By selling cakes instead, you show the deliciousness that’s possible. Since it’s ready-made, teams can quickly start shipping cohesive experiences.

I suggested that my team ship cakes instead of ingredients, and the devs pushed back saying they needed some idea of what ingredients we should be using. So we settled on a hybrid model:

• Ship a set of basic ingredients quickly (and tie them to the design tokens we already have so they can be updated easily)
• Ship simple cakes, and then let other teams grab a slices of that cake

A cake slice is a feature. It’s an independent component that can be slotted into any part of the experience. Like an FAQ section. Product teams can grab slices of different cakes to deliver sweet, customized experiences.

I’m not a fan of shipping features with custom styling that have no connection to the design system. It’s like decorating cake with fondant. Looks ok, but tastes terrible. Using preferred ingredients prevents teams having to play “Is it cake?”