The Overlay can be turned off using this button in the toolbar in the designer:
The overlay serves a few purposes. The ruler on the overlay gives you a relative positioning based upon the number of pixels. There are 300 pixels to an inch, so 300 pixels from the left would be 1 inch from the left. There is also a rolling co-ordinate system in the upper left corner that changes as you move your mouse to give you more precision in knowing where a position is.
The pink area will be cut off from your design, it is called the bleed zone. The bleed zone width is an industry standard is 1/8" or 3mm or 37 pixels.
The red line is the trim line, which is where the design is expected to be cut. Everything outside of the trim line is bleed, and everything inside is considered content.
The dotted blue line is the start of the safe zone. Everything inside the safe zone should be safe from being cut, and thus all important icons and text should be inside the safe zone. The safe zone is 1/8" away from the trim line or 1/4" away from the edge of the image.