Monochrome version

In the various applications of the logo, it could be necessary to use a monochromatic logo in case of applications expressly requiring a monochrome or problems arising from the overlapping of background colors.

Spuerkeess’ logo must look good and be recognisable in all sizes. It is designed to scale to small sizes so there is no need to use another variant of the logo.

Spuerkeess has four distinct business lines in addition to its online services. When communicating, through a distinct business line channel, it is important to use the correct logo so the audience can immediately identify the service in charge.

Spuerkeess has four distinct business lines in addition to its online services. When communicating, through a distinct business line channel, it is important to use the correct logo so the audience can immediately identify the service in charge.

Spuerkeess has three distinct product lines named Tweenz, Axxess and Dreamzz.

• Tweenz is a banking package designed for kids “who can’t wait to grow” (0-12y).
• Axxess is a product for young people, pupils, students and young workers.
• Dreamzz is a fully rounded product which includes all the banking products and services.

When communicating to the target audience of one of the products, it is important to use the appropriate product logo.

In cases in which the Spuerkeess logo is used on the same asset, the axxess logotype can be used without the logotype.

These two logotypes refer to Spuerkeess locations and can only be added in relation to events that take place there.

Our logo comes with clear guidance on how to place it and how to preserve its integrity when combined with other content.

Clearspace

Clearspace around the logo is equal to the height of the Brand Square.

Clearspace on small canvases

On a small canvas the clearspace can be divided by half.

Clearspace Exceptions

Example

Using co-branding logos next to the Spuerkeess’ logo must respect clear spacing rules. The space around the separating line and the overall component must have the same height as the Spuerkeess' logo bridge line.

The color of the line should always be in secondary-30.

When a co-branded logo has a width longer than the height, its height should be equal to the Spuerkeess’ logo bridge, while if the height is longer than the width the co-branded logo should have the same height as the Spuerkeess logo.

Landscape logo

For landscape co-branded logos the height should be equal to the length of the bridge line of the Spuerkeess logo

Portrait logo

For portrait co-branded logos the height should be equal to the height of the Spuerkeess logo

Extended palette

The extended colour palette includes all the usable tints and shades for each colour in the primary palette as well as the utility colours. Each colour is numbered for easy reference, the numbers represent the degree of opacity where 0 is transparent and 100 is plain. Usage of these colour tints and shades is restricted to illustrations and utility components.

Our gradient follows a 45 degrees inclination, from bottom left to top right and mixes a primary colour with a specific and arbitrary derivative colour.

The "Private Banking" sub brand comes with its own specific colour palette.

Spuerkeess will soon enable Dark Mode. This section will list the corresponding colours to switch to alternate between light mode and dark mode.

Futura PT Bold

We chose Futura PT as our brand's primary font for Headline and Subheadline because of its clean, versatile, and modern design. It's highly legible and aligns with our brand's aesthetic, making it the perfect fit for creating a strong visual identity.

For Subheadline Futura PT Regular is allowed.

Maison Neue

We chose Maison Neue as our brand's primary font for body text because of its elegant and contemporary design, great legibility, and extensive range of weights and styles. It enables us to convey our messages effectively while maintaining a consistent and professional look across all products and deliverables.

Fallback font

Open Sans

We selected Open Sans as our fallback font for body text, when our main font is unavailable, due to its versatility, legibility, and extensive range of weights and styles. Its clean and modern design aligns with our brand's image, while its flexibility allows us to match the style and tone of the primary font. Using Open Sans ensures that we maintain a consistent and professional look in all our brand communications.

We incorporated brand icons to enhance visual interest and engagement of our brand's content. They strengthen our brand identity and add a unique visual element to our communications the red line, which is the leitmotif of our brand. Brand icons can simplify complex information and make it easier to digest and understand for the viewer.

The minimal size for brand icons is 40px.

Brand Icons for Features & Products

Brand icons for feature and product descriptions use the primary and secondary colors of Spuerkeess' palette.

Brand Icons for Private Banking

Brand icons for all Private Banking products and marketing supports use the primary and tertiary colors of the Private Banking’s palette.

We have chosen to use our interface icon set as a font to ensure optimal legibility and consistency across all digital interfaces. The set consists of two types: default sized and large interface icons.

Large interface icons are designed to be thinner as they are used in bigger sizes, with a minimum of 32 pixels. This ensures that they do not appear overwhelming in larger formats while maintaining legibility.

Default interface icons are thicker, so they are more visible when used in smaller sizes, with a minimum of 16 pixels. They remain easily recognizable and legible when used in smaller formats.

Overall, using the interface icon set as a font improves usability and ensures consistency in digital interfaces.

Usage of Interface Icons

Interface icons are a versatile tool that can be used for various UI components in digital products. They provide guidance, helping users quickly understand the functionality of different interface elements, such as buttons, tabs, dropdown menus, and form fields. Consistent use of interface icons improves user experience by reducing the need for text and making interfaces cleaner and streamlined.

