Typography

Typography is one of the most important foundations of an interface and a crucial tool for direct communication with our users. We chose a simple, intelligible and timeless typeface to project our vision.

Proxima Nova for the product

Proxima Nova

Line-spacing

Line spacing is one of the key elements of a good layout. This value depends a lot on the font. Its default setting should be between 120% and 145% of the font size.
Thanks to line spacing, you can change the amount of space between lines of text, it helps users read long pieces of content throughout the day and minimize reading problems.

Size

In order to guide users through the product, it is key to organize the information. Font size variations help us codify this information hierarchy and they are landmarks for users. They must stay the same throughout the product.

Font-size
Line-height
Comment
25px 35px Big title
19px 26px Modals and important cards title
17px 23px Titles
15px 21px Content, paragraphs & labels
13px 19px Small text, dates, mentions, number of comments
11px 15px Really small text (to avoid as much as possible)

Use of colors

We use a color scheme to differentiate actions and elements within a page. It’s important to keep the same color code throughout our product.

Mountain mist - For all texts
rgba(52, 57, 63, 1)
#34393F
11.65:1
Celeste - For light texts
rgba(112, 118, 137, 1)
#707689
4.52:1
Malachite - For focus on texts (rare)
rgba(27, 199, 78, 1)
#1BC74E
2.25:1
Azure - For links and actions
rgba(0, 153, 255, 1)
#0099FF
3.00:1
Firebrick - For error messages
rgba(236, 93, 97, 1)
#EC5D61
3.33:1

Considerations

Kozuka Mincho Pro for marketing titles

For any marketing and communication use, we work with the Kozuka Mincho Pro font. This typography helps us to emphasize titles and information while providing our brand with a strong identity.

kozuka