---
version: alpha
name: Grammarly
description: A trustworthy, white-canvas writing-assistant identity anchored by a single deep teal-green, where the custom Matter grotesk sets heavy 670-weight display headlines, a Messina serif adds editorial warmth, and crisp 6px corners with whisper-soft slate shadows keep the AI feel clear, calm, and credible.
colors:
  # Surface / canvas
  background: "#ffffff"        # white page canvas
  surface: "#ffffff"           # card / panel fill
  surface-dark: "#0e101a"      # deep blue-black inverse section surface

  # Ink / text — deep blue-black
  ink: "#0e101a"               # near-black headings + body (blue-cast, the dominant ink)
  ink-soft: "#2e2e2e"          # neutral dark secondary text
  ink-secondary: "#4d536e"     # muted slate supporting copy
  ink-muted: "#707070"         # captions, placeholder, icons
  on-dark: "#ffffff"           # text on dark / green surfaces

  # Brand accent — the singular Grammarly green
  primary: "#027e6f"           # the deep Grammarly teal-green — primary CTA fill, brand mark
  primary-strong: "#006780"    # deeper teal for pressed / hover
  primary-light: "#2cc9b6"     # bright teal for icons / inverse accents
  on-primary: "#ffffff"        # white text on green

  # Inverse CTA — dark button on light
  ink-button: "#1c1c1c"        # near-black secondary CTA fill
  on-ink-button: "#f5f5f5"     # near-white text on the dark button

  # Supporting accents — semantic + product
  accent-blue: "#02379e"       # clarity-blue product accent
  accent-purple: "#5e47e5"     # delivery-purple product accent
  accent-gold: "#ffbf47"       # premium / pro gold
  tag-brand: "#b3f8f8"         # pale aqua brand tag fill
  error: "#eb0a00"             # critical red

  # Borders
  border: "#c6cbde"            # cool hairline divider
  border-strong: "#6d758d"     # input + secondary button outline

  # Shadow tint (opaque approximation for the elevation table)
  shadow-slate: "#878da2"      # was rgba(135,141,162,0.25) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Matter, Matter for Grammarly, Helvetica Neue, Arial, sans-serif"
    fontSize: 60px
    fontWeight: 670
    lineHeight: 1.1
    letterSpacing: -0.6px
  display:
    fontFamily: "Matter, Matter for Grammarly, Helvetica Neue, Arial, sans-serif"
    fontSize: 50px
    fontWeight: 670
    lineHeight: 1.12
    letterSpacing: -0.5px
  heading:
    fontFamily: "Matter, Matter for Grammarly, Helvetica Neue, Arial, sans-serif"
    fontSize: 42px
    fontWeight: 670
    lineHeight: 1.1
    letterSpacing: -0.42px
  heading-sub:
    fontFamily: "Matter, Matter for Grammarly, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.28px
  serif-accent:
    fontFamily: "MessinaSerifWeb, Georgia, Times New Roman, serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body-large:
    fontFamily: "Glyph, Matter, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Glyph, Matter, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.44
    letterSpacing: 0px
  body-small:
    fontFamily: "Glyph, Matter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button:
    fontFamily: "Glyph, Matter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.43
    letterSpacing: 0px
  caption:
    fontFamily: "Glyph, Matter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  sm: 4px
  md: 6px
  lg: 8px
  xl: 10px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    padding: 16px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-strong}"
    textColor: "{colors.on-primary}"

  button-outline:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    padding: 16px 24px
    border: "1px solid {colors.primary}"
  button-outline-hover:
    backgroundColor: "{colors.tag-brand}"
    textColor: "{colors.primary-strong}"

  button-dark:
    backgroundColor: "{colors.ink-button}"
    textColor: "{colors.on-ink-button}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    padding: 16px 24px

  button-google:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    padding: 8px 16px
    border: "1px solid {colors.border-strong}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    border: "1px solid {colors.border}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 24px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    border: "1px solid {colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.primary}"

  badge:
    backgroundColor: "{colors.tag-brand}"
    textColor: "{colors.primary-strong}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 4px 10px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    padding: 16px 32px

  link:
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 0px
  link-accent:
    textColor: "{colors.primary}"
    typography: "{typography.body}"
    padding: 0px
