Foundations

2 Nova Design System uses a color system to guide our users, create a branded look-and-feel, draw attention to important information, and make content more accessible for everyone.

Elevation is the relative distance between two surfaces along the z-axis.

Icons are visual representations of commands, devices, directories, or common actions. Nova icons are simple and informative. Each icon builds on the visual language of the design system.

Just like your color scale, working from a defined spacing system allows you to work faster and more consistently. Consistent and scalable spacing helps you eliminate guesswork whilst designing and developing because you're designing with a limited set of options..

Nova Design System’s parts are themable using CSS Custom Properties. We ship pre-made themes for dark and light mode while trying to meet accessibility standards for color contrast.

Picking the perfect font is never easy. When choosing the right font for a user interface poses some unique challenges, here’s what to look for in a font for your UI: a font that performs well across contexts and devices. A face that looks just as pretty set at 72px as it does at 10px.