Tinloof Guidelines

Tinloof brand guidelines, encompassing key elements such as the logotype, colors, typography, and visuals, are consolidated on this page.

Tone of Voice

We communicate clearly and concisely, using precise language to highlight the benefits of our products and services. Our tone is confident, professional, and focused on delivering value to our customers.

Logo spacing

The exclusion zone ensures the legibility and impact of the logo by isolating it from competing visual elements such as text and supporting graphics.

This zone is considered as the absolute minimum safe distance, to give the logo room to breath.

The exclusion zone is equal to half the height of the icon (marked as "x" in the diagram).

Exclusion zone Tinloof logo

Icon spacing

If you are using the icon instead of the logo, the same exclusion rules apply.

The icon’s exclusion zone is equal to half the height of the icon (marked as "x" in the diagram).

Exclusion zone Tinloof icon

Minimum sizes

Establishing a minimum size ensures that the impact and legibility of the logo is not compromised in application.

Due to the higher resolution available in print vs that of screen based media (300dpi vs 72dpi respectively), we are able to reproduce the logo at a fractionally smaller size in print without any graphic deterioration.

Digital

To ensure legibility and impact, the logo should never be reproduced smaller than 70px in any digital communication.

Print

To ensure legibility and impact, the logo should never be reproduced smaller than 20mm in any print communication.

Minimum sizes Tinloof logo

Logo misuse

It is important that the appearance of the logo remains consistent.

The logo should not be misinterpreted, modified, or added to.

No attempt should be made to alter the logo in any way. Its orientation, colour and composition should remain as indicated in this document — there are no exceptions.

To illustrate this point, some of the more likely mistakes are shown on this page.

Tinloof logo misuse

Logo placement

Regardless of communication size or dimension, the logo can only ever be placed in five locations.

This keeps logo placement simple and consistent, while allowing enough flexibility to accommodate our dynamic graphic system.

Please keep in mind the logo exclusion zone when placing the logo in a corner.

The placement options are:

1. Top left corner

2. Top right corner

3. Centered

4. Bottom left corner

5. Bottom right corner

Tinloof logo placement

Logo colour options

Our brand guidelines reflect our commitment to simplicity and reflect the values of our brand.

We have chosen to stick to only black and white because it is simple and timeless, and it allows our brand to remain recognisable and consistent across all platforms.

Our logo is the face of our brand, and it is essential to maintain its integrity. Therefore, we strictly prohibit the use of the logo with any other colors, regardless of the situation or event.

This is because we want our brand to be immediately recognisable and not diluted by using colors that do not fit our brand's personality.

Tinloof logo color

Colors

Eerie Black

Soft black tone. Used for texts and primary design elements.


HEX: #1A1A1A


RGB: 26, 26, 26


CMYK: 0, 0, 0, 90

Tinloof black color

White

Our primary background colour which works perfectly to contrast all the content.


HEX: #FFFFFF


RGB: 255, 255, 255


CMYK: 0, 0, 0, 0

Tinloof white color

Gray (X11)

Gray (X11) is used when no other eerie black or white option is available. It is mainly used in Tinloof Store.

HEX: #BABABA


RGB: 186, 186, 186

CMYK: 0, 0, 0, 27

Color use

While we do incorporate black and gray into our branding palette, black is mainly used for text while gray is sparingly and serve as complementary shade.

Our predominant color is white.

It's important to note that we do not incorporate any other colors into our brand guidelines unless they are present in assets such as images or videos.

This approach allows us to maintain a cohesive and consistent brand image across all of our materials and platforms, while also conveying a sense of elegance and simplicity that aligns with our overall brand values.

Tinloof's color distribution

Typography

PP Neue Montreal Font

When it comes to communications design, Neue Montreal is a font that we utilize in two distinct weights: Regular and Medium.

In general, we adhere to a set of guidelines that govern which weight we use for specific design elements.

For example, Regular is typically employed for body copy and headlines, whereas Medium is reserved for sub-headers.

By maintaining consistency in our use of these weights, we ensure that our design language is clear, cohesive, and visually impactful, no matter what the specific application may be.

PP Neue Montreal Font

Illustrative graphics

We keep our illustrative graphics simple and to-the-point to deliver value.

Guidelines help us maintain consistency, which reinforces our brand identity and enhances the user experience.

Video poster
Video poster

UI Kit

Our UI kit comprises a range of reusable elements, such as buttons, forms, and links, designed to promote consistency across the entire site.

By leveraging these components, we streamline development and ensure that all UI elements are documented and available for reuse.

This approach not only saves time and resources but also helps us maintain a cohesive brand identity and deliver a seamless user experience.

Tinloof UI Kit

Banners and social media

To ensure consistency, we have standardised banners and a template OG image for all our social media platforms, including LinkedIn and Twitter.

These elements reinforce our brand identity and create a cohesive visual experience for our audience.

Tinloof OG image
Tinloof LinkedIn Profile
Tinloof OG Image 2
Tinloof Twitter profile