Brand

The OTTO brand on one page: the logo and when to use which version, the red and every value it is specified in, the palette around it, the typefaces, the icons, the illustrations and the letter sculpture.

Every asset shown here is an original. Logos, icons, illustrations and type are used as they are: never redrawn, recoloured or recreated.

Logo

The OTTO wordmark comes in two colours only: OTTO red on light grounds, white on OTTO red. It aligns to the type area and is never cropped, distorted or set inside a headline or running text.

• „Das OTTO-Logo wird nie in anderen Farben als OTTO-Rot und Weiß verwendet. Ein schwarzes Logo wird nie verwendet."
• „Das rote Logo darf nur auf hellen Farben platziert werden. Das weiße Logo nur auf OTTO Rot."

See all logos

OTTO red

HEX

#EB001F

RGB

235 / 0 / 31

CMYK

0 / 100 / 95 / 0

Pantone

185 C

RAL

3028

NCS

S1080-Y90R

Token

--oc-base-color-otto-red-100

The red was tuned for screens in 2022 and works as an accent. In the words of the OTTO Brand Hub: „Mehr als 30 % Rot-Anteil sollte in der Gestaltung nicht eingesetzt werden, um nicht ungewollt zu verkäuferisch zu wirken." Employer branding is the one exception.

The palette around the red

• Service blue 140#213D4Fservices, darkest
• Service blue 120#3F7498services
• Service blue 80#C1DAEBservices, light ground
• Sustainable green 110#7EA87Bonly for sustainable products, never next to red areas
• Purple 100#B198DBcampaign accent
• Warm red 90#FF9196campaign accent
• Green 90#C5EF6Ccampaign accent
• Beige 90#F5E6D7warm ground

The full modular palette has eight steps per colour and five for beige. Every value, with its light and dark mode pair, is listed under design tokens and colour.

Typefaces

Headlines are set in OTTO Sans KO Black, alone or combined with Regular, and never in capitals (short tags like „NEU" excepted). Red text needs at least 18 pt Regular or 14 pt Black. The type scale and line heights are on the typography page.

Icons

• basket
• wishlist
• search
• person
• delivery-express
• delivery-desired-date
• payment-credit-card
• payment-invoice
• rating-filled
• voucher
• sale
• filter
• settings
• home
• chat
• phone
• letter-opened
• lock-closed
• location
• camera
• share
• check
• plus
• shopping-cart

427 icons on a 24 px grid with a 1.5 px stroke, plus small 50 variants for tight spaces. How to use them: icon guidelines.

Illustration

• Augmented reality
• Empty points
• Error
• Gift
• Gift OTTO up
• Gift OTTO up open
• Hourglass
• Loading
• Lock
• Money
• Package shipping
• Phone
• Phone app
• Phone payment
• Points
• Points celebrate
• Poster
• Question
• Rating desktop
• Rating mobile
• Reconstruction
• Return
• Return no articles
• Return reason
• Search
• Service
• Service call
• Shopping bag
• Shopping bags
• Shopping success
• Success
• Sustainable
• Unlock phone
• Web renovation
• Service construction

The two characters Yuki and Mika and the object motifs follow the illustration guidelines.

The letter sculpture

The four letters of the wordmark as a sculpture, for brand topics, chapter openers and title slides. It is built from the original wordmark; wherever the logo itself appears, it stays the original file.

• Home letters
• Letters mixed
• Letters red
• Letters row
• Letters stack
• Og letters

Materials, light and colour of the sculpture: OTTO letter sculpture.

Downloads