Hi everyone! 
When I was first getting into Firefox theme design, one of the biggest challenges I faced was understanding what parts of the 3000x200px background image are actually visible—especially across different screen sizes and resolutions.
To help new (and even experienced!) theme creators, I created a clean, professional SVG template that marks:
Horizontal Safe Zone – the rightmost 1920px (what’s visible on most 1920×1080 screens)
Vertical Safe Zone – the top 70px (not covered by the tab bar or toolbars)
Combined Safe Zone – where you should place all important design elements like characters, logos, or text
Download the ZIP file with the SVG template:
firefox_theme_affinity_starter.zip
It’s ideal for:
- Affinity Designer / Photo users
- Photoshop or Illustrator users
- Anyone looking for an accurate placement guide
Pastel colors keep it easy on the eyes, and all pixel positions (0 px, 1080 px, 3000 px, 70 px) are clearly labeled with non-overlapping text.
I hope this saves others the trial-and-error I went through. Feel free to improve or remix it!
—Vic 