Opera ONE DESIGN GUIDE EXT.Ver.

Q2-2024 ©OPERA 2024

Opera ONE DESIGN GUIDE OUr Mission ©OPERA 2024

Logo
Logo

Clear Space

Wordmark Representation

Combined Logo

Partnership Lockup
Opera ONE DESIGN GUIDE OUr Mission ©OPERA 2024

Icon

Inventory

Product Icon

Utility Icon

Expressive Icon

Characteristic Characteristic Characteristic

Skeuomorphic 3D

Flat Red

Black or White

Use cas Use cas Use cas

The Opera icon has three Associated with the 
 UI Element and icon set The most stylized variatio
variations depending on the main Opera brandin Works in small scal Used for attractive and loud
situation it will be used i Product logo for our 
 Retaining recognizable 
 marketing purposes
flagship products red brandin
Product Ico Opcom Logo
Utility Ico
Expressive
Opera ONE DESIGN GUIDE OUr Mission ©OPERA 2024

Product

Logo

Product Icon

Characteristic
Skeuomorphic 3D

Use cas
Associated with the 

main Opera brandin
Product logo for our 

flagship products
Opera ONE DESIGN GUIDE OUr Mission ©OPERA 2024

Opera One

Logo

Utility Icon

Use cas
UI Element and icon set
Works in small scal
Retaining recognizable red
brandin
Opcom Logo
Opera ONE DESIGN GUIDE OUr Mission ©OPERA 2024

Expressive

Logo

Expressive Icon

Start Page Pinterest Figma Behance Apartment in Barce Condo in Barcelona Apartment in Barce

Start Page

Search the web

Characteristic Medium Twitch Reddit Twitter

Black or White

Airbnb Youtube Netflix Add a site

Use cas
The most stylized variatio
Used for attractive and loud
marketing purposes Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.
Opera ONE DESIGN GUIDE OUr Mission ©OPERA 2024

Clear
Y Y

space Y

X
Opera’s logo consists of two
elements, the icon and the Y Y
logotype.

Minimum size
X = 50% Icon height

Y = 25% Icon height Y Y
Digital: 25px wide

Print: 1 cm wide

Do not change the size relation

between icon and logotype. X X

There must always be sufficient space surrounding 


the Opera logo to avoid competition with other 

visual elements and to maintain its visual impact.

The recommended clear space is relative to the logo

size and is equal to 25% (Y) and 50% (X) of the icon. X r X
Allow at least this amount of clear space so that it
gives the logo clarity.
Opera ONE DESIGN GUIDE OUr Mission ©OPERA 2024

Wordmark

Representation

Opera One OPERA ONE

As a product line and brand extension of Opera’s, 


it is important to follow naming conventions and
guidelines to maintain consistency and cohesiveness
O1 Opera 1

across all facets of the brand. Outside of paragraph

text, written as “Opera One”, the following variations
depict allowed/disallowed alternatives in our graphic
designs and brand visuals.
Opera ONE DESIGN GUIDE OUr Mission ©OPERA 2024

Partnership
Lockup
PARTNER

Opera is often branded together with one of our

partners in all kinds of communication: social
Baseline
PARTNER
media, print, packaging, etc. As with the rest of
the identity channels, it’s important that the brand 50% Icon Width

is handled properly in these channels.

Each case will be unique based on the partners

logo, but the illustrated baseline gives a solid
anchor point for visual balance
Opera ONE DESIGN GUIDE The Redesign ©OPERA 2024

Opera ONe,

The Redesign

User Interface Dark

User Interface Light

Opera ONE The Redesign User Interface ©OPERA 2024

Start Page

vpn Enter search or web address

Search the web

Medium Twitch Reddit Twitter

Airbnb Youtube Netflix Add a site

Start Page / Light mode / 2024 q1 MAC Version

Opera ONE The Redesign User Interface ©OPERA 2024

Start Page

vpn Enter search or web address

Search the web

Medium Twitch Reddit Twitter

Airbnb Youtube Netflix Add a site

Start Page / Dark mode / 2024 q1 MAC Version

Opera ONE DESIGN GUIDE Color and Gradients ©OPERA 2024

