Styling the board
Every colour, size and shape control on the game page, and which ones matter most.
The game page is meant to look like your store, not like our app. Everything visible is a control in the editor, with a live preview that is the real component rather than a mock-up.
The layers
The board is three layers, and each has its own colours:
- Page background: the area behind everything. Usually your brand’s darkest or most saturated colour.
- Panel: the card the board sits on, with its own background and corner radius.
- Cards: face-down colour, revealed colour, corner radius, and an optional shadow.
Sizes
- Headline size and subheader size, with a spacing control between them
- Card text size for the prize labels
- Prize image size as a percentage of the card, applied to all prize artwork at once
- Panel corner radius and card corner radius
Logo
Upload a logo to sit above the board, and set its height. It links to your destination page, so a shopper who wants to skip the game can.
Progress indicator
Three styles: text (“2/3 prizes collected”), dots, or a bar. Colours for both the filled and unfilled state. Or turn it off.
Button
The continue button has its own background, text colour, border colour, corner radius, text size, and an offset shadow with its own colour and size. There is also a pill style if you want fully rounded.
Confetti
On or off, with your own colour set.
Where to start
Set the page background, panel background, card face-down and card revealed colours first. Those four carry ninety per cent of the brand impression. Everything else is refinement.
Related
Did this answer it?