Web basics

Brand design

All BASF webpages consist of certain basic elements, such as the corporate logo, colors, typography.

1

Header
2

Typography
3

Colors
4

Icons

Header

The header scheme is primarily visually oriented on the header of the global website “basf.com”. All other variants for the BASF use cases are based on this header composition and can set their focus individually.

Header scheme foundation

It is based on the needs of the user, focuses on the most important functions and points of orientation and leads to clean and clear solution.

Logo

• The BASF Logo should always be placed in the top right corner.

• Partnerlogos are always placed next to the BASF Logo on the right side.

• The Logo and partnerlogo indicates the user "I know where I am".

Navigation

• The navigation is at the same position as it is currently on the global.

Main functionalities

• In this area the most important functions for using the website are located, so the user finds fast access to them.

• Depending on the use case (e.g. store) the relevant (e.g. most searched and used) functionalities will be available for the user

Servicelinks

• is an element that is located in the header but visually retracts.

• Services that are only required in certain use cases („Artikel anfragen“)

Important Message Banner or Social Media Banner

Banner

• Prominent opportunity to send important alerts or messages to the users.

• Position with a high focus of attention, which can cover different communication scenarios through color coding.

Typography

Please use “New Helvetica”. All corporate colors, black, white and grey shades are possible.

Colors

BASF web design uses six corporate colors as well as additional neutral colors such as black, white and grey and pale colors for backgrounds.
In general the number of corporate colors used on one page should be restricted to one.
In special cases it is allowed to combine two corporate colors. In this case it is recommended to use the defined color pairs.

Resources

Colors swatches

ZIP (1.7 kB)

Corporate colors

Loading ...

BASF dark blue

#004A96

BASF light blue

#21A0D2

BASF dark green

#00793A

BASF light green

#65AC1E

BASF orange

#F39500

BASF red

#C50022

Neutral webdesign colors

Loading ...

Black

#000000

Dark grey

#7C7C7C

Middle grey

#ADADAD

Light grey

#DCDCDC

White

#FFFFFF

Box grey

#F0F0F0

Copytext grey

#333333

Pale webdesign colors for backgrounds

Loading ...

Pale dark blue

#E0E9F2

Pale light blue

#E0F2F9

Pale dark green

#D9EBE2

Pale light green

#E0EED2

Pale orange

#FDEFD9

Pale red

#F8E0E4

Gradiations

You can use all gradations of a single corporate color as long as the differences between the gradations are clearly visible (Example for BASF dark blue).