# UI Framework using neumorphism

**URL:** <https://forum.inductiveautomation.com/t/ui-framework-using-neumorphism/76986>\
**Category:** Maker\
**Tags:** perspective\
**Created:** [July 27, 2023, 3:54am UTC](https://forum.inductiveautomation.com/t/ui-framework-using-neumorphism/76986 "2023-07-27T03:54:03Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![twittyfarms](https://avatars.discourse-cdn.com/v4/letter/t/ee59a6/32.png) [@twittyfarms](https://forum.inductiveautomation.com/u/twittyfarms)\
**Post date:** [July 27, 2023, 3:54am UTC](https://forum.inductiveautomation.com/t/ui-framework-using-neumorphism/76986/1 "2023-07-27T03:54:03Z")

</div>

Hey there, I haven't posted in a few years. Something I am curious about.  
I have seen this in a few places and didn't know the terminology to discuss it.  
Its a UI design called neumorphism. I think it would be neat to see an ignition project built on this pattern.  
Its not necessarily "high performance" but I can see some vendors incorporating it into their design strategies. I am sorry to say it but it feels more "friendly" and dare I say....Fisher Price. It also reminds me of AI art. Its kind of off topic of any problem so I am not expecting a huge response. So to frame this in more of a how to related question. How would I make a perspective app in maker based on this library : [ui-neumorphism](https://akaspanion.github.io/ui-neumorphism/)

Disclaimer-- with this framework being more visually user friendly; my wife is way more likely to use something I create for " Home Use".....

---

<div class="post-metadata">

**Author:** ![andrew.budaiev](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/andrew.budaiev/32/72921_2.png) [@andrew.budaiev](https://forum.inductiveautomation.com/u/andrew.budaiev)\
**Post date:** [July 27, 2023, 5:00am UTC](https://forum.inductiveautomation.com/t/ui-framework-using-neumorphism/76986/2 "2023-07-27T05:00:43Z")

</div>

Looks like you just need to blur some shadows and you are all set

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [July 27, 2023, 5:53am UTC](https://forum.inductiveautomation.com/t/ui-framework-using-neumorphism/76986/3 "2023-07-27T05:53:58Z")

</div>

I'm not a fan of that library, something like this looks ok though (to me - still a bit over shadowy though):

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/1/e1b2f9b03bf1cb6084543c29945c30a78b1d1a0d.jpeg)

It wouldn't be too hard to make a bunch of Perspective Styles to style your components like this 🤷‍♂️

What would take more time, at least for me, is if you wanted to have animations on things

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [July 27, 2023, 6:57am UTC](https://forum.inductiveautomation.com/t/ui-framework-using-neumorphism/76986/4 "2023-07-27T06:57:38Z")

</div>

its not to hard to copy some of the styles into the stylesheet. you'll just have to change the selectors to match the ignition ones

---

<div class="post-metadata">

**Author:** ![twittyfarms](https://avatars.discourse-cdn.com/v4/letter/t/ee59a6/32.png) [@twittyfarms](https://forum.inductiveautomation.com/u/twittyfarms)\
**Post date:** [February 20, 2024, 2:00am UTC](https://forum.inductiveautomation.com/t/ui-framework-using-neumorphism/76986/5 "2024-02-20T02:00:53Z")

</div>

Anyone using the new office 365? How about has anyone seen the show on Netflix called"paradise"?? I'm noticing more of the neumorphism UI design in the wild ....