Match Cards Guidelines

Match Cards is a PWA (Progressive Web App) designed by following a set of brand guidelines outlined in this document. You can access the game here.

Tone of Voice

The tone of voice is upbeat and enthusiastic. It use friendly language and humor to engage with its users and create a sense of excitement and enjoyment. The tone should be welcoming and inclusive, making users feel like they are part of a community of players. It may also use clear and concise instructions and feedback to help users understand how to play and improve their skills. Overall, the tone of voice is designed to create a positive and enjoyable experience for its users.

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 letter "C" (marked as "x" in the diagram).

Exclusion zone Tinloof logo

App Icon spacing

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

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

Exclusion zone Match Cards 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.


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


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

Minimum sizes Match Cards logo
Minimum sizes Match Cards App Icon

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.

Match Cards logo misuse
Match Cards App Icon 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

The 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.

Match Cards logo color



HEX: #000000

RGB: 0, 0, 0

CMYK: 0, 0, 0, 100

Match Cards black color

Yellow Sun


RGB: 251, 237, 43

CMYK: 0, 6, 83, 2

Match Cards Yellow color

Pale Violet


RGB: 187, 135, 255

CMYK: 27, 47, 0, 0

Match Cards pale violet



RGB: 213, 191, 242

CMYK: 12, 21, 0, 5

Match Cards color



RGB: 255, 255, 255

CMYK: 0, 0, 0, 0

Match Cards white color

Color use

To keep the focus on the game, black is used as the main background, while expressive colors like yellow and purple are the key colors for the cards.

Match Cards's color distribution


Space Grotesk Font

This monospace font is easy to read and offers a playful tone when animated or used in combination with colors.

Space Grotesk Font

Brand Animation

This animated splash homepage is based on the flipping cards mechanism. The letters would only highlight if they match.

Video poster

UI Kit

To ensure consistency across the game, we created this UI kit. This comes in very handy as well in development, to avoid duplicated code and different styles.

Banners and social media

To ensure consistency and encourage users to download the app, we've leveraged the UI kit to create templates for social sharing images.