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 use 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 the Grammarly Text Editor Plugin 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: Show your users where the issues are in their writing
  3. Suggestion cards: Show information about the change Grammarly is suggesting to improve the user's writing
Core Elements

Grammarly button

The Grammarly button shows your users how many suggestions Grammarly has found. 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 Plugin 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 accounts).
Suggestion Underlines

Suggestion cards

A suggestion card appears 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 changed by the suggestion
  4. Options: Allow the user to choose a type of text change when options are available
  5. Actions: Allow the user to accept, dismiss, or report the suggestion
Suggestion Cards
Last Updated: 11/21/2022, 6:44:52 PM