Introduction

The Design information tool provides you with basic and advanced design information such as typography of the page.

Element Tab

Element tab provides all information about the selected element.

• CSS selector
• General element information
• Element box model
• Accessibility (Added with 7.2.2 version)
• Element’s DOM code

Accessibility helps you to set the right values for typography. This provides you the text contrast ratio, line spacing ratio, and legibility (font-size) ratio.

Typography Tab

Typography tab provides all information about the page’s typography.

• Color scheme of the current page
• Basic typography information
• Font families
• Animation names
• Page assets (all images used on the page)

Advanced Tab

The information provided in the Advanced tab is usually for developers.

• Page dimensions
• All id tags used in the page
• All classes used in the page