---

# Grammarly Design System

## Overview

Grammarly's site has one job to do before it sells you anything: look trustworthy. An AI writing assistant lives or dies on credibility, and the design earns it through restraint. The canvas is clean white (`{colors.background}`), the ink is a deep blue-cast near-black (`{colors.ink}`, `#0e101a`) that reads more authoritative than a flat gray, and the structure is calm and grid-disciplined. The hero — "You think big. We'll take care of the details." — is set heavy and confident in the brand's custom **Matter** grotesk at a distinctive 670 weight with tight tracking, so the words feel deliberate and editorial rather than salesy.

The whole identity hangs on **one deep teal-green** (`{colors.primary}`, `#027e6f`). That green is the logo, the primary CTA ("Sign up — it's free", "Get Grammarly"), and the accent on links and outlined buttons. It's a mature, slightly desaturated green — not a neon SaaS lime — which signals competence and calm rather than hype. Grammarly is disciplined with it: the primary action is green, an alternate dark near-black button (`{colors.ink-button}`) handles enterprise/secondary CTAs, and a pale aqua tag fill (`{colors.tag-brand}`) carries brand badges. A wider product palette (clarity-blue, delivery-purple, premium-gold) exists for feature theming but stays out of the marketing chrome. One green, used decisively, is the brand's whole color story above the fold.

Typographically the system has a quiet sophistication: the heavy Matter grotesk does the display work, a humanist **Glyph** sans handles UI and body, and a **Messina serif** (`{typography.serif-accent}`) makes editorial cameo appearances — a serif pull-quote or accent line that nods to the craft of writing itself. Geometry is crisp and modest: 4-6px corners (`{rounded.md}`) on buttons and inputs, with the softest tier at 10px on cards, and shadows are whisper-soft, cool slate-tinted, multi-layer rings that lift floating UI just enough to read as a real product surface without shouting. The overall impression is clear, calm, and credible — the visual equivalent of writing that's "clear, credible, and impossible to ignore."

**Key Characteristics:**
- Clean white canvas (`{colors.background}`) with a deep blue-cast near-black ink (`{colors.ink}`) for authority
- A **single mature teal-green** (`{colors.primary}`) anchors the brand — logo, primary CTA, link accents
- Green is desaturated and grown-up, signaling competence over hype — never a neon lime
- Custom **Matter** grotesk at a heavy **670 weight** for display headlines, tracked tight (-0.6px)
- Humanist **Glyph** sans for UI and body; a **Messina serif** for editorial accent moments
- An alternate dark near-black button (`{colors.ink-button}`) carries enterprise / secondary CTAs
- Crisp, modest corners — 4-6px (`{rounded.md}`) on controls, up to 10px (`{rounded.xl}`) on cards
- Whisper-soft, cool slate-tinted multi-layer shadows (`{colors.shadow-slate}`) for floating UI
- Pale aqua brand tags (`{colors.tag-brand}`) and a subordinate product palette (blue/purple/gold)
- Grid-disciplined, calm layout — credibility comes from order and restraint

## Colors

### Surface & Canvas
- **White** (`{colors.background}` / `{colors.surface}`): The dominant clean canvas and card fill.
- **Deep Blue-Black** (`{colors.surface-dark}`): The inverse surface for dark sections and footers.

### Ink / Text
- **Blue-Black** (`{colors.ink}`): Headings and body — a deep blue-cast near-black (`#0e101a`) that reads authoritative.
- **Neutral Dark** (`{colors.ink-soft}`): Secondary dark text.
- **Muted Slate** (`{colors.ink-secondary}`): Supporting copy and the Google-button label.
- **Gray** (`{colors.ink-muted}`): Captions, placeholder, default icons.