Usage of Brand icons

The main goal of illustrations is to tell a story. In order to so, combine the following principles:

Set the scene

Set alive

Close depth

Spuerkeess illustrations can be broken down into several sub-categories.

Hero

Hero illustrations are the most detailed compositions. They are used to tell a story and illustrate a situation. A Hero illustration is often associated with a key message and must be meaningful. In terms of proportion, hero illustrations should take the room of at least 40% of the section associated with it. Hero illustrations should always include a background shape, a minimum of one character or a bank product in focus combined with any objects you need to set the scene.

Spot

Spot illustrations are the simplest illustrations and focus on single objects. They can be used in content lists, adapted for hero illustrations or combined with other spot illustrations. Spot illustrations never include any character but occasionally include a background shape.

Find below examples of how and where to use illustrations on the web as well as in the mobile app.

The logo can be used with or without the wordmark depending on the context of use. For communication material on supports outside of the bank's ecosystem, the logo should be used with a wordmark. It can be used without the wordmark for communication material happening within Spuerkeess’ ecosystem.

Sizes

The width of the logo with wordmark should be 4 columns horizontally for portrait and 4 rows vertically for landscape. When the logo is used without the wordmark the minimum size of the logotype should be 1 column for portrait and 1 row for landscape. The size of the safe area of the logo is equal to 1 column in portrait or 1 row in landscape formats.

Sub brands & other Spuerkeess logo variants

Sub brand logos as well as other Spuerkeess logo variants should have the same height as the logo with wordmark would have when laid on 4 columns.

Logo positioning

The location of any logo in print should always be either on top left or bottom left for both portrait and landscape supports.

Font sizes & weights

When it comes to sizes there are different rules for print and digital.

Digital

The first part of the URL, slash excluded, as well as the slogan have the same size as the tagline.

Print

The URL size depends on the document size.

For formats ≥ A5

1,5 columns for portraits and 1,5 rows for landscape

For formats = A6

2 columns for portraits and 2 rows for landscape

For formats = A7

2,5 columns for portraits and 2,5 rows for landscape

Positioning & Alignment

The block of element can be positioned and aligned either :

Next to the logo, vertically aligned

On the bottom left or bottom right part of the canvas

The creative area is the space of the whole canvas. It includes the following elements:

• The logo
• The text area
• The URL or the slogan
• The image

Margins

The creative area can either use the full size of the canvas or have margins that are the size of 1 column if portrait or 1 row if landscape.

Contrast & visibility

It is important that every element added in the canvas is visible. If an image is used as a background for the whole canvas it is important that there is enough contrast between the other elements and the image. The elements of the logo, the URL or slogan and the text area should be easily readable & recognisable in any circumstances. A gradient can be used as a background in order to increase readability.

The image

An image can either be used as a background without margins or as a regular element respecting the margins of the canvas. Hereunder the possible combinations.

Shape

Another component available in the creative area is the "background shape", which can be used on its own or combined with other elements. The background shape component is a zoomed frame of the logo of the bridge, not a section of the shape. Hence it is important to not detach pieces of the bridge logo from the whole logo.

The component can be used in the creative area to add depth. There are no specific rules as to when it should be used. It is at the discretion of the designer.

The background shape should either be a mask of an image or exclude a zone of an image.

The minimum size of the shape should be of 2 columns (portrait) or 2 rows (landscape).

The text area is composed of two sub blocks, the Heading and the Tagline. Hereunder the set of rules of the text area:

• The Tagline can be used optionally, usually to complete information
• In order to maintain a scalable system the size of the text should be proportional to the layout
• The text area as well as its sub blocks should always be aligned to the left
• The text area can be positioned at any height in the creative area, either top or bottom
• The spacing between the Headline and the Tagline should be 18% of the width of the column in portrait or the height of the row in landscape formats.

Headline

Font

The font of the Headline is Futura PT, its weight is bold.

Size

For optimal readibility the size of the Tagline should be minimum the size of 44% of the width of a column in portrait and the height of a row in landscape. As an example, for a portrait layout that has a column of 90px the size of the Tagline will be 44% of 90px which makes it a Tagline of approx. 40px.

Line height

The line height of the Headline will always be 1.2 times the size of the Headline, so for instance if we take the example aforementioned, the line height of the Headline will be 1.2 times 72px, which makes it a line height of 86.4 px.

Tagline

Font

The font of the Headline is Futura PT, its weight is bold.

Size

For optimal readibility the size of the Tagline should be minimum the size of 44% of the width of a column in portrait and the height of a row in landscape. As an example, for a portrait layout that has a column of 90px the size of the Tagline will be 44% of 90px which makes it a Tagline of approx. 40px.

Line height

The line height of the Headline will always be 1.2 times the size of the Headline, so for instance if we take the example aforementioned, the line height of the Headline will be 1.2 times 72px, which makes it a line height of 86.4 px.