Design Guidelines

Grammarly’s mission is to improve lives by improving communication. For more than a decade, we’ve been building best-in-class writing assistance technology to help people all over the world communicate clearly and effectively—so they can be understood as they intend and achieve their goals.

Upholding user trust is vital to our mission. When you implement the Grammarly Text Editor SDK, you can be confident that we place privacy and security at the heart of our product, technology, operations, and company. More information about the policies, guidelines, and practices to which we adhere are available in the following resources:

The design guidelines that follow include best practices to help you include Grammarly in your product seamlessly and intuitively.

Core elements

The Grammarly experience is made up of three core elements:

  1. Grammarly button: shows your users the number of suggestions available to review
  2. Suggestion underlines: shows your users where the issues are in their writing
  3. Suggestion cards: shows information about the change Grammarly is suggesting to improve their writing
Core Elements

Grammarly button

The Grammarly button shows your users how many suggestions Grammarly has found, as well as the status of the application. It’s also where users can connect their Grammarly account and access settings.

Grammarly Button

By default, the Grammarly button displays at the bottom right corner of the screen. This is recommended when Grammarly is running on multiple text fields, as it will display the total number of suggestions that have been detected across all text fields on the current page.

Grammarly Button Position

Suggestion underlines

The Text Editor SDK delivers three categories of suggestions. Each category is indicated by underlines with a specific associated color and intent:

  • Red underlines highlight correctness suggestions relating to grammar, spelling, and fluency.
  • Blue underlines highlight advanced suggestions to improve clarity, delivery, and engagement.
  • Gray underlines highlight custom style guideopen in new window suggestions (available to Grammarly Business users who connect their account).
Suggestion Underlines

Suggestion cards

The suggestion cards appear when the user hovers over an underline. The card will display the context of the suggestion, provide options when relevant, and present actions for the user to accept or dismiss the suggestion.

  1. Title: summarizes the suggested change
  2. Close: allows the user to close the suggestion card
  3. Content: displays the text that will be transformed
  4. Options: allows the user to choose a transform when options are available
  5. Actions: allows the users to accept, dismiss, or report the suggestion
Suggestion Cards
Last Updated: 5/30/2022, 6:39:53 PM