What is a safe area? How do I use it?

The safe areas within our PSD templates help designers ensure their design works on multiple devices with multiple screen resolutions. 

The safe area is marked on the PSD with a yellow border. This layer is only a guide for designers and should be hidden before exporting and using the Wizard. 

For example;

• An iPhone 5 has a 320 pixel width resolution.
• An iPhone 6 has a 375 pixel width resolution.
• An iPhone 6 Plus has a 414 pixel width resolution.

Your safe area will always sit centred. This means you should put content that needs to be visible within the 320px safe area and have background content around it. 

Of course, as with any Playground build you're able to customise this if you're comfortable with media queries and advanced CSS techniques.