Applying permutations to UX Design Systems

Part of The Strategic Solutions Design Process

Shared under the: Limited Presentation License: UX Design Process >> license

A while ago I was struggling really badly with making feature variants…

And I am not talking about Normal — Success — Failure — Warning components.

I am talking about the different ways in which I could make a single card.

While applying permutations!

Placeholder

At first, while I was designing one of my UX Design System Families — Aurea Grid, I was only able to mentally map about 15 layout options.

Why that happened:

  • I was thinking in design patterns, not permutations
  • I was grouping layouts that felt the same visually
  • I unconsciously ignored ordering as a multiplier

The Realization

Then I realized something felt off…

  • Images must always be present
  • Other elements can appear or not
  • And order actually matters

    • Once order matters, the count explodes. And intuition stops working.

Placeholder

Why my intuition failed here

My brain was counting ingredients, not arrangements.

For example

Image + Title + Body feels like one idea

But mathematically:

  • Image → Title → Body
  • Title → Image → Body
  • Title → Body → Image

These are three different configurations

Switching to a math / statistics approach

I remembered seeing a similar constraint problem in college — where one variable is mandatory and the rest are optional.

And that was the key insight:

  • One fixed element
  • Subset permutations
  • Order matters

This is not trial-and-error territory anymore — it’s combinatorics!!!

The equation

I remembered seeing a similar constraint problem in college — where one variable is mandatory and the rest are optional.

For each possible layout size, I count.

  1. which optional elements are included
  2. how many orders they can appear in
  3. and where Images can be placed.

k=k1nk P(n-1, k-1)

n = 4 components total

k = how many components appear in the layout

The rest is about counting orderings

Image only → 1
Image + 1 thing → 6
Image + 2 things → 18
Image + everything → 24
Total → 49

After counting it correctly, there are 49 valid permutations

  • This does NOT mean I needed 49 designs
  • It means 49 configurations are possible
  • I can choose how many I’d want to support

The mistake wasn’t bad math — it was assuming intuition works when order matters.

Once order matters, I needed combinatorics, not guessing. And I am loving how this looks!

A card example from Aurea Grid is shown to the right.

Placeholder

AND!!!

Within these 49 permutations there can be more options! What if they are lined? Are the components going to be normal/”floating”? Are they going to be overlays? Would the have certain design styles like neobrutalism? — if so… how many design variations can I make from it?! How many options could I design?!?!?! 🤩

Placeholder

Yeah… The numbers kept growing and growing, but for reliance, I’m only adding two version + their versions with buttons.

Example:

Placeholder

There’s currently 7 Strategic Solutions added based on this UX Design System Family — Aurea Grid, more are currently being refined.

For more information and screenshots, please see Design System Families >>

Placeholder