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.

Match Cards Logo

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

Match Cards App Icon


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



HEX: #000000

RGB: 0, 0, 0

CMYK: 0, 0, 0, 100

Black color HEX #000000

Yellow Sun


RGB: 251, 237, 43

CMYK: 0, 6, 83, 2

Yellow color HEX #FBED2B

Pale Violet


RGB: 187, 135, 255

CMYK: 27, 47, 0, 0

Pale violet HEX #BB87FF



RGB: 213, 191, 242

CMYK: 12, 21, 0, 5

Soap color HEX D5BFF2



RGB: 255, 255, 255

CMYK: 0, 0, 0, 0

White color HEX FFFFFF

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 color distribution

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.

Match Cards UI Kit

Brand Animation

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

Video poster

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.

Banner Match Card 1
Banner Match Card 3
Banner Match Card 2
Banner Match Card 4