Design Information Tool
The Design information tool provides you with basic and advanced design information such as typography of the page.
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 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)
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