1. The ten styles
Bento grid, minimalism, neumorphism, claymorphism, skeuomorphism, glassmorphism, liquid glass, brutalism, maximalism and spatial UI. Each one on its own, using the same small interface: tiles, buttons, a search box and a switch.
2. Every pair
All 45 pairs side by side. Select a pair to open it in the mixer.
3. Mix your own
Switch styles on and off. There are 1,023 combinations. The score is my own rough judgement of legibility, accessibility, speed and fit for a portfolio site, with penalties for styles that fight each other.
Highest-scoring plain mixes
4. The final mix: fusion
Layering all ten everywhere makes them fight (the mixer shows the penalties). So the final design gives each style a different job. This is what the whole site uses, and what you see when you press “The final mix”.
| Part of the interface | Style | Why |
|---|---|---|
| Page layout | Bento grid | Tiles of different sizes make a busy page easy to scan. |
| Spacing and type | Minimalism | Space and plain type keep the content first. |
| Panels, cards and dialogs | Liquid glass and glass | Depth and shine without hiding the text behind them. |
| Buttons | Claymorphism | Soft, pressable shapes that are easy to hit on a phone. |
| Search boxes and fields | Neumorphism | Inset fields read as places to type. A visible border is kept for contrast. |
| Theme and search switches | Skeuomorphism | Metal buttons look physical and are hard to miss. |
| Labels and tags | Brutalism | Hard-edged labels stand out against the soft surfaces. |
| Hero and page background | Maximalism | One loud, colourful area. Everywhere else stays calm. |
| Sample deck and tiles | Spatial UI | Tilt and depth make the screenshots feel like objects. |
Anyone who prefers less decoration gets solid surfaces automatically. That covers the reduced transparency and higher contrast settings.