top of page
Color: 0061FF blue
It pops a lot in the greenish and grayish map that we have. Such color with high value and high saturation could work perfectly for our app.
We use SF UI text with weights: Regular, Medium and Bold in different situation for headings
Size:
For website: 14pt, 16pt and 18 pt
For Phone: 14pt and 12 pt and 10 pt
For Tablet: 18 pt and 14 pt
Icon :
Shadow: For icon we use 0 5 4 for x y blur
We have two solutions for icon one situation would be the icon appears more than once on screen ( for adding things to list ), we use White Oval with Shadow as background and Blue type on it The other situation: When the icon is really the most important call to action, we use blue background and white type to make it more vivid
Edge:
For cards, we always use straight angle For typing areas, we use rounded corner No tint and shade is used
Tint shades and shadow value:
For selections: we add 20% white to our blue
Overlap:
Our adding icon is overlapping on the transparent layer for the type. It stays right at the edge between the transparent layer and the picture on card
Gird:
On phone, we use grid divided in half to display two cards per row. On tablet, it is divided in 5 sections per row
The avatar:
The avatar is displayed in circle with 40*40 in size
Card Sizing:
The whole size of the card is 167*257 fully filled by an image List view card has the picture takes 126*82 space
Drop Down filter:
We use words with an arrow in blue to show where he drop down filter is Elements that are hovered above would become white type on blue background rectangle when other elements are exactly opposite. However, when user is on the page where the filter element would lead to, there won’t be any color change.
Pin:
We uses different color for pin to differentiate between types and features
bottom of page