Alright, this one started as a couple of bookmarks… and then somehow turned into a tiny design museum I built in my browser at 1:47am.
I kept seeing these words everywhere, glassmorphism, neubrutalism, claymorphism and my brain did that thing where it nods confidently while understanding absolutely nothing. So instead of reading another “Top UI Trends” post, I did what usually works for me:
I opened an empty HTML file and started breaking things until the vibes made sense.
Whats is this "ism" thing?
In the context of design and art, adding "-ism" to the end of a word turns a specific technique or philosophy into a distinct movement or category. In the digital design world, new trends pop up every few years. To make them easier to discuss, designers give them a name ending in "-ism" (or "-morphism" for form/shape).
This post is that experiment.
Not definitions-from-a-podium, but touch it, poke it, feel why it feels that way.
We’re going to build tiny ui element per design style, tweak a couple of properties, and watch the personality change in real time.
Think of it like switching CSS environments and noticing how your app’s mood changes.
Design styles aren’t decorations.
They’re constraint systems — opinions about depth, hierarchy, feedback, and affordances.
So instead of talking about styles abstractly, I built the same small UI six times.
Same intent. Same structure.
Different rules.
Glassmorphism — UI as atmosphere
Glassmorphism works when the interface feels like a layer, not a surface.
It only works if there’s something behind it. Otherwise, it’s just a semi-transparent rectangle having an identity crisis.
The moment contrast drops too far or blur gets lazy, the UI collapses into fog.
The real levers here are:
- opacity
- background blur
- tint color
- stroke strength
🧠 Mental model: glassmorphism is like a variable that never quite resolves, it always depends on context.
🧰 Tool to use: https://hype4.academy/tools/glassmorphism-generator
Neumorphism / skeuomorphism — memory as affordance
Skeuomorphism doesn’t want you to learn the interface.
It wants your muscle memory from real life.
It’s about borrowing trust from physical experience.
Textures. Shadows. Materials. Stuff that looks touchable even when it’s not, all doing one job:
“You’ve used something like this before.”
What to notice
If the shadows don’t imply weight, the illusion breaks.
Skeuomorphism fails quietly, it just starts feeling fake.
🧠 Mental model: skeuomorphism is backwards compatibility for humans.
🧰 Tool to use: https://neumorphism.io
Neobrutalism - clarity through aggression
Neobrutalism has no interest in being polite.
Hard edges.
Bold colors.
Zero blur.
Drop shadows that refuse to be subtle.
The goal isn’t beauty.
It’s unambiguous intent.
Controls here focus on:
- shadow offset
- border thickness
- contrast
What to notice
Remove the shadow and everything flattens into ambiguity.
Neobrutalism lives or dies by separation.
🧠 Mental model: neobrutalism is like skipping abstraction layers and talking straight to the hardware.
🧰Tool: https://www.neobrutalism.dev/
Claymorphism - volume-first UI
Claymorphism feels like neumorphism that discovered depth sliders and never looked back.
Everything feels inflated.
Heavy.
Touchable.
The best explanation I’ve found:
Inflate neumorphism until it becomes adorable.
The real controls:
- corner radius
- vertical lift
What to notice
Lower the lift too much and the UI loses authority.
Clay needs weight to feel believable.
🧠 Mental model: claymorphism is depth without sharpness — like rendering UI in a softer physics engine.
🧰 Tool to use: https://hype4.academy/tools/claymorphism-generator
Minimalism - hierarchy without decoration
Minimalism isn’t about removing things.
It’s about removing excuses.
When borders, colors, and shadows disappear,
spacing becomes your strongest primitive.
There’s only one honest control here:
- spacing
What to notice
If spacing becomes arbitrary, hierarchy collapses instantly.
Minimalism is unforgiving, which is why it’s powerful.
🧠 Mental model: minimalism is aggressive refactoring of UI.
Terminalism (I made this up my self) information over comfort
Terminal-style UI isn’t cosplay.
It’s what happens when the interface stops trying to be friendly and starts trying to be honest.
This style assumes a few things up front:
- the user cares more about state than aesthetics
- density is a feature, not a bug
- text is the interface
There’s no depth here. No illusion of touch.
Everything is explicit, linear, and slightly uncomfortable, on purpose.
The constraints are brutal but clarifying:
- monospace typography
- limited color palette
- visible focus
- zero decoration that doesn’t carry meaning
When people say “this feels like a real tool”, this is usually what they mean.
The only real levers you get are:
- density (line height + spacing)
- contrast (readability vs eye strain)
Push either too far and the UI becomes unusable.
That tension is the whole lesson.
Why this one earns its place
When you put this next to:
- glassmorphism
- liquid glass
- claymorphism
…the contrast is almost uncomfortable.
And that’s the point.
This style makes something very clear, very fast:
Most interfaces are just structured text wearing expensive clothes.
Terminalisum strips the clothes off and asks whether the structure still holds.
That’s a lesson worth keeping in the set.
The takeaway (this surprised me)
Once you apply the same UI intent to every style,
something interesting happens:
Some styles are generous.
Others are strict.
Some forgive mistakes.
Others amplify them.
Design systems aren’t just visual languages.
They’re behavioral contracts between your UI and your user.
And once you feel that difference in your hands,
no style ever feels like a vibe again.
Where this goes next
This whole article could easily turn into:
- a single playground with a style switcher
- shared HTML + per-style CSS variables
- a repo for learning design systems by breaking them
But even as-is, the lesson sticks:
Real design styles reveal themselves only when you force them to solve real UI problems.
That’s where the truth leaks out.
Top comments (0)