Logo

Usage

Logo represents the visual identity of PohlCon and the daughter companies: JORDAHL, HBAU and PUK.

• It should be used consistently across all digital and print materials to maintain brand integrity and recognition.
• Logo should be placed in a prominent and consistent location, such as the top left corner of a webpage or the header of a document.
• When used on its own (not within an Anagram) ensure the logo has adequate clear space around it to prevent visual clutter and maintain its impact.
• Use the appropriate logo variation based on the available space and context.
• Maintain consistent logo sizing across different platforms and materials.
• Preserve the logo's colors and integrity, and avoid any unauthorized modifications or distortions.

Types

There are 4 Types of Logo components:

• Color that corresponds to brands’ original Logo colors.
• Light that can be used on dark backgrounds, especially when used over the saturated brand colors
• Dark that can be used on light backgrounds, in cases where Logo should not be very prominent in the given interface. The type of logo used may vary based on design requirements
• Metal that can be used for illustration and animation purposes.

INFO

Metal type Logo has inset shadow which can not be applied to an SVG by CSS properties but only by SVG specific filters. Therefore, we create a dedicated SVG file asset that holds those filters and serve that File separately for this Logo type.

Anatomy and Behavior

Logos are vector based design assets that can be exported as SVGs or PNGs.

States

Logos are not clickable by default and therefore do not have interactive states.

Gaps and Sizes

Logo height and width for Color, Light and Dark types: L

Metal shall be scaled up in size when used, due to the inset shadow that only works well in larger scales. The ideal minimum size is rootSize x 24

• Small: 288px
• Medium: 336px
• Big: 384px

INFO

The width and height of the Anagram can always scale up or down proportionally adapting to the required usage in the applications.

Tokens

SCSS Variable

Value

$logo-light-color

--color-grey-98

$logo-dark-color

--color-grey-54

Properties

export interface LogoProps {
  brand?: Company | "PohlConMetal";
  type?: "light" | "dark";
}

Configurations

Company	Logo
	Small			Medium			Large
	Normal	Light	Dark	Normal	Light	Dark	Normal	Light	Dark
PohlCon
HBAU
JORDAHL
PUK
PohlCon Metal