MAP3 Design System
Navigate through the library used
to build the MAP3 Application
Typography
Our Fonts
This is Rubik. Our brand typeface.
Rubic is the primary brand typeface used for headings/ headlines. It is a bold,
modern, sans serif font that projects a clean, simplistic design.
Sf Pro is our supporting font.
Sf Pro is our typeface used for sub-headlines, body text & buttons. This sans-
serif font prioritizes legibility & is IOS compatible.
Type Scale
Our type ranges in size from 35PX to 15 PX. Progressing gradually to support
proper hierarchy.
Heading
35 PX. Rubik Bold
Headline
28 PX. Rubik Semi-Bold
20 PX. SF-Pro Medium
Sub-Headline
20 PX. SF-Pro Medium
Buttons
Body Text
Next Page
15 PX. SF-Pro Light
Typography
Our Fonts
This is Rubik. Our
brand typeface.
Rubic is the primary brand typeface
used for headings/ headlines. It is a
bold, modern, sans serif font that
projects a clean, simplistic design.
Sf Pro is our supporting font.
Sf Pro is our typeface used for sub-
headlines, body text & buttons. This
sans-serif font prioritizes legibility &
is IOS compatible.
Type Scale
Our type ranges in size from 35PT to
15 PT. Progressing gradually to support
proper hierarchy.
Headline
Heading
Sub-Headline
Buttons
Body Text
Sub-Headline
20 PX. SF-Pro Medium
20 PX. SF-Pro Medium
15 PX. SF-Pro Medium
28 PX. Rubik Semi-Bold
35 PX. Rubik Bold
Next Page
Next Page
Next Page
MAP3 Design System
Navigate through the library used
to build the MAP3 Application
Typography
Our Fonts
This is Rubik. Our brand typeface.
Rubic is the primary brand typeface used for headings/ headlines. It is a bold,
modern, sans serif font that projects a clean, simplistic design.
Sf Pro is our supporting font.
Sf Pro is our typeface used for sub-headlines, body text & buttons. This sans-
serif font prioritizes legibility & is IOS compatible.
Type Scale
Our type ranges in size from 35PX to 15 PX. Progressing gradually to support
proper hierarchy.
Heading
35 PX. Rubik Bold
Headline
28 PX. Rubik Semi-Bold
20 PX. SF-Pro Medium
Sub-Headline
20 PX. SF-Pro Medium
Buttons
Body Text
Next Page
15 PX. SF-Pro Light
Typography
Our Fonts
This is Rubik.
Our brand typeface.
Rubic is the primary brand typeface used
for headings/ headlines. It is a bold,
modern, sans serif font that projects a
clean, simplistic design.
Sf Pro is our supporting
font.
Sf Pro is our typeface used for sub-
headlines, body text & buttons. This
sans-serif font prioritizes legibility &
is IOS compatible.
Type Scale
Our type ranges in size from 35PX to
15 PX. Progressing gradually to support
proper hierarchy.
Headline
28 PX. Rubik Semi-Bold
Heading
35 PX. Rubik Bold
20 PX. SF-Pro Medium
Sub-Headline
20 PX. SF-Pro Medium
Buttons
Body Text
Next Page
15 PX. SF-Pro Light