### Brand Accent
- **Grammarly Green** (`{colors.primary}`): The singular brand color — logo, primary CTA, link accent. Mature and desaturated.
- **Green Strong** (`{colors.primary-strong}`): Deeper teal for hover/pressed and badge text.
- **Bright Teal** (`{colors.primary-light}`): A lighter teal for icons and inverse accents on dark.

### Inverse / Secondary Action
- **Near-Black Button** (`{colors.ink-button}`) with **near-white text** (`{colors.on-ink-button}`): The alternate dark CTA for enterprise/secondary actions.

### Supporting Accents
- **Clarity Blue** (`{colors.accent-blue}`) / **Delivery Purple** (`{colors.accent-purple}`) / **Premium Gold** (`{colors.accent-gold}`): Product feature theming, kept out of marketing chrome.
- **Brand Tag Aqua** (`{colors.tag-brand}`): Pale aqua fill for brand badges and outlined-button hovers.
- **Critical Red** (`{colors.error}`): Error/critical states only.

### Borders & Shadow Tint
- **Hairline** (`{colors.border}`): Cool dividers and card edges.
- **Strong Border** (`{colors.border-strong}`): Input and secondary-button outlines.
- **Slate Shadow** (`{colors.shadow-slate}`): Opaque stand-in for the cool slate-tinted layered shadow (the original was rgba — flattened for the Google spec).

## Typography

### Font Family
- **Display**: `Matter` / `Matter for Grammarly` — the brand's custom geometric-humanist grotesk, with fallbacks `Helvetica Neue, Arial, sans-serif`. Used heavy (670) for headlines.
- **UI / Body**: `Glyph` — a humanist sans for navigation, body, and UI, with fallbacks `Matter, Helvetica Neue, Arial, sans-serif`.
- **Serif accent**: `MessinaSerifWeb` (Messina Serif), with fallbacks `Georgia, Times New Roman, serif` — reserved for editorial accent lines and pull-quotes that nod to the craft of writing.
- **Weights**: Matter display runs at a distinctive **670** (between semibold and bold); UI/body sits at 400, with 600 for button labels.
- **Tracking**: tight negative tracking on display (-0.6px at hero); near-zero on body.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 60px / 670 / -0.6px — **Matter** marquee headline |
| `display` | 50px / 670 — major section headlines |
| `heading` | 42px / 670 — feature headings |
| `heading-sub` | 28px / 600 — sub-section headings |
| `serif-accent` | 28px / 400 — **Messina serif** editorial accent / pull-quote |
| `body-large` | 20px / 400 — lead paragraphs (**Glyph**) |
| `body` | 18px / 400 — standard body copy |
| `body-small` | 16px / 400 — dense copy, inputs |
| `button` | 14px / 600 — button + nav labels |
| `caption` | 14px / 400 — captions, badges, metadata |

### Principles
- **Heavy Matter for headlines**: the 670 weight is the brand's display signature — confident and editorial, not generic bold.
- **Glyph for everything functional**: nav, body, and UI run in the humanist sans for calm legibility.
- **Serif as a craft signal**: Messina serif appears sparingly to evoke writing and editing — never for whole paragraphs.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px (with heavy use of 16/24/32). Spacing is orderly and comfortable — sections separate with 64-96px gaps (`{spacing.3xl}`–`{spacing.4xl}`), card internals stay at a tidy 24px.

### Grid & Container
- Centered, grid-disciplined layout with a comfortable max width
- Hero pairs left-aligned copy + CTA stack with a product/animation panel on the right
- Trust signals (org logos, "50,000 organizations" line) run full-width below the hero
- Feature sections use clean multi-column card grids

