Colors

Colors are an important part of Otodom’s Visual Identity System. Not only do they awake emotions, but also convey information. Otodom’s color system has a developed color scheme.

Introducing additional colors should be accompanied by establishing their purpose.

Choose right color system

Color specifications vary with the media used, so it is important to use the correct mode for your specific application to achieve your intended values. All colors were described according to the most important color systems.

RGB

digital usage

HEX

digital usage

CMYK

print usage

PANTONE®

print usage

Main color palette

The color palette uses a green-navy color code with an orange accent which develops the visual capabilities of the system. The main color pair is Green and Navy, while Orange is a functional color.

Green

RGB 60/210/120
CMYK 75/00/70/00
HEX 3cd278
Pantone® 3395C

Navy

RGB 28 / 38 / 55

CMYK 65 / 45 / 00 / 80

HEX 1c2637

Pantone® 2766 C

Orange

RGB 255 / 120 / 65

CMYK 00 / 60 / 75 / 00

HEX ff7841

Pantone® 165 C

Coral

RGB 236 / 100 / 106

CMYK 00 / 70 / 45 / 00

HEX ec646a

Pantone®17-1736

Download files

Last update: 2022-01-26

Additional color palette

The additional colors palette has an exchangeable and supplementing character. The use of these colors shuld always be well thought out and has a specific functionality.

The functional color Orange can be exchanged with other colors from the additional color palette according to the predefined color codes, which are defined on the next slide.

Violet

RGB 150 / 125 / 235

CMYK 55 / 50 / 00 / 00

HEX 967deb

Pantone® 265 C

Blue

RGB 60 / 190 / 210

CMYK 70 / 00 / 20 / 00

HEX 3cbed2

Pantone® 298 C

Yellow

RGB 255 / 210 / 85

CMYK 00 / 15 / 80 / 00

HEX ffd255

Pantone® 1125 C

Download files

Last update: 2022-01-26

Color codes

Here you can see the allowed color combinations and the ways of accents and other details are being colored. The main color pair of Otodom is green on navy in the background and should have a priority. In the supplementing color codes green can be change to the functional or additional colors. They can also be used as accents or emphasis on a detail in context of the main color code.

It is prohibited to mix and match colors in a way different than the one described in this Brandbook. They are described in the lower line.

Typography

Typography is a crucial element of the Visual Identity of the brand. Otodom’s visual identity uses a simple, but characteristic and modern sans serif font - Sora.

Main font: Sora

The font was designed in a way to capture the essence of the digital world, a font family which works well on low resolutions and early on-screen typography. Sora is a great tool for apps and websites, where clarity and effectiveness are important.

The brand identity uses the Regular variant mostly for paragraph and small scale text and Semibold variant which works perfectly in headlines.

Sora Thin

Thin

Sora Light

Regular

Sora Semi-bold

Semi-bold

Sora Bold

Bold

Sora Extra-bold

Extra-bold

Download files

Last update: 2022-01-26

Typographic styles

Here you can see the recommended font sizes which can be used in the digital space.

It can also serve as a base to establish font sizes in print. Prints need to always be checked in terms of readability and the sizes described here are only a recommendations. Choosing the right font sizes depends on readability and information hierarchy.

H1 / Sora Regular + Semi-bold / Size: 72 pt / Line height: 87 pt

Lorem ipsum
dolor sit amet.

H2 / Sora Regular + Semi-bold / Size: 48 pt / Line height: 56 pt

Lorem ipsum dolor
sit amet.

H3 / Sora Regular + Semi-bold / Size: 36 pt / Line height: 44 pt

Lorem ipsum dolor
sit amet.

T1 / Sora Regular + Semi-bold / Size: 24 pt / Line height: 28 pt

Ut non ligula gravida,

commodo libero et,

elementum massa.

T2 / Sora Semi-bold / Size: 16 pt / Line height: 26 pt

• Aliquam non ante sed felis dictum.

• Vestibulum mollis nisi ut dui egestas.

• Sed fringilla ligula eu risus lacinia.

T3 / Sora Semi-bold / Size: 14 pt / Line height: 18 pt

Donec tempor neque facilisis suscipit elementum. Vestibulum pharetra rutrum
odio, at ullamcorper nisi efficitur at. Quisque ac nisi id neque iaculis viverra.

System font: Arial

Whenever a carrier or media has a limited availability of fonts (a Power Point presentation, Microsoft Word document, etc.) it is allowed to use a system font - Arial.

Arial Regular

Regular

Arial Italic

Italic

Arial Bold

Bold

Arial Bold Italic

Bold Italic

Icons

An important elements of Otodom’s brand identity is the way in which th emotions and values are being expressed. The icons support the visual representation.

Icons set the direction in which the brand message is being developed though a symbolic and direct reference to key phrases and headlines.

Download files

Last update: 2022-01-26

Icon style

New icon style is flexible and easy to use. The precedent rule is building the icons out of rounded shapes. These icons can be pictograms, with the meaning shown directly (e.g. category icons) or they can be more symbolic (e.g. the icon of a tree can inform about green spaces or symbolize a lot). They can also convey emotions through abstraction (e.g. heart, star). This icon style should be coherent throughout the set. The rules are set in a flexible way to have an option of creating new icons in the future open.

Category icons

Category icons are more specific, because they convey a more specific information directed at the users of the Otodom on-line service and other entities. The icons are designed in a way, where they clearly define a category.

Additionally the categories use color codes outside of the additional color palette. These colors should only be used for categories and should no be used throughout the brand.

Download files

Last update: 2022-01-26

Backgrounds

Icons and shapes have a direct use in building backgrounds which are commonly used throughout th Visual Identity.

The backgrounds use full color with a cropped shape or icon in a lighter shade of the background color (90-80% saturation).

Download files

Last update: 2022-01-26

Types

A background expresses visual characteristics of the brand and is an inherent brand design tool. Otodom’s Visual Identity offers a set of backgrounds, which originated in the symbol.

These backgrounds are made with two shapes: a rectangle that sets the background space and a circle cropped into the space. This mechanism can be explored further by adding colors and emotion icons instead of the cropped circle.

The background color should use 100% saturation, while the shape should be 80-90% saturated, depending on the desired contrast.

Formats

The backgrounds can have different sizes and can be designed freely. When designing, the main component that should be taken into consideration is the copywriting. After all elements are properly composed, you can set the background space in which you will be designing.

Here different formats and color combinations are shown.

Photography

Photos are a huge carrier of information and emotion. That is why it’s important to use photos carefully and in a conscious way. A photo can carry the main message and by being used in the layout it can perfectly express the message and accentuate the brand character.

When looking for photos it is recommended to use keywords described on the next pages.

Real estate

The main theme being explored in Otodom’s Visual Identity is real estate. Climatic photos of houses, apartments or apartment buildings should be used throughout the brand design and brand communication. We show interiors, gardens in way that captures the spirit of each place, since it has its own character the same as a person living in it.

Below you will find a set of keywords which can help you find the right photo:

Inhabitants

The second important group are the inhabitants of the real estate and the way they experience their living space. Each home-body has their own character that resonates throughout the apartment, house or even garden. Photos used within the Visual Identity should capture the relationship between a person and their living space originally.

Below you will find a set of keywords which can help you find the right photo: