---
title: "Grammarly design system"
variant: extended
source: https://www.grammarly.com/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/grammarly-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Grammarly · Design System

> Clear writing, framed in calm, confident teal.

**Theme:** light · **Industry:** ai · **Source:** https://www.grammarly.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A bright, spacious SaaS homepage pairs bold editorial headlines with restrained teal calls to action and product-interface demonstrations. The page moves from writing features and pricing to enterprise proof, brand positioning, and a dense multi-column footer.

## North star

Keep the page calm and legible: use white space and strong type for structure, reserving teal for actions, links, and meaningful product proof.

## Overview

Grammarly’s homepage uses a predominantly white canvas to keep attention on large, dark headlines, product demonstrations, and clear calls to action. The core brand accent, #027e6f, appears in signup buttons, links, interface details, and the full-width enterprise results section; it provides contrast without turning the page into a heavily coloured experience. Matter headlines are bold, compact, and slightly tight in tracking, while Glyph supports navigation, body copy, controls, and footer links. The opening hero is centered and spacious, followed by a horizontally browsable feature-card row. Lower feature sections alternate text and product UI, while pricing and enterprise proof use aligned, card-based layouts. Product screenshots and animations are functional illustrations rather than a separate decorative art direction. Fine gray borders define cards and controls; the page otherwise stays flat, with generous whitespace and restrained corner rounding.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas, light card interiors, and occasional text on teal buttons. |
| Grammarly Teal | `#027e6f` | `--color-grammarly-teal` | brand | Primary signup buttons, links, product UI accents, and the full-width enterprise results band. |
| Midnight Slate | `#1f243c` | `--color-midnight-slate` | neutral | Navigation, supporting text, footer content, and card copy. |
| Soft Divider | `#ebebeb` | `--color-soft-divider` | semantic | Subtle borders and hairlines around controls and page elements. |
| Deep Ink | `#0e101a` | `--color-deep-ink` | neutral | Primary headings and high-emphasis body text. |
| Card Outline | `#d9d9d9` | `--color-card-outline` | semantic | Borders around pricing and content cards; structural rather than a prominent canvas colour. |
| Graphite | `#2e2e2e` | `--color-graphite` | neutral | Occasional secondary text and button details. |
| True Black | `#000000` | `--color-true-black` | neutral | Sparse dark text captured in headings and copy; not the main text treatment. |
| Muted Steel | `#6d758d` | `--color-muted-steel` | semantic | Minor control-border detail, not a defining page colour. |
| Button Charcoal | `#1c1c1c` | `--color-button-charcoal` | neutral | Small dark navigation and button text details. |
| Deep Accent | `#0d8065` | `--color-deep-accent` | accent | Occasional teal text accent; a minor variation beside the primary brand teal. |
| Ash Gray | `#545454` | `--color-ash-gray` | neutral | Occasional subdued text and control detail. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#027e6f` (Grammarly Teal) · `--color-text` → `#0e101a` (Deep Ink) · `--color-text-muted` → `#1f243c` (Midnight Slate) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#ebebeb` (Soft Divider) · `--color-accent` → `#027e6f` (Grammarly Teal) · `--color-accent-2` → `#0d8065` (Deep Accent) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0e101a` | `#ffffff` | 18.96:1 | AAA |
| `#0e101a` | `#027e6f` | 3.81:1 | AA-large |
| `#1f243c` | `#ffffff` | 15.26:1 | AAA |
| `#1f243c` | `#027e6f` | 3.06:1 | AA-large |
| `#ffffff` | `#027e6f` | 4.98:1 | AA |
| `#027e6f` | `#ffffff` | 4.98:1 | AA |

### Gradients

- `linear-gradient(to right, rgb(255, 255, 255), rgba(0, 0, 0, 0))`
- `linear-gradient(to left, rgb(255, 255, 255), rgba(0, 0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Glyph | `--font-glyph` | webfont | 400, 700 | Navigation, body copy, links, buttons, captions, and much of the interface. | Inter |
| matter | `--font-display` | webfont | 670, 600 | Display headings and section titles. | Inter |
| Inter | `--font-inter` | system | 400 | System-font fallback and minor interface text. | Inter |

- **Glyph:** Clean sans-serif with regular body and nav; bold control labels. Sentence case throughout.
- **matter:** Strong display weight with slightly tight tracking; large headlines use sentence case.
- **Inter:** Neutral fallback sans-serif; use regular weight and preserve the site's restrained hierarchy.

### Type scale — Augmented Fourth (ratio ≈ 1.375, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 52px | 670 | 1.12 | -0.01em | — | matter | Centered hero statement; largest display headline. |
| h2 | 46px | 670 | 1.09 | -0.01em | — | matter | Section titles, including feature, pricing, and enterprise headings. |
| h3 | 36px | 670 | 1.11 | -0.01em | — | matter | Subsection and card-level headings. |
| body | 20px | 400 | 1.5 | 0 | — | glyph | Introductory copy and primary explanatory text. |
| caption | 14px | 400 | 1.25 | 0 | — | Glyph | Small legal notes and supporting labels. |
| button | 14px | 700 | 1.43 | 0 | — | Glyph | Signup and other action labels. |
| nav | 14px | 400 | 1.25 | 0 | — | Glyph | Header navigation and compact menu links. |
| link | 14px | 400 | 1.5 | 0 | — | glyph | Inline links and supporting calls to action. |

OpenType features in use: `"cv08", "ss01"`.

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 8, 12, 14, 16, 24, 32, 40, 48, 80, 96 px.
- Section rhythm 96px · element gap 8px · card padding 40px · max content width 1280px.

The page uses a wide desktop canvas with content aligned to a measured maximum width of 1280px. The hero centers its headline, supporting text, signup controls, and legal note; a horizontal carousel sits beneath it. Feature storytelling then shifts to two-column text-and-product layouts, followed by three-column pricing and a centered enterprise section. Sections have a spacious rhythm, with a measured 96px section gap and an 8px base spacing unit. The footer becomes a dense five-column link grid, contrasting with the open feature sections.

## Shape & elevation

- Radius: button `6px` · card `8px` · media `10px` · link `8px` · xs `4px` · sm `6px` · md `8px` · lg `10px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The design is mostly flat and does not rely on measured shadows. Thin gray borders distinguish pricing cards, controls, and other surfaces from the white canvas; card corners are gently rounded where measured. Product screenshots and media provide their own visual depth, while the teal enterprise band creates the clearest section-level contrast.

