Grammarly design system

What font does Grammarly use?

Grammarly’s website uses Matter for headings and Glyph for body text. Matter is not on Google Fonts; the closest free match is Manrope; Glyph is not on Google Fonts; the closest free match is Figtree.

Grammarly colour palette

Grammarly’s home page is light (#FFFFFF background, #1F243C text) and uses #027E6F for its main actions. Its palette: #FFFFFF, #027E6F, #1F243C, #0E101A, #2E2E2E, #000000.

• #FFFFFF
  79.6% · backgrounds
• #027E6F
  13.6% · backgrounds
• #1F243C
  4.6% · text
• #0E101A
  1% · text
• #2E2E2E
  0.5% · text
• #000000
  0.3% · text
• #1C1C1C
  0.1% · backgrounds, text
• #00E0AC
  0.1% · backgrounds
• #545454
  0.1% · text
• #0D8065
  0.1% · text

Type scale

Each size the page sets text in, with its weight and line height. Grammarly’s largest type is 52px at weight 670.

Spacing and shape

Spacing sits on a 4px grid: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px, 80px, 96px.

Corner radii: 4px, 6px, 8px, 10px, 20px, 38px. No shadows measured: the design is flat.

What makes Grammarly look like Grammarly

Mostly neutral: 86% of the page is #FFFFFF and #1C1C1C and other neutrals; #027E6F (13.6%) fills whole sections.

#00E0AC is an accent: 0.1% of the page, as small fills such as buttons and badges. Keep it to small areas.

#0D8065 is an accent: 0.1% of the page, used for text only. Don't fill large areas with it.

The largest type (52px matter) is bold (670), tracked to -0.01em.

Grammarly DESIGN.md for Claude Code, Cursor and Lovable

A DESIGN.md is the brief an AI coding tool reads before it writes UI. This one carries everything on this page as rules a model follows: the allowed colours and what each is for, the fonts with free stand-ins, the type scale, spacing, corners, and the things Grammarly’s design never does.

Put it in your project root and ask your tool to follow it: “Read DESIGN.md and build [your product] in this design language.” It describes a style, not Grammarly’s product, so use your own name, words and images.

Download Grammarly DESIGN.md · View it as text

As CSS variables

The measured values as CSS custom properties, with free fonts standing in for licensed ones. Use them to learn from or to start a project in a similar style; Grammarly’s name, logo, words and images are theirs.

@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@700&display=swap");

:root {
  --color-background: #FFFFFF; /* Background */
  --color-surface: #D9D9D9; /* Surface */
  --color-text: #1F243C; /* Text */
  --color-text-muted: #4D536E; /* Text muted */
  --color-border: #D9D9D9; /* Border */
  --color-action: #027E6F; /* Action */
  --color-on-action: #FFFFFF; /* On action */
  --color-link: #027E6F; /* Link */
  --color-positive: #00E0AC; /* Positive */
  --font-body: "Glyph", "Figtree", sans-serif; /* Glyph on the site; Figtree renders */
  --font-interface: glyph, "Figtree", sans-serif; /* glyph on the site; Figtree renders */
  --font-display: matter, "Manrope", sans-serif; /* matter on the site; Manrope renders */
  --type-display-large: 52px; /* Display Large, weight 670 */
  --type-display-large-leading: 58px;
  --type-display-large-tracking: -0.01em;
  --type-display-medium: 46px; /* Display Medium, weight 670 */
  --type-display-medium-leading: 50px;
  --type-display-medium-tracking: -0.01em;
  --type-display-small: 36px; /* Display Small, weight 670 */
  --type-display-small-leading: 40px;
  --type-display-small-tracking: -0.01em;
  --type-title-1: 22px; /* Title 1, weight 400 */
  --type-title-1-leading: 32px;
  --type-title-2: 20.01px; /* Title 2, weight 600 */
  --type-title-2-leading: 24.0016px;
  --type-title-3: 20px; /* Title 3, weight 400 */
  --type-title-3-leading: 30px;
  --type-title-4: 18px; /* Title 4, weight 400 */
  --type-title-4-leading: 26px;
  --type-body-large: 16px; /* Body Large, weight 400 */
  --type-body-large-leading: normal;
  --type-body-small: 14px; /* Body Small, weight 400 */
  --type-body-small-leading: 17.5px;
  --type-label: 12px; /* Label, weight 400 */
  --type-label-leading: normal;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-25: 100px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 20px;
  --radius-3xl: 38px;
}

How this was measured

PikSpec’s scanner read the grammarly.com home page in Chrome at 1440px wide on 15 October 2026: the computed styles of its elements, the fonts that rendered and how much of the page each colour covers. Websites change; capture the page yourself with PikSpec for today’s values, any page, and exports in five formats.

Grammarly is a trademark of its owner. This page is an independent measurement and is not affiliated with or endorsed by Grammarly.

Similar light designs: Airbnb · Airtable · Allbirds · Anthropic · Apple · Arc

Contact PikSpec

Email support@pikspec.com for support, privacy requests or content reports.