Design Specs
Typeface
Headings
Navi BodyParagraph
Navi Body| Type | Font Size ( In Pixels ) | Weight | Line Spacing ( In Pixels ) |
|---|---|---|---|
| H1 | 28 | 700 | 33.6 |
| H2 | 27.2 | 500 | 32.64 |
| H3 | 22.4 | 400 | 33.6 |
| H4 | 16 | 400 | 19.2 |
| H5 | - | - | - |
| H6 | - | - | - |
| Paragraph | 16 | 400 | 24 |
Color
Heading
212529Paragraph
44475BLink Hover
0D6EFDArticle Hero
Navi has a pretty straightforward hero section, like the one you'd find in popular WordPress blog themes.
Before the title, there are breadcrumbs to navigate to the blog category.
After the title, it shows the publishing date, category, and featured image.
On the left, there is a fixed table of contents that appears till the end of the article.
Article Body
The article content offers good readability, but the choice of fonts could have been better.
In certain articles, the information is well presented in table:
After the conclusion, there is a section for FAQs:
Blog Imagery
Featured Image
Navi uses stock photos for articles that cover general topics like loans, savings, insurance etc.
They design custom images for topics for which it's not possible to find stock images. For example government schemes launched in India or describing a particular section of India's Income Tax act.
In-content Images
There are rarely any images used within the content of the articles. In some instances, they add screenshots of portals to avail various services.
What We Like
Navi provides great navigation both in terms of breadcrumbs and table of contents.
The best part is the information presented in tables, which is clearly legible even on smaller screens.
