Keylines are imaginary lines that help align elements that are placed outside of the layout grid. They also allow designers to determine the distance between elements from the edge of the screen.

Keylines are vital for keeping your content balanced, especially among different types of neighboring elements, such as a profile picture and text accompanying it.