Brand Book

Obalero Brand Book

Obalero's logo, colors and typography — how to use them right.

1. Logotypes

The main color of the Obalero logotype is Obalero Blue. Logotypes are also available in black and white variants. Logotypes are available in RGB, CMYK and Pantone color modes in different file formats: RGB (JPEG, PDF, PNG, SVG, WEBP), CMYK (PDF), Pantone (PDF). PDF files are fully editable in Adobe Illustrator. Obalero and the Obalero logotype are registered trademarks.

1.1 Symbol

The Obalero symbol is composed of three identical elements arranged in perfect rotational symmetry. It represents multiple layers of meaning: the three key pillars of the packaging industry we connect together — brand owners, designers & agencies, and packaging manufacturers. It also subtly evokes a 3D perspective of a cube or the corner of a boxed package. And for the more imaginative among us, it might even resemble a lady lounging on the beach — which, frankly, is the most delightful interpretation of all.

Download

1.2 Vertical logotype

This is the primary version of the Obalero logotype. This is the first option to use.

Download

1.3 Horizontal logotype

This is the secondary version of the Obalero logotype. Use in cases where the vertical version doesn't look well.

Download

1.4 Symbol construction

The Obalero symbol is constructed from three circular segments arranged in rotational symmetry at 120° intervals. The gap between the segments equals one-eighth of the symbol's diameter, with rounded corners having a radius of one-fifth of the symbol's diameter.

1.5 Logotype construction

The Obalero logo consists of the wordmark “Obalero” and the Obalero symbol. The symbol is placed either above or to the left of the text, always aligned symmetrically along a central axis. When the symbol is positioned above the wordmark, its diameter is one-quarter of the text's width and it is spaced two-thirds of the text height above it. When placed to the left of the wordmark, the symbol is smaller than in the above configuration and is offset by two-thirds of the text height.

2. Colors

The Obalero brand palette: navy, white, grays and black.

Obalero Blue

Ocean, sailors, yachts, royalness. And Obalero.

#00205A

RGB 0 / 32 / 90

CMYK 100 / 80 / 0 / 65

Pantone 281 C

White

Light, creation, purity, paper, snow. And other things.

#FFFFFF

RGB 255 / 255 / 255

CMYK 0 / 0 / 0 / 0

Black

Death, coffee, Depeche Mode, deep space. And other interesting things.

#000000

RGB 0 / 0 / 0

CMYK 0 / 0 / 0 / 100

Pantone Black 6 C

Neutrals & shades

Navy Deep

#001640

Depth — hero and footer.

Body text

#767676

Nunito Sans · 300 · 18px

Body copy color — AA contrast.

Muted

#5B6678

Secondary text.

Surface

#F4F6F8

Light section backgrounds.

Line

#E3E7EC

Subtle borders and dividers.

3. Typography

Nunito Sans for body text (light 300, h1 bold 700), Barlow for navigation.

Packaging made joyful
Heading 1 · Nunito Sans · 700 · 64px
Packaging made joyful
Heading 2 · Nunito Sans · 300 · 48px
Packaging made joyful
Heading 3 · Nunito Sans · 300 · 32px
Packaging made joyful
Heading 4 · Nunito Sans · 300 · 24px
Obalero is a platform for packaging design — from the technical drawing through a 3D preview to the final packshot. A sample of how a regular paragraph looks at this size and weight.
Paragraph · Nunito Sans · 300 · 18px
Obalero is a platform for packaging design — from the technical drawing through a 3D preview to the final packshot. A sample of how a regular paragraph looks at this size and weight.
Small text · Nunito Sans · 300 · 16px
Navigation
Navigation · Barlow · 700 · 16px · +1.4px

4. Components

Shared Button component — Barlow UPPERCASE (label family), pill. Primary filled / Secondary outline (tone-aware), two sizes (sm/md), tuned for light and navy backgrounds.

On light background

On navy background

Barlow · 500 · UPPERCASE · 17px · letter-spacing 0.68px · pill · sm + md · hover + focus-visible

Inputs

Links

Text link