### Whitespace Philosophy
- **Order signals trust**: generous, even spacing and strict alignment make the AI feel reliable
- **Calm over density**: the page never crowds; white space carries the credibility message
- **Hairlines, not boxes**: structure comes from alignment and thin dividers, not heavy framing

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, hairline `{colors.border}` only | Most page content, bordered cards |
| Hairline ring (Level 1) | `0 0 0 0.5px` slate (`{colors.shadow-slate}`) | Subtle containment on light surfaces |
| Card (Level 2) | `0 1px 8px 0.5px` + `0 2px 12px 0.5px` slate (`{colors.shadow-slate}`) | Floating product UI, suggestion cards |
| Focus Ring | `1px solid {colors.primary}` border swap | Focused inputs and controls |

**Shadow Philosophy**: Grammarly's shadows are whisper-soft, cool **slate-tinted**, and built from multiple low-opacity layers — a tight 0.5px contact ring plus a couple of wider, very light casts. They lift floating product surfaces (the in-product suggestion cards on the marketing page) just enough to read as real UI without any drama. Most content stays flat with a hairline border. The cool slate tint (rather than neutral black) keeps the shadows in step with the calm, credible palette.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 4px | Small chips, badges, the densest controls |
| `md` | 6px | Buttons and inputs — the default interactive radius |
| `lg` | 8px | Cards and panels |
| `xl` | 10px | Larger feature cards and video frames |
| `pill` | 9999px | Avatar chips and round controls |

The radius scale is crisp and modest — buttons and inputs sit at a tidy 6px (`{rounded.md}`), cards at 8-10px. Nothing is aggressively rounded; the restraint reinforces the precise, professional feel.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Grammarly green (`{colors.primary}`) fill, white text, 6px radius. The main CTA ("Sign up — it's free"). Hover deepens to `{colors.primary-strong}`.
- **`button-outline`** — White fill, green text, 1px green border. The "Create Account" alternate. Hover fills pale aqua (`{colors.tag-brand}`).
- **`button-dark`** — Near-black (`{colors.ink-button}`) fill, near-white text. Enterprise / secondary CTAs ("Learn more").
- **`button-google`** — White fill, slate text, strong border. The compact "Sign up with Google" SSO pattern.

### Cards
- **`card`** / **`card-elevated`** — White surface, 8-10px radius. The bordered variant uses a hairline; the elevated variant carries the soft slate-tinted shadow.

### Inputs
- **`input`** — White fill, `{colors.border-strong}` outline, 6px radius. **`input-focus`** swaps the border to Grammarly green (`{colors.primary}`).

### Badges
- **`badge`** — Pale aqua (`{colors.tag-brand}`) fill, green-strong text, 4px radius. Small brand/feature tags.

### Navigation
- **`nav-bar`** — White, flush at the top, near-black labels at 14px/600, with the green "Get Grammarly" CTA on the right.

### Links
- **`link`** — Blue-black text. **`link-accent`** uses Grammarly green (`{colors.primary}`) for branded/help links.

## Do's and Don'ts

### Do
- Keep the canvas clean white (`{colors.background}`) and the ink deep blue-black (`{colors.ink}`) for authority
- Anchor the brand on the **single** Grammarly green (`{colors.primary}`) — logo, primary CTA, link accents
- Keep the green mature and desaturated; it should read competent, not hyped
- Set display headlines in **Matter at 670 weight** with tight -0.6px tracking
- Use **Glyph** for nav, body, and UI; reserve **Messina serif** for sparing editorial accent lines
- Use the dark near-black button (`{colors.ink-button}`) for enterprise / secondary CTAs, not a second green
- Keep corners crisp and modest — 6px (`{rounded.md}`) on controls, 8-10px on cards
- Lift floating product UI with whisper-soft cool **slate-tinted** shadows (`{colors.shadow-slate}`)

### Don't
- Don't use a neon or lime green — Grammarly's green is deliberately mature and desaturated
- Don't introduce a second primary-action color — green is the one "go", dark near-black is its only alternate
- Don't reach for warm or pure-black shadows — they're cool slate-tinted and barely there
- Don't over-round — the system tops out around 10px; aggressive radii break the precise feel
- Don't set whole paragraphs in the Messina serif — it's an accent, Glyph is the body face
- Don't let the product palette (blue/purple/gold) leak into the marketing CTA hierarchy
- Don't substitute a generic bold for Matter's 670 — the specific heavy weight is the display signature