Colors And
Gradients
Colors Use

Palette and Ratio

Gradient USE

Gradient Styles
Opera ONE Colors and Gradients Color Use ©OPERA 2024

Color Use

Start Page
Timeless, Expressive

Introducing the new color guidelines for

Opera One's visual identity, which artfully
combine the simplicity and high contrast of
black and white with a vibrant, expressive
color palette.

This thoughtful fusion of hues ensures a

striking visual impact while maintaining a
clean and modern aesthetic.

Additionally, the inclusion of fluid, organic

gradients imbues the design with a sense of
emotion, adding depth and dynamism to
the overall brand experience. The new
Opera One color guidelines exemplify a
balance of clarity, emotion, and visual
appeal.
 Opera ONE Colors and Gradients Palette and ratio ©OPERA 2024

Gradient

Island
RGB 78 35 247

Blue HEX 4E23F7

Canyon
RGB 223 78 96
Oasis
RGB 236 141 84

Coral HEX DF4E60 Orange HEX EC8D54

Archipelago
RGB 94 191 152
Plateau
RGB 237 197 125

Avocado HEX 5EBF98 Primrose HEX EDC57D

Summit
RGB 49 120 240
Fjord
RGB 75 231 221

Saphire HEX 3178F0 Azure HEX 4BE7DD

Primary
RGB 255 255 255
Primary
RGB 0 0 0
Peninsula
RGB 168 121 218
Parasol
RGB 254 121 222

White HEX FFFFFF Black HEX 000000 Purple HEX A879DA Pink HEX FE79DE
Opera ONE Colors and Gradients Defaults ©OPERA 2024

Defaults

and extended

Gradient

While the new identity provides an extensive range of

colors and gradient palettes to delve into, in case of
uncertainty, we can always rely on the primary set.
Island
RGB 78 35 247

Blue HEX 4E23F7

Opera ONE Colors and Gradients Gradients ©OPERA 2024

Gradients

A fresh addition to Opera's identity, O1 features

bespoke textured gradients, infusing an organic,
nonlinear dynamism to our look and feel.
Opera ONE Colors and Gradients Frequency ©OPERA 2024

High
Low

Frequency Frequency
FOREGROUND

Background

Big, bold, attention 
 to embellish and

grabbing graphics focus on content

Opera ONE Colors and Gradients Grain ©OPERA 2024

A guide
for Grain

To enhance the tactile sensation and incorporate 


an additional dimension of texture and tangibility 

to our fluid gradients, we introduce a delicate yet
discernible layer of grain. The subsequent slide will
aid in determining the optimal range for application.
Opera ONE Colors and Gradients Grain ©OPERA 2024

Too
Just
Too

little Right much

Opera ONE Colors and Gradients High Frequency ©OPERA 2024
Opera ONE Colors and Gradients Low Frequency ©OPERA 2024
Opera ONE DESIGN GUIDE Typography ©OPERA 2024

Typography
Typefaces

Primary Font

Secondary Font

Styles and hierarchy

Opera ONE Typography Typefaces ©OPERA 2024

Typefaces

We use Be Vietnam Pro as primary font for text

setting throughout the branding. The typeface 

is a Neo Grotesk that embodies visual clarity 

and simplicity, which are synonymous with 

the attributes of Opera One.

The family has 18 styles available but we

primarily stick to regular, bold, or black.

Space Mono, regular, is used as the secondary

font and is used sparsely as both a contrast
ingredient, and for utility such as headers 

and footnotes.

The typesetting and layout resemble a feeling 


of neatly stacking and organizing elements into
defined spaces. Our headlines are tightly set 

in capitals, negative letter spacing and leading. Be Vietnam Pro
Space Mono, Regular - We use typography that stands out and
works perfectly in contrast with the colorful imagery. Our
The subheading and the body styles are more
open for readability and legibility. Black Bold Regular typography is strong - powerful yet playful - and never
boring or conservative.
Opera ONE Typography Typefaces/Primary/H1 ©OPERA 2024

ABCDEFGHIJKLM

NOPQRSTUVWXYZ

0123456789
Be Vietnam Pro

