Grammarly Brand Design System Deep Dive
1. Brand Overview
Grammarly’s site reads like a confident, modern productivity tool. The vibe is professional but not stiff. They’re not trying to look like a hip social startup or a sterile enterprise dashboard — instead, they’ve landed in that sweet spot where you trust them with your writing but you don’t feel like you’re reading the terms of service.
The design philosophy is clear: clarity first, polish second. That’s not a knock — it’s a deliberate choice. The UI is stripped of unnecessary flourishes. Even the color palette is disciplined. No gratuitous gradients. No flashy animations. The visual language is polite but assertive, like a good editor who tells you what’s wrong without making you feel bad.
The audience is broad: individual users writing emails, students polishing essays, professionals drafting reports. The design system has to work for all of them. That means high contrast for accessibility, typography that reads well at all sizes, and components that make sense on both desktop and mobile.
The brand’s identity leans heavily on its core green tone (rgb(2, 126, 111) / #027e6f) as a trust signal. This is a color associated with growth, success, and calm authority. It’s not as aggressive as a pure blue (think Facebook) or as playful as a bright orange (think Grammarly’s own competitors in casual writing tools). They want you to feel safe and supported.
Another big part of the aesthetic: whitespace. The spacing scale (8px base) is used religiously, giving breathing room to all elements. This prevents the dense, cramped feel of some productivity apps, and it allows the brand’s voice to come through without visual noise.
Typography also plays a role in tone-setting. They’re using custom families (“matter” for headings, “glyph” for UI and body) with weights and sizes tuned for clarity. No fancy display fonts, no serif nostalgia. Everything is sans-serif, clean, and modern.
If I had to sum up the Grammarly design philosophy in one sentence: It’s confident minimalism — every element earns its place, nothing screams for attention, but the hierarchy is unmistakable.
2. Color System
2.1 Primary Colors
The primary brand color is rgb(2, 126, 111) (#027e6f). This is used for primary CTAs and key interactive elements. It’s a deep teal-green — enough saturation to stand out, but not so bright that it becomes fatiguing. Green here is about correctness and trust, a subtle nod to “green checkmarks” and approval.
Compared to competitors:
- Hemingway Editor leans into warm yellows and oranges.
- Microsoft Word is heavy on blue.
- Grammarly’s green differentiates it instantly in a sea of productivity blues.
They also use white (rgb(255, 255, 255) / #ffffff) extensively as a background and neutral canvas. This keeps the green and dark text colors punchy.
2.2 Complete Palette
| Color Name / Context Guess | Hex | Role/Source | Usage |
|---|---|---|---|
| Dark Navy | #1f243c | headercontainerrelative, headers | Primary header background |
| Almost Black | #0e101a | hero sections, CTA descriptions | Body background sections |
| Dark Gray | #2e2e2e | — | Neutral text or dividers |
| Browser Blue | #0000ee | links | Hyperlinks |
| Blackish Gray | #1c1c1c | base UI text | Body text |
| White | #ffffff | primaryheaderbase, buttons | Background, text on dark |
| Brand Green | #027e6f | base | Primary CTAs |
| Black | #000000 | base | Pure black text/icons |
| Deep Teal | #0d8065 | testimonial stats | Accent green |
| Slate Gray | #4d536e | — | Secondary text |
From CSS variables, there’s an extended functional palette:
| Token Name | Hex | Role |
|---|---|---|
| --button-ghost-text-active | #016a5e | Ghost button active text |
| --color-border-addition-subdued | #73e1d4 | Additions border |
| --color-background-correctness-subdued | #ffeae9 | Background for correctness markers |
| --color-background-clarity-subdued | #f3f6ff | Background for clarity markers |
| --button-tertiary-text-active | #545454 | Tertiary button active |
| --tag-tip-bg | #d1dbfe | Tip tag background |
| --color-icon-addition-inverse | #2cc9b6 | Addition icon on dark |
| --color-border-critical-subdued | #ffa8a8 | Critical border |
| --tag-brand-bg | #b3f8f8 | Brand tag background |
| --color-illustration-shadow-default | #a8a8a8 | Illustration shadows |
| --color-logo-hero-dark | #421d24 | Dark hero logo |
| --color-icon-base-default | #707070 | Icon base |
| --color-border-warning-default | #bd5200 | Warning border |
| --color-background-critical-default | #eb0a00 | Critical background |
| --tag-success-bg | #b1f0e8 | Success tag background |
| --color-background-addition-subdued | #eafaf9 | Addition background |
| --color-background-premium-subdued | #fff6e0 | Premium background |
| --color-elevation-outline-default-1 | #d9d9d9 | Outline |
| --color-background-delivery-default | #5e47e5 | Delivery background |
| --color-border-elevated-default | #ffffff00 | Transparent border |
| --color-icon-base-subdued | #bcbcbc | Subdued icons |
| --color-background-pro-default | #ffbf47 | Pro background |
| --button-premium-text-hover | #7a3500 | Premium hover text |
| --color-border-deletion-subdued | #696969 | Deletion subdued border |
| --color-icon-deletion-default | #cd0800 | Deletion icon |
| --color-border-premium-subdued | #ffa10a | Premium subdued border |
| --color-icon-critical-inverse | #ff7a74 | Critical icon inverse |
| --color-icon-warning-default | #e57300 | Warning icon |
| --color-highlight-deletion-default | #ebebeb | Deletion highlight |
| --color-text-clarity-default | #02379e | Clarity text |
| --color-background-enterprise-default | #1b0d6f | Enterprise background |
| --color-icon-delivery-inverse | #a598f0 | Delivery icon inverse |
| --color-border-warning-subdued | #ffdc85 | Warning subdued border |
| --color-highlight-addition-default | #def6f3 | Addition highlight |
| --color-background-plagiarism-subdued | #e6fdfd | Plagiarism background |
| --tag-warning-bg | #ffebb8 | Warning tag background |
| --color-border-base-default | #7f7f7f | Base border |
| --tag-critical-bg | #ffd1d0 | Critical tag background |
| --color-background-base-subdued | #f5f5f5 | Subdued base background |
| --color-border-clarity-default | #3e6cf4 | Clarity border |
| --color-background-clarity-default | #2551da | Clarity background |
| --color-border-correctness-default | #f00c00 | Correctness border |
2.3 Color Relationships
The dark navy (#1f243c) against white (#ffffff) has excellent contrast — perfect for headers. The brand green (#027e6f) on white is also high contrast (meets WCAG AAA for normal text). Browser blue (#0000ee) is the default link color and is readable on white, but can be harsh — probably why they also have custom link greens.
Functional colors (critical red #eb0a00, warning orange #bd5200, success green #b1f0e8 background) are distinct enough not to be confused.
2.4 Usage Guide
Do:
- Use #027e6f for primary CTAs.
- Keep large areas white or very light to let interactive colors pop.
- Use subdued backgrounds (#f3f6ff, #eafaf9, #fff6e0) for status messaging.
Avoid:
- Using #0000ee in large blocks — it’s a system blue, not a brand tone.
- Placing brand green on dark navy — contrast suffers.
- Mixing too many functional colors in one view — they’re designed to be used sparingly.
3. Typography
3.1 Font Families
Two main families:
- matter — used for large headings. No fallbacks listed, so likely custom/self-hosted.
- glyph — used for links, UI, smaller headings, captions. Sometimes with a fallback stack:
system-ui, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Helvetica Neue. - sans-serif is the generic fallback in some contexts.
No Google Fonts or Adobe Fonts — they’re using their own assets.
3.2 Type Scale
| Context | Font | Size | Weight | Line Height | Spacing |
|---|---|---|---|---|---|
| heading-1 | matter | 60px (3.75rem) | 670 | 1.10 | -0.6px |
| heading-1 | matter | 50px (3.13rem) | 670 | 1.12 | -0.5px |
| heading-1 | matter | 42px (2.63rem) | 670 | 1.10 | -0.42px |
| link | glyph | 20px (1.25rem) | 400 | 1.50 | — |
| heading-1 | glyph | 20px (1.25rem) | 400 | 1.50 | — |
| heading-1 | glyph | 18px (1.13rem) | 400 | 1.44 | — |
| link | Glyph | 16px (1.00rem) | 400 | — | — |
| heading-1 | Glyph | 16px (1.00rem) | 400 | — | — |
| heading-1 | sans-serif | 16px (1.00rem) | 400 | — | — |
| button | Glyph | 14px (0.88rem) | 400 | 1.43 | — |
| caption | Glyph | 14px (0.88rem) | 400 | 1.43 | — |
| caption | glyph | 14px (0.88rem) | 700 | 1.50 | 0.54px |
| link | Glyph | 14px (0.88rem) | 400 | 1.43 | — |
| link | Glyph | 14px (0.88rem) | 700 | 1.43 | — |
| caption | glyph | 14px (0.88rem) | 400 | 1.50 | — |
| link | glyph | 14px (0.88rem) | 400 | 1.50 | — |
| caption | glyph | 14px (0.88rem) | 700 | 1.50 | — |
| button | Glyph | 13.3333px (0.83rem) | 400 | — | — |
| caption | Glyph | 13.3333px (0.83rem) | 400 | 0.00 | — |
| caption | Glyph | 12px (0.75rem) | 400 | — | — |
3.3 Hierarchy
Headings are heavy (670 weight) and large, with slight negative letter-spacing to pull the characters closer. That gives them a confident, “tight” feel. Body and UI text is lighter (400 weight) with generous line heights for readability.
The scale drops fast — from 60px all the way down to 12px captions — but the consistent family and weight management keep it from feeling disjointed.
4. Spacing & Layout
4.1 Spacing Scale
They’re on an 8px base grid. Common values:
| Value | Rem | Count | Use |
|---|---|---|---|
| 3px | 0.19rem | 2 | Fine adjustments |
| 4px | 0.25rem | 3 | Icon padding |
| 8px | 0.50rem | 204 | Small gaps, button padding |
| 10px | 0.63rem | 45 | Slightly looser small gaps |
| 14px | 0.88rem | 10 | Text padding |
| 16px | 1.00rem | 108 | Component padding |
| 20px | 1.25rem | 2 | Medium gaps |
| 24px | 1.50rem | 72 | Card padding |
| 32px | 2.00rem | 83 | Section spacing |
| 40px | 2.50rem | 14 | Larger section spacing |
| 96px | 6.00rem | 10 | Hero padding |
| 100px | 6.25rem | 6 | Hero margins |
4.2 Layout
No explicit breakpoints in the data. Likely responsive with flex/grid. The consistent use of 8px multiples means you can predict spacing between any two elements.
5. Visual Elements
Border Radius
| Value | Count | Elements |
|---|---|---|
| 0px 8px 8px 0px | 2 | div |
| 4px | 102 | button, a |
| 6px | 20 | button, nav toggles |
| 8px 0px 0px 8px | 2 | div |
| 8px 8px 0px 0px | 2 | div |
| 8px | 7 | card |
| 10px | 6 | video |
| 20px | 1 | label |
| 38px | 1 | label |
| 50% | 2 | carousel controls |
Shadows
Two detailed multi-layer shadows, used sparingly. rgba(135, 141, 162, 0.25) etc. Not heavy drop shadows — subtle elevation.
Borders and Dividers
Many 1px solid borders in various colors (#d9d9d9, #027e6f, #1f243c). Borders are used more than shadows for separation.
6. Components
6.1 Buttons
Variant 1 — Ghost Header Button
Default: transparent background, #1c1c1c text, 4px radius, no visible border.
Variant 2 — Primary CTA
Default: #027e6f background, white text, 6px radius, no visible border.
Variant 3 — White Button with Slate Border
Default: white background, #4d536e text, 1px solid #6d758d border.
Variant 4 — Circular Icon Button
Default: transparent background, rgba(16,16,16,0.3) text, 50% radius, 1px solid #c6cbde.
Variant 5 — Dark CTA
Default: #1c1c1c background, #f5f5f5 text, 6px radius.
No hover/active states in the data, but you’d expect color shifts.
6.2 Links
Five variants, from system blue (#0000ee) to brand green (#027e6f) to dark nav text (#1f243c). All have text-decoration: none by default — so underlines are removed.
6.3 Forms
No text input styles extracted — likely styled minimally.
6.4 Cards
Border radius: 8px. Likely using subtle shadows or borders for separation.
7. Design Tokens
:root {
/* Colors - Palette */
--color-dark-navy: #1f243c;
--color-almost-black: #0e101a;
--color-dark-gray: #2e2e2e;
--color-browser-blue: #0000ee;
--color-blackish-gray: #1c1c1c;
--color-white: #ffffff;
--color-brand-green: #027e6f;
--color-black: #000000;
--color-deep-teal: #0d8065;
--color-slate-gray: #4d536e;
/* Colors - Functional (from cssVariables) */
--button-ghost-text-active: #016a5e;
--color-border-addition-subdued: #73e1d4;
--color-background-correctness-subdued: #ffeae9;
--color-background-clarity-subdued: #f3f6ff;
--button-tertiary-text-active: #545454;
--tag-tip-bg: #d1dbfe;
--color-icon-addition-inverse: #2cc9b6;
--color-border-critical-subdued: #ffa8a8;
--tag-brand-bg: #b3f8f8;
--color-illustration-shadow-default: #a8a8a8;
--color-logo-hero-dark: #421d24;
--color-icon-base-default: #707070;
--color-border-warning-default: #bd5200;
--color-background-critical-default: #eb0a00;
--tag-success-bg: #b1f0e8;
--color-background-addition-subdued: #eafaf9;
--color-background-premium-subdued: #fff6e0;
--color-elevation-outline-default-1: #d9d9d9;
--color-background-delivery-default: #5e47e5;
--color-border-elevated-default: #ffffff00;
--color-icon-base-subdued: #bcbcbc;
--color-background-pro-default: #ffbf47;
--button-premium-text-hover: #7a3500;
--color-border-deletion-subdued: #696969;
--color-icon-deletion-default: #cd0800;
--color-border-premium-subdued: #ffa10a;
--color-icon-critical-inverse: #ff7a74;
--color-icon-warning-default: #e57300;
--color-highlight-deletion-default: #ebebeb;
--color-text-clarity-default: #02379e;
--color-background-enterprise-default: #1b0d6f;
--color-icon-delivery-inverse: #a598f0;
--color-border-warning-subdued: #ffdc85;
--color-highlight-addition-default: #def6f3;
--color-background-plagiarism-subdued: #e6fdfd;
--tag-warning-bg: #ffebb8;
--color-border-base-default: #7f7f7f;
--tag-critical-bg: #ffd1d0;
--color-background-base-subdued: #f5f5f5;
--color-border-clarity-default: #3e6cf4;
--color-background-clarity-default: #2551da;
--color-border-correctness-default: #f00c00;
/* Typography */
--font-heading: "matter";
--font-ui: "glyph", system-ui, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
/* Spacing */
--space-3: 3px;
--space-4: 4px;
--space-8: 8px;
--space-10: 10px;
--space-14: 14px;
--space-16: 16px;
--space-20: 20px;
--space-24: 24px;
--space-32: 32px;
--space-40: 40px;
--space-96: 96px;
--space-100: 100px;
/* Radius */
--radius-none: 0;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: 10px;
--radius-xxl: 20px;
--radius-huge: 38px;
--radius-full: 50%;
/* Shadows */
--shadow-1: rgba(135, 141, 162, 0.25) 0px 2px 12px 0.5px, rgba(135, 141, 162, 0.1) 0px 1px 8px 0.5px, rgba(135, 141, 162, 0.5) 0px 0px 2px 0.5px, rgb(135, 141, 162) 0px 0px 0px 0.5px;
}8. AI Coding Assistant Prompt
# Grammarly Design System Specification
You are a Grammarly design expert. Build UIs matching their visual language exactly.
## Brand Context
Grammarly’s design is confident minimalism. It uses a disciplined color palette, clear sans-serif typography, and an 8px spacing grid. Visuals support clarity — whitespace, subtle shadows, and functional color coding drive hierarchy.
## Color Palette
- Dark Navy: #1f243c — Header backgrounds
- Almost Black: #0e101a — Dark section backgrounds
- Dark Gray: #2e2e2e — Neutral text/dividers
- Browser Blue: #0000ee — Legacy hyperlink blue
- Blackish Gray: #1c1c1c — Primary body text
- White: #ffffff — Backgrounds, text on dark
- Brand Green: #027e6f — Primary CTAs, key actions
- Black: #000000 — Icons, text
- Deep Teal: #0d8065 — Accent green (testimonials)
- Slate Gray: #4d536e — Secondary text
- Critical Red: #eb0a00 — Error backgrounds
- Warning Orange: #bd5200 — Warning borders
- Success Green BG: #b1f0e8 — Success tags
- Clarity Blue BG: #f3f6ff — Clarity backgrounds
- ... and full functional palette from tokens
## Typography
- Headings: "matter"
- UI/Body: "glyph", system-ui, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Helvetica Neue, sans-serif
| Level | Size | Weight | Line Height | Use |
|-----------|-------|--------|-------------|-----|
| H1 (lg) | 60px | 670 | 1.10 | Hero titles |
| H1 (md) | 50px | 670 | 1.12 | Section titles |
| H1 (sm) | 42px | 670 | 1.10 | Subsections |
| Link LG | 20px | 400 | 1.50 | Large nav links |
| Body | 16px | 400 | — | Paragraphs |
| Button | 14px | 400 | 1.43 | Buttons |
| Caption | 14px | 700 | 1.50 | Labels |
| Small | 12px | 400 | — | Fine print |
## Spacing & Grid
Base: 8px. Scale: 3px, 4px, 8px, 10px, 14px, 16px, 20px, 24px, 32px, 40px, 96px, 100px.
- Button padding: 8px–24px
- Card padding: 24px
- Section gaps: 32px–40px
- Hero padding: 96px+
## Border Radius
- none: 0 — hard edges
- sm: 4px — small buttons, links
- md: 6px — CTAs
- lg: 8px — cards
- xl: 10px — videos
- xxl: 20px — labels
- huge: 38px — large labels
- full: 50% — circular buttons
## Shadows & Depth
- Primary shadow: rgba(135, 141, 162, 0.25) 0px 2px 12px 0.5px, rgba(135, 141, 162, 0.1) 0px 1px 8px 0.5px, rgba(135, 141, 162, 0.5) 0px 0px 2px 0.5px, rgb(135, 141, 162) 0px 0px 0px 0.5px
- Use sparingly. Prefer borders for separation.
## Component Specifications
### Primary Button
Default:
```css
background-color: #027e6f;
color: #ffffff;
padding: 0 8px;
border-radius: 6px;
border: 1px solid transparent;
font-size: 14px;
font-weight: 400;
```
Hover: darken background slightly.
Focus: outline 2px solid #027e6f.
Disabled: opacity 0.5.
### Secondary Button (White with Border)
```css
background-color: #ffffff;
color: #4d536e;
padding: 8px 16px;
border-radius: 6px;
border: 1px solid #6d758d;
font-size: 13.3333px;
```
### Ghost Header Button
Transparent background, #1c1c1c text, 4px radius.
### Navigation Links
Default: no underline, color from palette. Hover: change color to accent.
### Input Fields
Border: 1px solid #d9d9d9; radius: 4px; background: #ffffff.
### Cards
Background: #ffffff; radius: 8px; padding: 24px; border: 1px solid #d9d9d9.
## Layout & Responsive Rules
- Maintain multiples of 8px for all spacing.
- Max content width: flexible.
- Page padding: 16px mobile / 32px desktop.
## Interaction Rules
- Transition: 150ms ease for hover/focus changes.
- Focus indicators: 2px solid primary color.
- Avoid motion-heavy effects.
## DO
- Use only colors from palette
- Maintain 8px grid
- Use "matter" for headings, "glyph" for body/UI
- Apply correct radius per component type
- Keep interface uncluttered
## DON'T
- Invent new colors
- Mix sharp and rounded corners
- Overuse shadows
- Override font stacks
- Remove focus styles
## Code Examples
Primary Button:
```css
.btn-primary {
background: #027e6f;
color: #fff;
padding: 0 8px;
border-radius: 6px;
border: none;
font-size: 14px;
font-weight: 400;
transition: background 150ms ease;
}
.btn-primary:hover {
background: #016a5e;
}
```
Card:
```css
.card {
background: #fff;
border-radius: 8px;
padding: 24px;
border: 1px solid #d9d9d9;
}
```
Input:
```css
.input {
border: 1px solid #d9d9d9;
border-radius: 4px;
padding: 8px;
font-size: 14px;
}
.input:focus {
border-color: #027e6f;
outline: none;
}
```9. Summary
TL;DR — Grammarly’s design system is clean, controlled, and professional. An 8px grid, a disciplined green-and-white palette, and sans-serif typography create a confident minimalism that works for a wide audience.
Brand Keywords
- confident-minimalism
- clarity-first
- trust-green
- whitespace-driven