Anagram

Usage

Anagram Vector and Anagram Custom components are a combination of a brand's logo and name and their variations. They are design assets used to communicate the brand and, sometimes, brand-specific project or application name to the users. They are used to reinforce the brand identity across various touchpoints. Anagram components should be used when they are contextually relevant and add value to the user experience. Avoid using them excessively or in situations where they may overshadow or distract from the primary content or functionality.

Types

There are 2 main types of Anagram component:

• Anagrams Vectors - are two commonly used Anagrams belonging to PohlCon. They are static vector graphic assets that can not change and are exported as SVG. Their text can not be altered.
• Anagram Custom is a dynamic Anagram component, in which the label text can be customized to the needs of the project. This component makes use of Logo and Heading components, where you can write the text in Heading component to the custom needs. As an example it is used in situations where we need Anagram with brand logo but a specific project name, for example “JVA Calculator”.

INFO

Use Anagram Vector when you want to represent the brand in general; and use Anagram Custom when you want to represent name of the certain project/application corresponding to the specific brand’s products.

There are two different Anagram Vector component variants: PohlCon and PohlCon Digital and each has 3 types:

• 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

For Anagram Custom, there are 3 Types for each brand:

• 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
• Compact is used on light and neutral backgrounds and bears less emphasis than other types of Anagrams, therefore can be used in applications’ headers or footers to depict the name of the application and he brand it belongs to

Anatomy and Behavior

1. Container - contains the anagram vector or Logo and Heading in case of Custom Anagram. Has no padding, therefore the relevant spacing around shall be given in the context of app design.

2. Logo - is nesting Logo component only in case of Anagram Custom.

3. Label text - is nesting Heading component only in case of Anagram Custom. The text can be overridden with required project/app name.

States

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

Gaps and Sizes

ANAGRAM VECTOR

• Container height and width: Fill - adapts to the parent container set in the app. In Figma the default container height is 3XL.

INFO

The width and height of the Anagram always scale proportionally. The anagram's parent container figure.anagram is the one defining the size through its height CSS property.

ANAGRAM CUSTOM

• Container height: L
• Logo width and height: L
• Label text height: L
• Gap between Logo and Heading: XS

ANAGRAM CUSTOM COMPACT

• Container height: Mplus
• Logo width and height: M
• Label text height: Mplus
• Gap between Logo and Heading: XS

Tokens

SCSS Variable

Value

$anagram-light-color

--color-grey-98

$anagram-dark-color

--color-grey-54

$anagram-custom-compact-color

--color-grey-70

Properties

Anagram Component

export interface AnagramProps extends ElementProps {
  company?: Extract<Company, "PohlCon"> | "PohlConDigital";
  type?: "light" | "dark";
}

Anagram Custom Component

export interface AnagramCustomProps extends Omit<HeadingProps, 'type'> {
  type?: 'light' | 'dark' | 'compact';
  company?: Company | 'PohlConDigital';
}

Configurations

Anagram Default
Company
	Size	Original	Light	Dark
	Small
	Medium
	Big
Digital
	Small
	Medium
	Big

Anagram Custom
Company
	Size	Light	Dark
	small	PohlCon Custom	PohlCon Custom
	medium	PohlCon Custom	PohlCon Custom
	big	PohlCon Custom	PohlCon Custom
	small	JORDAHL Custom	JORDAHL Custom
	medium	JORDAHL Custom	JORDAHL Custom
	big	JORDAHL Custom	JORDAHL Custom
	small	PUK Custom	PUK Custom
	medium	PUK Custom	PUK Custom
	big	PUK Custom	PUK Custom
	small	HBAU Custom	HBAU Custom
	medium	HBAU Custom	HBAU Custom
	big	HBAU Custom	HBAU Custom
Digital
	small	PohlConDigital Custom	PohlConDigital Custom
	medium	PohlConDigital Custom	PohlConDigital Custom
	big	PohlConDigital Custom	PohlConDigital Custom