Brand Guide

Integra Micro Software Services

People expect other people to be consistent. And because the best brands function like people, people expect consistency there too. Just as our friends are their same reliable selves day after day, so too should our company exhibit one continuous personality throughout your website, emails, and conference booths. This style guide will help us achieve that.

Visible, tangible, perceptible: We combine perfection and quality with the will to go one step further. Our passion for progressive premium is something people should be able to sense in our brand at every moment – which is why we have further developed the design of our brand appearance.

The idea of our brand

Progression

With our logo, reduced colors, clear layout structure, a variable corporate typeface and other precisely developed elements, we are striking out a new path in terms of design.

Flexible

Our refined design gives us the freedom and flexibility to address our target groups more effectively than before based on this self-image. And this applies across all touchpoints.

The corporate typeface is variable. We have increased our brand colors. And our imagery reflects the balance between perfection and authenticity. These elements give us flexible means of expression with which to communicate our attitude.

Confident

We avoid anything superfluous, decorative and focus on the essentials – both in design and in our stories. We give the elements space to take effect and underscore our attitude.

We don’t allow ourselves to be reined by rigid constraints. Whether striking asymmetries or deliberately harmonious compositions – we precisely use contrast to convey our messages.

Clear

Clear-cut, precise, reduced and therefore unmistakable – that’s what our messages, our concepts and the entire range of our digital and physical brand experience are all about. To us, good design means enabling instant understanding and intuitive use at every touchpoint. This is why people’s needs, together with our brand character, are at the center of every design: Human Centricity.

 

Brand name

Design

With our logo, reduced colors, clear layout structure, a variable corporate typeface and other precisely developed elements, we are striking out a new path in terms of design.

Positioning

Our refined design gives us the freedom and flexibility to address our target groups more effectively than before based on this self-image. And this applies across all touchpoints.

The corporate typeface is variable. We have increased our brand colors. And our imagery reflects the balance between perfection and authenticity. These elements give us flexible means of expression with which to communicate our attitude.

Colors

Equivalent Colors

Techno blue, a progressive red, black and white – and an occasionally allowed use of vibrant orange and forest green: these are the IMSS brand colours. The order is important because there is hierarchy here. What also matters is that the colours support the message you want to convey, and the overall layout is not too colourful.

Brand Colors

The brand colours are equal in status and always appear in full tone. They may not be darkened, lightened or displayed transparently.

Techno Blue

RGB 10 74 187
HEX #0A4ABB
HSL 218.31 0.9 0.39
CMYK 69% 44% 0% 27%

Progressive Red

RGB 254 2 0
HEX: #FE0200
HSL 0.47 1 0.5
CMYK 0% 99% 100% 0%

Vibrant Orange

RGB 255 152 3
HEX #FF9803
HSL 35.48 1 0.51
CMYK 0% 40% 99% 0%

Forest Green

RGB 72 129 98
HEX #488162
HSL 147.37 0.28 0.39
CMYK 22% 0% 12% 49%

White

RGB: 255/255/255
HEX: #ffffff
CMYK: 0/0/0/0

Black

RGB: 0/0/0
HEX: #000000
CMYK: 40/0/0/100

Functional Grey Tones

For functional applications, the colour palette can be extended to include grey tones ranging from white to black.

RGB: 26/26/26
HEX: #1a1a1a

RGB: 102/102/102
HEX: #666666

RGB: 179/179/179
HEX: #b3b3b3

RGB: 229/229/229
HEX: #e5e5e5

RGB: 51/51/51
HEX: #333333

RGB: 128/128/128
HEX: #808080

RGB: 204/204/204
HEX: #cccccc

RGB: 242/242/242
HEX: #f2f2f2

RGB: 76/76/76
HEX: #4c4c4c

RGB: 153/153/153
HEX: #999999

RGB: 217/217/217
HEX: #d9d9d9

Logo

