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.
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.
This monospace font is easy to read and offers a playful tone when animated or used in combination with colors.
RGB: 0, 0, 0
CMYK: 0, 0, 0, 100
RGB: 251, 237, 43
CMYK: 0, 6, 83, 2
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
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.
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.
This animated splash homepage is based on the flipping cards mechanism. The letters would only highlight if they match.