Outline styles
Five card outline treatments including Stars, with separate colours for face-down and revealed.
The outline around each card is a surprisingly large part of how premium the board feels.
The five styles
- None: no border at all
- Solid: a plain line
- Dashed
- Double
- Stars: a thin rounded border with a four-point sparkle in each corner
Two colours, two states
The outline has one colour while the card is face down and another once it is revealed. This is what makes a flipped card read as changed rather than just recoloured: the border shifts with it.
A gold outline on a dark green face-down card, switching to a deeper green on a gold revealed card, is the combination the demo uses.
Width
One to eight pixels. Stars scales its sparkles with the width, so a heavier border gets proportionally bigger corner marks rather than the same tiny ones.
Hover
Separately, cards can rotate slightly on their vertical axis when hovered, like a physical card being lifted. On or off. It does nothing on touch devices, where there is no hover, so it costs mobile shoppers nothing.
Did this answer it?