## Imagery

Imagery is primarily product UI: screenshots and animated interface examples demonstrate rewriting, tone, proofreading, and review features. The hero presents a horizontal row of rounded feature cards, with colorful interface captures set above short labels. Later demonstrations are framed within split layouts, while enterprise proof appears as customer testimonial cards. Treat screenshots as explanatory product illustrations, not as the source of the brand palette; preserve their varied colors inside their frames.

## Components

### Header navigation

White horizontal header with the Grammarly mark, compact navigation links, account actions, and a teal signup button.

### Hero signup

Centered headline and short supporting copy above primary teal signup and outlined Google signup controls, with a small legal note.

### Feature carousel cards

Horizontal product-example cards with colorful UI artwork, rounded upper media, concise titles, and explanatory copy.

### Feature split

Two-column section combining a short heading and paragraph with a framed writing-interface demonstration.

### Pricing cards

Three aligned plan columns, fine gray borders, plan descriptions, price, action, and checkmarked feature lists.

### Enterprise results band

Full-width Grammarly Teal section with centered ROI messaging and horizontally arranged customer proof cards.

### Multi-column footer

Dense five-column directory of product, learning, feature, company, and connection links on the white canvas.

### Measured component styles

- **Primary button** (“Sign up It’s free”): background #027e6f · text #ffffff · border 1px solid · radius 6px · padding 16px 24px · 400 14px Glyph
- **Secondary button** (“Product”): transparent background · text #1c1c1c · border 1px solid · radius 4px · padding 0px 12px · 400 14px Glyph
- **Link** (“20 days saved annually per user Mihai Fo”): background #ffffff · text #0e101a · radius 8px · padding 0px · 400 16px Glyph
- **Card** (“For individuals or teams Pro Deliver imp”): transparent background · text #1f243c · border 1px solid #d9d9d9 · radius 0px · padding 40px · 400 16px Glyph
- **Navigation item** (“Docs”): transparent background · text #1f243c · radius 0px · padding 0px · 400 14px Glyph

## Do

- Use Gallery White as the dominant page canvas.
- Reserve Grammarly Teal for primary actions, links, and key proof.
- Set headlines in a bold, compact display sans-serif.
- Center the hero and keep its copy concise.
- Use product UI imagery to explain features.
- Separate cards with fine gray borders and gentle rounding.
- Preserve generous whitespace between major sections.

## Don't

- Do not flood ordinary sections with teal backgrounds.
- Do not add decorative gradients or shadows absent from the measured design.
- Do not make the page feel dense above the fold.
- Do not substitute generic stock imagery for product demonstrations.
- Do not use multiple competing accent colours for interface controls.
- Do not turn small navigation and legal copy into display typography.

## Agent prompt

Build a new page in Grammarly’s visual style: use a bright Gallery White (#ffffff) canvas, dark Deep Ink (#0e101a) headlines, and Midnight Slate (#1f243c) for navigation and supporting copy. Apply Grammarly Teal (#027e6f) selectively to primary buttons, inline links, meaningful interface details, and any major proof band. Use a bold, slightly tight sans-serif for headings and a neutral sans-serif for body, navigation, and controls. Keep the hero centered and open, then use two-column feature sections with framed product-interface demonstrations. Use aligned, lightly bordered cards for pricing or proof, with restrained corner rounding and no decorative shadows. Maintain generous vertical spacing, concise copy, clear action hierarchy, and a denser multi-column footer. Treat colors inside screenshots as product imagery, not brand palette.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero and signup actions above a horizontal feature-card carousel. | Primary signup, Google signup, Feature carousel | Large centered headline, Teal CTA, Product UI cards |
| 2 | feature-split | Two-column feature section with copy beside a product demonstration. | Feature explanation, Product demonstration | Section heading, Framed interface media |
| 3 | feature-split | Two-column feature section with alternating text and interface media. | Tone guidance, Product demonstration | Heading and paragraph, Embedded interface animation |
| 4 | feature-split | Two-column section combining audience-focused copy and a writing review example. | Audience perspective, Writing review | Text block, Document interface media |
| 5 | feature-split | Spacious two-column content block with a compact inline link. | Trust information, Learn more | Section heading, Understated text link |
| 6 | pricing | Centered title and billing switch above three aligned plan cards. | Monthly/yearly toggle, Compare plans, Plan actions | Three bordered cards, Feature checklists, Plan pricing |
| 7 | stats | Full-width teal band with centered heading and horizontal proof-card row. | Enterprise CTA, Browse customer results | Teal section background, Metric-led cards, Carousel controls |
| 8 | feature-split | Two-column section with a visual on one side and explanatory copy on the other. | Learn more | Brand illustration, Short text block, Dark CTA |
| 9 | cta | Two-column closing CTA with copy and signup controls beside a teal brand graphic. | Signup, Google signup | Large headline, Teal action, Brand illustration |
| 10 | footer | Dense five-column directory of product, learning, features, company, and connection links. | Browse site sections, Find product resources | Multi-column link lists, Compact typography |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/grammarly-com