---

## Responsive Behavior

### Breakpoints
*(No explicit breakpoints surfaced in extraction; the values below are the standard stops the site behaves to.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column; hero type scales 60px → ~36px; product panel stacks below copy; nav collapses to a menu; green CTA goes full-width |
| Tablet | 640–1023px | Two-column feature grids begin; hero stays left-aligned at reduced size |
| Desktop | 1024–1279px | Full layout; copy-left / product-panel-right hero |
| Large Desktop | ≥1280px | Centered max-width container; generous section padding (`{spacing.4xl}`) |

### Touch Targets
- Buttons run comfortably tall with `16px 24px` padding — easy thumb targets
- Nav and compact SSO buttons keep adequate vertical padding

### Collapsing Strategy
- **Navigation**: horizontal nav → menu toggle on mobile; the green "Get Grammarly" CTA persists
- **Hero**: copy/CTA stack and product panel go from side-by-side to stacked, panel full-width
- **Grids**: multi-column feature cards collapse to a single stacked column
- **Type**: Matter display drops 60px → ~36px while keeping proportional tracking
- **Spacing**: section gaps compress from 96px toward ~48px

### Image Behavior
- The in-product suggestion-card panel and animation reflow as flex/grid children inside their soft-shadowed frames
- Trust-logo rows wrap and reduce count on small screens

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Text: Blue-Black (`{colors.ink}`)
- Brand accent: Grammarly Green (`{colors.primary}`)
- Secondary text: Muted Slate (`{colors.ink-secondary}`)
- Border: Hairline (`{colors.border}`)
- Primary CTA: Grammarly Green (`{colors.primary}`); dark alternate (`{colors.ink-button}`)

### Example Component Prompts

- "Create a hero on white (`{colors.background}`) with a 60px blue-black (`{colors.ink}`) headline in Matter weight 670, letter-spacing -0.6px, left-aligned, a Glyph body paragraph, and a green primary button (`{colors.primary}` fill, white text, `{rounded.md}` 6px radius)"
- "Build a primary button: Grammarly green (`{colors.primary}`) fill, white text, Glyph 14px/600, `{rounded.md}` 6px radius, `16px 24px` padding; hover deepens to `{colors.primary-strong}`"
- "Make an outline button: white fill, green (`{colors.primary}`) text and 1px green border, `{rounded.md}` radius — on hover fill pale aqua (`{colors.tag-brand}`)"
- "Create a floating product card: white (`{colors.surface}`) fill, `{rounded.xl}` 10px radius, a whisper-soft cool slate-tinted multi-layer shadow (`{colors.shadow-slate}`), 24px padding"
- "Design an input: white fill, `{colors.border-strong}` 1px outline, `{rounded.md}` 6px radius; on focus swap the border to Grammarly green (`{colors.primary}`)"

### Iteration Guide

1. Start on clean white (`{colors.background}`) with deep blue-black ink (`{colors.ink}`). The credibility comes from order and restraint.
2. Anchor with exactly one Grammarly green (`{colors.primary}`). If you used a second accent for a CTA, change it to the dark near-black button (`{colors.ink-button}`).
3. Check the green is mature and desaturated — if it looks neon or lime, deepen it toward `#027e6f`.
4. Set headlines in Matter at 670 weight, -0.6px tracking; body and UI in Glyph; Messina serif only for a sparing accent line.
5. Keep corners crisp: 6px (`{rounded.md}`) on buttons/inputs, 8-10px on cards. Don't over-round.
6. Lift only floating product UI, with cool slate-tinted (`{colors.shadow-slate}`) whisper-soft shadows. Keep content flat with hairlines.
7. Hold generous, even spacing and strict alignment — the order is the trust signal.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Grammarly. Brand names and trademarks belong to their respective owners.