Opera GX 


wallpaper guidelines

version 0.9
Safe zones
Safe zones are crucial, they ensure that the wallpaper design is presented correctly across
various devices and screen sizes, without any vital elements being cut off or hidden. This, in
turn, guarantees that the design effectively conveys the intended message, and looks visually
appealing, regardless of the device it is viewed on. Essentially, safe zones are necessary to
ensure that the wallpaper design is properly displayed and the viewer can fully appreciate the
visual elements of the design.
 Speed dials width
74px

Top bar
74px

40px
Side bar

16:9 Safe zone

 21:9

21:9 Safe zone

Example
Composition
Composition plays a crucial role in wallpapers since it determines how the visual elements are

arranged to create a design that is not only visually appealing, but also effectively communicates

the intended message or emotion. By arranging the elements in a harmonious and cohesive

manner, a well-composed wallpaper can draw the viewer's attention and evoke different

emotions. Additionally, a well-designed composition can make a wallpaper more memorable,

stand out from other designs, and be more likely to be used and appreciated by viewers.
To prevent overlap with interface details,

the key details and characters should

adhere to this map.

Map of foreground details

Map of foreground details
Colouring
Matching the colours of a wallpaper with the interface colours is important because it creates a
seamless and visually pleasing design that enhances the overall user experience. When the colours of
a wallpaper complement or match the interface colours, it creates a sense of coherence and visual
continuity that can improve the user experience. In contrast, using a wallpaper with clashing colours
can be distracting and detract from the interface overall aesthetics.
 290 px

Gradients

200 px
(additional)
Map of foreground details
 How to take a proper colour for a top gradient

1.

Choose a colours for

your theme

3.

Use taken colour for a gradient

(look previous slide) on your
2.
wallpaper

Take this colour with

a colour picker

P.S: Good to match theme colours

with wallpaper colours
Example
Gradient map

To achieve better integration with the browser interface, you may

use a gradient map for either the foreground or background

(depending on the composition). Here are the recommended

L≈16 L≈28-32
settings for the gradient map

Dark mode: The darkest parts should have a lightness (L) value

of 16 in the HSL system, while lighter parts should have a value

of 28-32

Light mode: The darkest parts should have a lightness value of

32-42, while lighter parts should have a value of 100.

L≈32-42 L≈100
Ensure that the color of the top gradient and gradient map

match.
 Before After Before After

Gradient map intensity example

Themes
Remember to create wallpapers for both the light and dark themes. For optimal
results, you can prepare two images: one for the light theme and another for the
dark theme. You can either use the same image and adjust its colors for each
theme, or create two entirely different images.
 Light Dark

Example
 Light Dark

Example
2023