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

Typography

Space Grotesk Font

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

PP Neue Montreal Font

Colors

Black


HEX: #000000


RGB: 0, 0, 0


CMYK: 0, 0, 0, 100

Black color HEX #000000

Yellow Sun

HEX: #FBED2B


RGB: 251, 237, 43

CMYK: 0, 6, 83, 2

Yellow color HEX #FBED2B

Pale Violet


HEX: #BB87FF


RGB: 187, 135, 255


CMYK: 27, 47, 0, 0

Pale violet HEX #BB87FF

Soap


HEX: #D5BFF2


RGB: 213, 191, 242


CMYK: 12, 21, 0, 5

Soap color HEX D5BFF2

White

HEX: #FFFFFF


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.

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