Lilacpane01 / Three background types, three jobs
| Type | Good for | Watch out for |
|---|---|---|
| Solid color | Feature explanations, help docs, quiet presentation | High saturation competes with the interface for attention |
| Gradient | Product page hero images, social posts, depth and atmosphere | Keep the hue span small: two neighbouring hues beat three distant ones |
| Photo | Usage scenarios, lifestyle products | Lower brightness or add an overlay or text becomes unreadable |
There is only one test: does the background make the interface easier to see? If not, choose something quieter.
02 / Follow the brand, do not copy it
Deriving your background from brand colors keeps the set consistent with your product page and site. But flooding the canvas with your primary brand color usually backfires — a highly saturated background pushes the interface back.
What tends to work:
- Desaturate the brand color for large areas and keep the saturated version for accents
- Use darker or lighter variants of the brand color for depth, giving a clear edge between frame and background
- Gradient between two brand colors — more sense of space without introducing a new hue
03 / Legibility is a hard floor
However good the background looks, unreadable text fails. Practical habits:
- Keep strong luminance separation: dark text on light, light text on dark
- On photo backgrounds, a semi-transparent overlay beats a text outline
- Never place text across a high-contrast background edge, such as a light-dark boundary
- Small type needs more contrast — increase size rather than reducing contrast
04 / One background system across the whole set
Ten screenshots with ten background colors look like ten products. Three common ways to unify:
- One background everywhere — safest and strongest series feel.
- The same gradient at different angles or depths — rhythm without scattering.
- Group by content: one palette for feature shots, one for scenario shots, consistent within each group.
The third is the easiest to lose control of. Without a clear grouping logic, the first two are less work.
05 / Handling dark interfaces
If your app ships a dark interface, a light background makes the frame feel abrupt — the contrast between screen and background is too strong and the edges look hard.
Use a mid-to-low luminance background so there is some transition around the frame. The reverse holds too: a pure black background behind a white interface feels jarring.
FAQ
Can the background be white?
Yes, and it is quite safe in the App Store — a white background blends with the product page and avoids visual breaks. The downside is distinctiveness: if every competitor uses white, your images blend into the list.
What gradient angle works best?
There is no universal answer, but a top-to-bottom vertical gradient is the safest because it follows visual weight; diagonal gradients feel more dynamic. Either way, keep the hue span small or you get muddy bands.
Can I use a photo as the background?
Yes, but always add an overlay or lower the brightness. Photo luminance is unpredictable and text placed directly on it will be unreadable somewhere. Darken first, then add text.
Can one set mix solid and gradient backgrounds?
Technically yes, but visually it scatters. If you must, group by content: one background type per group, and vary between groups.