16×16
32×32
50×50
144×144
152×152
300×300
360×216
613×375
613×613
700×700
613x375_highdpi
Just IM 311×317
Revert Logo 617×372
Revert Logo 300×181
Revert Black 617×372
Revert Black 1166×604

Typography

Striking and loud. Or reduced and elegant – the font styles allow a wide variety of scenarios and moods. In this way, concrete applications can be geared even more consistently to the target group and the message being conveyed.

Archivo (Main Font)

Archivo is a grotesque sans serif typeface family originally designed for highlights and headlines. This family is reminiscent of late nineteenth century American typefaces. The technical and aesthetic characteristics of the font are both crafted for high performance typography. It was designed to be used simultaneously in print and online platforms and supports over 200 world languages.

Archivo has been upgraded to a variable font in 2021. The weight and width axes allow a wide variety of styles, from Thin to Black and from ExtraCondensed to Expanded.

Archivo – Google Fonts

Lato

Lato is a sans serif typeface family started in the summer of 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the Open Font License by his foundry tyPoland, with support from Google.

The semi-rounded details of the letters give Lato a feeling of warmth, while the strong structure provides stability and seriousness.

Lato – Google Fonts

Roboto

Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.

Roboto – Google Fonts

Icons

Our icons indicate information and interactions in a simple, direct manner. Their style is derived from technical drawings. Learn how to use them, how they behave and how they are made here or find and download approved icons in the user interface guideline:

Material Icons

Material icons must be used where possible. Material Symbols are the newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants. Symbols are available in three styles and four adjustable variable font styles (fill, weight, grade, and optical size).

Material Symbols and Icons – Google Fonts

Style and Structure

Icons are made up of as few elements as possible. The constructed style is created by means of a fine, constant contour thickness of one pixel and the avoidance of filled-in blocks. Right angles alternate with rounded corners. Icons are generally applied in black and white.

Usage

Each icon is assigned to a term and is only used in the context of this term.

Size

All icons are placed inside an invisible square basic area. This defines the size of each icon and helps with positioning and orientation.

The important thing is to achieve a fine, precise effect of the icons within the layout as a whole. For this reason, they are applied in original size in screen media and are depicted crisply with pixel accuracy. In other contexts apart from screen media, the size is based on the text size used. Small icons should be 1.5 times the size of the text in pt, large icons should be three times the size of text in pt.

Placement and Spacing

Icons should preferably appear to the left or right of the associated text. They are centred. The minimum spacing from the text is ¼ of the basic area. If several icons are placed alongside each other, the minimum spacing in this case is ¼ of the basic area.

States & Animation

In digital interfaces icons can be animated, take different shapes or morph to a different icon to signal a certain state. The transitions between these states is described as micro interactions. Some states and micro interactions are delivered as part of the icon library.

 

Imagery

The images are powerful, express understatement with a premium standard, and reflect at the same time a balance between perfection and authenticity.

Visual World

Passion, precision and perfection – these things are integral not just to every last detail of IMSS designs, but also to the visual aesthetic of our images. The style is minimalistic and clear-cut, with the situation in each image depicted in an authentic, assured manner with a focus on the essential.

We use high-quality, emotionally charged images that move and fascinate the viewer, while also expressing our bold, sophisticated and optimistic attitude.

Attitude

brave | curious | approachable | optimistic

The attitude is typical IMSS’ian: optimistic with a confident, nonchalant way about it. You can see this in our approach – but in a likeable and approachable way. We show people with charisma, who radiate determination and curiosity.

Cast

confident | cultured | understated

The cast is expressive and positive. They have a well-cared-for, natural appearance. They are cultured, stylish and know what life is about. And if kids are shown, they should be curious and bright.

The styling of our cast is progressive and highly tasteful. Their looks underline their personalities. Their sharp and sophisticated style suits the situation perfectly. Each outfit is put together carefully, expressing perfection and a strong dedication to detail.

Places

global | valuable | fascinating | graphic | epic

