Learning to style elements in the right way will help you urge or push the user to the right place in an interface. These are 5 concepts that when used, can make elements stand out or take the backseat, consider:

• Size: how large or small elements are
• Layout: placement of elements inside a view
• Spacing: distance between elements
• Color: rgb, hex, hsl, or other respresentations of digital pigment
• Contrast: difference between lightness and darkness on near elements

Several of these elements have their own modules on UI Foundations, because each has specific applications of how visual importance can be impacted.

Think of each concept like a slider or lever on an audio mixing board that can be adjusted up or down, either increasing or decreasing the importance of an element (instead of volume).

Each slider on the design mixing board is tied to a strategy for controlling visual importance, and like an audio engineer, the best ones will move those sliders down more often than up.

Most elements that you add onto a page without any styles applied, like a <button> or a <p> tag, would sit somewhere in the middle on that imaginary scale.

For each slider, adjusting up would increase the visual importance, and adjusting down would decrease it. You could think of increasing visual importance like elevating something in the visual hierarchy.

Thoughout the next lessons in this module we'll start with a component that sits somewhere right in the middle on each of these scales, and tweak elements up and down to draw out the information that matters, and give less relevance to the parts that don't.