Design Information Tool


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

During development, access such information speed ups the development process.
Was this article helpful?

Couldn't Find Your Answer?

Get quality customer support with our professional support team.

Create A Support Ticket
Live Editor