Our locations are unique and exclusive places which meet the brand’s premium standards. They are intriguing places and have an epic quality that arouses deep desire in the viewer. Thanks to their clean graphic composition, the focus remains on the topic. In all their epicness and graphicness, they will nevertheless always feel warm and inviting.

Colors

elegant | reduced | premium | harmonious

The colours create a vivid atmosphere. We set ourselves apart by using reduced colours and desaturated hues instead of colour-intensive tones. Thereby we create harmony and elegance through the images, reflecting an easy-going manner. The colours of the images harmonise with the brand colours white, black and red at all times to create and guarantee a premium visual appearance of the layout.

Light & contrast

emotional | natural | pleasant | exciting

The lighting mood in which we shoot symbolises a spirit of optimism. It creates an atmosphere that you would like to be part of. Natural light sources ensure images have an authentic, unembellished look.

Composition

authentic | engaging | narrating

The composition is fascinating and guides the viewer’s gaze. The surroundings work as a stage and don’t distract from the focus. The staging always feels natural, allowing our images to tell a consistently plausible story.

Illustration

The illustration style of IMSS is used to provide supporting illustrations to services, processes, functions and other abstract matters. It follows the principles of simplicity and clarity and takes inspiration from the straightforwardness and dynamism of tape drawing.

Black and white

Illustrations are in black, white and gray tones. Colours are discouraged and are rarely used.

Strong contrasts

Strong contrasts make the important elements of an illustration eye-catching. The spectrum of tones ranges from pure white to deep black.

High degree of abstraction

Simple metaphors and avoidance of details that are not essential to understand the content of the illustration ensure easy and quick comprehension of the message.

Text is used to accompany illustrations rather than as an integral part of them. This ensures that the illustrations can be used in a variety of image sizes.

Solid colour shapes – no gradations, no contouring

Illustrations are composed of solid colour shapes. Colour gradations, contouring, transparencies and soft transitions are not used. Objects are modeled by hard edges of light and shadow.

Tone of Voice

The tone of voice defines how we as a brand speak and write. It brings the brand personality to life in linguistic terms. In other words, it is not about what we say or who we are speaking to – but how we do it.

We have defined four linguistic principles and provided examples for each of them.

Ahead of our time

Trendsetting, transforming

We are visionary and one step ahead of our time. With our progressive spirit, we shape the future of enterprise. Just as we seize every opportunity to transform enterprises and to create a livable future for our planet and generations to come, our language is trendsetting and versatile.

We think in visionary terms, using new technologies to achieve quality and sustainability, thereby always focusing on people. We use our language to bring visions to life and to highlight connections and opportunities. Our language engages in dialogue with the customers in the same way that we interact with the future.

Part of progress is being careful and respectful: The seizing of opportunities, the will to embrace transformation and transparency. Our language is open and explains what drives us. After all, we want to share our passion for technical innovations, high standards, and digital– with our customers, who we treat with respect.

Confident

Clear, energetic

Everything we do is done with conviction. We know that great things can be produced with passion, experience, and self-confidence. Our language is powerful and clear, active and open-minded.

We know what we are capable of and do not need to exaggerate. That’s why we rarely use superlatives. If we do, we get straight to the point.

Passiveness neither suits our personality nor our language. We are self-confident doers, and this is reflected in our language – we use active sentences wherever possible.

Filler words diminish the power of a text. We keep it crisp, clean and simple – even if it means breaking the rules of writing.

Cultivated

Elegant, stylish

We communicate eloquently, our language is fluent and full of elegance. We emphasize the premium character of the brand – understated and coherent without arrogance.

Our language follows its own rhythm. This may occur through the use of slick repetition of the sentence structure or by stringing together three striking adjectives. It is never predictable or boring, because we know how to adapt the rhythm.

We distance ourselves from hollow phrases.

Inspiring

Captivating, empowering

Our tone of voice is dynamic and empowering, inspiring both customers and society. Since we believe in the will to create, we are convincing and engaging.

We know that the right tone can have a big impact.
We want to captivate people and motivate them to do their own thing, like in the way our language empowers and guides them.