NOVA Fluid

The design system for the 21st century

Introducing: NOVA Fluid, a design system that's not only beautiful but also incredibly versatile and customizable. The user feedback is a crucial feature of NOVA Fluid. The shrinking of a pressed button mimics the reality: When you poke an object with you finger, it moves further away from you and therefore becomes slightly smaller. This is a great way to give a user feedback that their action has been registered.



Not enough variables

NOVA Fluid is designed to be highly customizable, allowing developers to easily adjust the look and feel of their applications. The design system includes a wide range of variables that can be modified to suit different needs. However, if you find that the default variables are not enough, you could even add your own custom variables to further enhance the design.

.fluid-btn {
background: var(--accent);
border: none;
color: var(--fg);
padding: 1rem 2rem;
border-radius: var(--radius);
font-size: var(--font-size-sm);
transition: transform 0.1s ease, background 0.3s;
border: var(--border-width) solid var(--border-color);
margin-bottom: 2rem;
}

.fluid-btn:active {
transform: scale(0.95);
}

PDFs

Links to more detailed PDFs:
English
German