Improve styling of design pins
Problem to solve
The design pins are small which makes them harder to see and click. Also the white border is too thin to help the pin stand out on the design. And because blue is a common UI color, the chances of it conflicting with designs is higher.
Proposal
- Increase the design pin size to 32 x 32 pixels.
- Increase the border thickness to 2 pixels.
- Pin text: 16px, Bold, White.
- Add a
box-shadow
to all pins (see below). - Change the pin background color to
#9475DB
Purple-400 from Pajamas. - On hover, the pin will increase in size (see below).
- Disabled pins will still be gray, but will retain all other new stylings.
Pins will have a hover transition for the size increase:
transform: scale3d(1, 1, 1);
will-change: transform;
transition: transform 350ms cubic-bezier(0, 1, 1, 1);
Box-shadow:
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.32);
Further details
- Zeplin defaults to yellow bg at 26x26px with a white border of 2px
- InVision pins are pink at 40x40px with no size increase on hover
Edited by Matthew Nearents