Black or BOLD, All-caps

Opera ONE Typography Typefaces/Secondary ©OPERA 2024

abcdefghijklm

nopqrstuvwxyz

0123456789
Space Mono

REGULAR OR ALL-CAPS
Opera ONE Typography Styles and Hierarchy ©OPERA 2024

Styles
and

hierarchy

H1 COPY TEXT

To be used for short form 
 To be used for long 
 Lorem ipsum dolor sit amet, consectetur 

or titles for print and web.

browse with 
 and flowing text.

adipiscing elit. Nulla dolor ex, vestibulum ut 


facilisis ut, auctor quis nunc. Phasellus felis ex, 

Font: Be Vietnam Pro
Font: Be Vietnam Pro

intelligent

placerat nec egestas id.

Weight: Black
Weight: Regular

Case: All-caps
Case: Sentence

Leading: 95% Leading: 125%%

Tab Islands.

H2 DETAILS

To be used for short form 
 Used as the secondary font. 
 Lorem ipsum dolor sit amet, consectetur adipiscing

or titles for print and web.

With tab grouping A contrast ingredient, and 

elit. Nulla dolor ex, vestibulum ut facilisis ut,
auctor quis nunc. Phasellus felis ex, placerat nec
egestas id, sollicitudin vel metus. Fusce sed dui eget
In support of H1.

for utility such as headers 


system ensures that
sem porttitor facilisis vitae non lacus.

and footnotes.

Font: Be Vietnam Pro

Weight: Regular or Bold

everything is easy to Font: Space Mono

Case: Caps or Sentence

Weight: Regular

Leading: 110% find and access. Case: Caps or Sentence

Leading: 110%
Opera ONE DESIGN GUIDE Photography ©OPERA 2024

Photography

Visual Tonality

Samples
Opera ONE Photography Visual Tonality ©OPERA 2024

Visual

Tonality
With our photography, we aim to find the exact balance
we found in our graphic design. A near-future aesthetic
that blends the new with the familiar, both in terms of
how people relate to Opera and as an art direction.
To achieve this, we evolved our current style, starting with our
new colors and introducing more infinite backdrop styles,
atmospheric elements like slight film grain, and subtle hints of
ambient colored lighting while retaining natural skin tones.
Opera ONE Photography Visual Tonality ©OPERA 2024
Opera ONE Photography Visual Tonality ©OPERA 2024
Opera ONE DESIGN GUIDE In Situ ©OPERA 2024

In Situ

Examples
Opera ONE Visual Communication Attract Graphic ©OPERA 2024
Opera ONE Visual Communication Attract Graphic ©OPERA 2024
Opera ONE Visual Communication Introduce ©OPERA 2024
Opera ONE DESIGN GUIDE THANK YOU ©OPERA 2023

If you have brand related questions or inquiries regarding 
 DISCLAIMER

These guidelines govern your marketing and promotion of products and services that
include an Opera Brand Asset. The statements contained herein are for illustrative
the Opera design guidelines or how to best communicate 
 purposes only. You are encouraged to contact Opera or refer to the governing
agreement authorizing your use of an Opera Brand Asset for further information.
and represent Opera, please reach out to the design team.

Opera reserves the right to revise these guidelines at any time. Any modified
guidelines will be published on the Opera website.

TRADEMARKS

Opera’s trademarks, service marks, and logos (“Brand Assets”) are valuable
properties. These guidelines apply to the authorized use of Opera Brand Assets by
Patrick Huertas, Art Director
Opera’s employees, agents, partners, independent contractors and any third party
making reference to Opera or any of its products or services. These guidelines must
[email protected]

be followed in order to properly identify Opera’s brand names for its products and
services, and to protect and enhance their value and strength. You may not use an
Opera Brand Asset without express, written permission from Opera.

Opera reserves the right to revise these guidelines at any time. It is your
Jakub Saniewski, Lead Product Designer
responsibility as a user of an Opera Brand Asset to ensure compliance with the up-
to-date guidelines published on the Opera website.

[email protected] EXTERNAL VERSION Q2 2024

All rights reserved © Opera Norway AS 2024