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!
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.
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.
- which optional elements are included
- how many orders they can appear in
- 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.
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?!?!?! 🤩
Yeah… The numbers kept growing and growing, but for reliance, I’m only adding two version + their versions with buttons.
Example:
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 >>