NEX UI Expressive is here!

The final release of NEX UI is here, and this is all you need to know.

NEX UI has evolved into a design system that feels alive, responsive, and deeply personal. It’s no longer just a visual style but a shared design language that will unify all NEX apps under one expressive, intent-driven philosophy.

Let’s dig in, shall we?

Colours

With this release, I’m introducing the all-new NEX Colour Engine, a system that dynamically generates palettes by adapting to contextual parameters, creating colour combinations that are visually rich, balanced, and engaging.

I’ve stripped everything back to the fundamentals of colour theory, then layered it with my own experience, instincts, and a bit of personal magic.

Gradients in NEX UI are no longer static. They now respond not just to the system’s light or dark mode but also to the hue value of the primary colour in use. The NEX Colour Engine takes that input and returns a curated set of colours designed to look balanced, engaging, and harmonious when placed side by side. This technique helps avoid dirty gradients or combinations that don't look good.

Colours are adapted intelligently even in moving gradients, ensuring text visibility.

I will dive deeper into the choices I have made in the creation of the engine in a separate video which will be available to Patreon Premium Members.

Motion

Historically, all the apps I’ve built used simple easing curves for animations. But with the Expressive update, I went back to the basics, the kind you’d learn in a basic classic animation class.

I started exploring principles like squash and stretch, anticipation, and overshoot. Now, even simple UI elements behave with a sense of weight and intent. They make small mistakes, overshoot a little too far, anticipate before a quick move, or stretch just enough before snapping back. It’s subtle, but it makes everything feel a bit more alive, and more importantly a bit more human.

Widgets

New Expressive widgets are here that will be used across different apps.

Buttons

Before I dive into the technical details, it’s important to share how I think about buttons in NEX UI. To me, buttons are no longer just flat targets. They’re now soft, jelly-like objects. You press them, and they deform.

The central part of the button dips slightly inward, casting a subtle shadow. The text or icon inside gets just a bit smaller, because it’s visually moving away from the screen. And since NEX UI treats the your screen as a frosted glass surface, that movement naturally introduces a slight blur, the same way things lose clarity as they move behind real glass.

The goal is to make pressing a button feel tactile, like it has mass and depth. It’s a tiny moment, but it makes the interface feel more physical, more responsive, and more fun.

The design remains the same across desktop and mobile platforms.

The deformation doesn’t happen in isolation. It pushes against other widgets, forcing them to react and shift slightly, as if everything shares the same physical space.

All of this is driven by a variable I call “expressivity.” I know it’s not technically a real word, but I couldn’t think of anything that described it better. I can dial it up or down based on the widget size or context. Larger components get more dramatic motion, while smaller ones stay subtle and grounded.

Segmented Buttons

In basic state it looks like a normal 2D button. But the moment there’s a change or a switch, it takes the expressive route. The selection highlight becomes transparent and lifts off the surface, slightly blurring the button beneath it, as if made of glass. It floats for a moment, then gently descends onto the newly selected option and settles back into a solid highlight. The transition uses the new motion curves I’ve defined, giving it a more organic, lifelike feel. It’s a small moment, but it adds depth and rhythm to an otherwise ordinary interaction.

Stacked Lists

Stacked Lists offer a clean way to present grouped information. The main idea is to enclose multiple related items inside a single, unified container. This is especially useful when dealing with long lists that include nested or parent-child structures. Instead of overwhelming the user with too much at once, items are grouped and revealed only when needed. The transition between enclosed and disclosed states uses the same motion physics as the rest of the expressive system.
There are different variations of this widget depending on the structure and density of content, giving me flexibility to adapt it across different use cases.

Notice how the NEX Colour Engine helps colour the widget with different variations!

Toolbars

App Pages are now accompanied by toolbars which contain important tools/actions. They can smoothly transform among different states.

A toolbar with the default state

The send text sub-state

The file tray sub-state

Built on Google's Material 3 Expressive

NEX UI has always built on top of Google’s Material Design system, adding glassy surfaces and visual polish to create something that feels more modern and personal. With Material 3 Expressive still rolling out across Flutter, NEX UI helps expedite that transition. I’ve started introducing my own expressive widgets and layout methods, ones that embrace the direction Material is heading in, while also blending in blur, depth, and responsive motion.

Disclaimer: Material Design and Flutter are products of Google LLC. NEX UI is an independent design system built using Flutter and is not affiliated with or endorsed by Google.

Roll out and updates

NEX UI Expressive will be released with CrossLink. A wireless cross-platform file sharing and continuity app. It will eventually be available on Evolve, the modern GTK Theme Manager as well as Flance, the personal Finance Manager for Android and Linux.

The complete roll-out plan will be shared through a separate post in the next 24 hrs.

Stay tuned and join in on Patreon as a premium member to be early on the release party 🎉
Trust me, August will be an exciting month!