Match Cards Brand 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.

Logotype & App Icon

The logotype is a bold and simple textual adaptation of the app's name. Considering how the main recognition indicator is the favicon, we opted out of having a separate icon logo.

The favicon is a representation of one of the cards being flipped. It is simple, yet distinguishable from other favicons.


Space Grotesk Font

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



HEX: #000000

RGB: 0, 0, 0

CMYK: 0, 0, 0, 100

Yellow Sun


RGB: 251, 237, 43

CMYK: 0, 6, 83, 2

Pale Violet


RGB: 187, 135, 255

CMYK: 27, 47, 0, 0



RGB: 213, 191, 242

CMYK: 12, 21, 0, 5



RGB: 255, 255, 255

CMYK: 0, 0, 0, 0

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.

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.

Brand Animation

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

Banners & 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.