---
version: alpha
name: Grammarly
description: "A single confident green, speaking on a page of pure white."
colors:
  on-surface-variant: "#2E2E2E"
  on-surface: "#1C1C1C"
  surface: "#FFFFFF"
  outline: "#C6CBDE"
  primary: "#027E6F"
  green-text: "#0D8065"
  mint-signal: "#00E0AC"
  display-near-black: "#0E101A"
  midnight-navy: "#1F243C"
  pure-black: "#000000"
  slate-gray: "#545454"
  mid-gray: "#707070"
  slate-blue: "#4D536E"
  slate-border: "#6D758D"
  hairline: "#D9D9D9"
  card-border: "#EBEBEB"
  cloud: "#F5F5F5"
  link-blue: "#0000EE"
typography:
  legal-fine-print:
    fontFamily: Glyph
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  ui-button:
    fontFamily: Glyph
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  body:
    fontFamily: Glyph
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  lead-paragraph:
    fontFamily: Glyph
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  card-title:
    fontFamily: Glyph
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0em
  feature-heading:
    fontFamily: Glyph
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0em
  section-display:
    fontFamily: Matter
    fontSize: 36px
    fontWeight: 570
    lineHeight: 1.15
    letterSpacing: -0.01em
  hero-display:
    fontFamily: Matter
    fontSize: 46px
    fontWeight: 570
    lineHeight: 1.1
    letterSpacing: -0.015em
  hero-display-2:
    fontFamily: Matter
    fontSize: 52px
    fontWeight: 570
    lineHeight: 1.05
    letterSpacing: -0.02em
rounded:
  nav-ghost-button: 4px
  primary-secondary-button: 6px
  card: 8px
  panel-pill: 10px
  large-pill: 20px
  rounded-container: 38px
spacing:
  2xs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 50px
---
# Grammarly — Style Reference
> A single confident green, speaking on a page of pure white.

**Theme:** light

Grammarly's system is built on restraint: an almost entirely white canvas, near-black ink for the words, and one saturated pine-green (`#027E6F`) that carries every action, the wordmark, and the brand's whole identity. The signature move is confidence through emptiness — the hero is text and two buttons floating in generous white space, with the color reserved for illustration cards below the fold. Type does the heavy lifting: **Matter** sets oversized, tightly-drawn display headings at weight 670, while **Glyph** keeps body copy calm and readable. Product screenshots use a wider mint-and-cool spectrum (`#00E0AC` highlights, blue and lime card fields) but the chrome around them stays disciplined — green, ink, and grays only. The result reads like a well-edited paragraph: nothing extra, every element earning its place.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Grammarly Green | `#027E6F` | `--color-green` | The brand. Primary CTA fill, the "G" mark, focus/active accents — the ONE color that means action. |
| Green Text | `#0D8065` | `--color-green-text` | Slightly brighter green reserved for green text-on-white (links/labels), where the CTA fill would fail contrast at small sizes. |
| Mint Signal | `#00E0AC` | `--color-mint` | Bright highlight/underline inside product illustrations only — never chrome, never a CTA. |
| Ink | `#1C1C1C` | `--color-ink` | Primary body/text ink and the wordmark. The default "black." |
| Display Near-Black | `#0E101A` | `--color-display` | Cool near-black for the largest display headings — a hair bluer than ink. |
| Midnight Navy | `#1F243C` | `--color-heading` | Section headings and secondary display — navy-tinted, softer than pure black. |
| Pure Black | `#000000` | `--color-black` | Card titles and dense UI labels inside product surfaces. |
| Charcoal | `#2E2E2E` | `--color-charcoal` | Secondary text and darker hairlines. |
| Slate Gray | `#545454` | `--color-slate` | Muted supporting text; the carousel control's text/border. |
| Mid Gray | `#707070` | `--color-muted` | Tertiary captions and de-emphasized metadata. |
| Slate Blue | `#4D536E` | `--color-slate-blue` | Secondary-button text — a cooler gray that pairs with its slate border. |
| Slate Border | `#6D758D` | `--color-border-slate` | Outline of the outlined/secondary button. |
| Cool Border | `#C6CBDE` | `--color-border-cool` | Light slate dividers in cooler UI regions. |
| Hairline | `#D9D9D9` | `--color-border` | Default neutral hairline / input outline. |
| Card Border | `#EBEBEB` | `--color-border-card` | The 1px outline that defines feature cards on white. |
| Cloud | `#F5F5F5` | `--color-cloud` | The only tinted surface — control backgrounds (carousel arrow) and subtle fills. |
| White | `#FFFFFF` | `--color-white` | The canvas. ~90% of the page. |
| Link Blue | `#0000EE` | `--color-link` | Native browser-blue on plain inline legal links only (Terms, Privacy) — a deliberate un-styled default, not a brand color. |

## Tokens — Typography
### Matter — Display & headings, tightly-set at weight 670 · `--font-display`
- **Substitute:** Söhne, Inter, ui-sans-serif
- **Weights:** 570, 670 (the distinctive semi-bold display weight)
- **Sizes:** 52px, 46px, 36px, 22px
- **Line height:** ~1.05–1.15 for display, ~1.2 for section heads
- **Letter spacing:** slightly negative on the largest sizes (tightly drawn)
- **Role:** Every hero line and section heading. The odd 670 weight gives headings a confident, custom feel between semibold and bold.

### Glyph — Body & UI text, calm and neutral · `--font-body`
- **Substitute:** Inter, Roboto, system-ui
- **Weights:** 400, 700
- **Sizes:** 20px, 18px, 16px, 14px, 12px
- **Line height:** ~1.5 for paragraph copy
- **Letter spacing:** none (0)
- **Role:** Subheads, paragraphs, buttons, labels, and legal fine print. Recedes so Matter and the green can lead.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Legal / fine print | 12px | 1.5 | 0 | `--text-xs` |
| UI / button | 14px | 1.4 | 0 | `--text-sm` |
| Body | 16px | 1.5 | 0 | `--text-base` |
| Lead paragraph | 18px | 1.5 | 0 | `--text-lg` |
| Card title | 20px | 1.3 | 0 | `--text-xl` |
| Feature heading | 22px | 1.3 | 0 | `--text-2xl` |
| Section display | 36px | 1.15 | -0.01em | `--text-4xl` |
| Hero display (sm) | 46px | 1.1 | -0.015em | `--text-5xl` |
| Hero display | 52px | 1.05 | -0.02em | `--text-6xl` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 2xs | 4px | `--spacing-2xs` |
| xs | 8px | `--spacing-xs` |
| sm | 12px | `--spacing-sm` |
| md | 16px | `--spacing-md` |
| lg | 24px | `--spacing-lg` |
| xl | 50px | `--spacing-xl` |

### Border Radius
| Element | Value |
|---------|-------|
| Nav / ghost button | 4px |
| Primary & secondary button | 6px |
| Card | 8px |
| Panel / pill | 10px |
| Large pill | 20px |
| Rounded container | 38px |
| Circular control (carousel arrow) | 50% |

### Shadows
The system ships effectively no chrome shadows — cards are defined by 1px borders, not elevation. Depth appears only inside product illustrations (floating suggestion cards). Treat shadows as illustration-only.

### Layout
- **Page max-width:** contained, centered content column with wide white margins
- **Section gap:** generous (≈50px+ between hero and feature rail)
- **Card padding:** 24px 24px 50px (feature cards)
- **Element gap:** 8–16px between grouped controls

## Components
### Primary Button
**Role:** The conversion action — "Sign up · It's free."
Solid Grammarly Green `#027E6F` fill, `#FFFFFF` text, 6px radius, 16px 24px padding, Glyph 14px, no shadow. Often carries a trailing arrow. This is the only filled-color button on the page.

### Secondary Button
**Role:** Alternate sign-in path — "Sign up with Google."
White `#FFFFFF` fill, `#4D536E` slate-blue text, 1px `#6D758D` border, 6px radius, 8px 16px padding. Pairs a provider glyph with a calm outlined treatment so it never competes with the green primary.

### Ghost / Nav Button
**Role:** Header navigation and low-emphasis actions ("Log in," "Contact Sales").
Transparent, `#1C1C1C` ink, 4px radius, 0 12px padding, 14px. Bold weight (700) marks the emphasized "Log in"; regular (400) for the rest.

### Carousel Control
**Role:** Advance the feature rail.
Perfectly circular (50% radius), `#F5F5F5` cloud fill, 1px `#545454` border, `#545454` chevron. Quiet, neutral, sits at the rail's edge.

### Navigation Bar
**Role:** Global header.
White bar, `#1C1C1C` wordmark with green "G," text nav links with dropdown carets (Product, Work, Education, Pricing, Resources), right-aligned "Contact Sales / Log in" and the green Get-Grammarly CTA. Thin bottom hairline separates it from the hero.

### Display Heading
**Role:** The hero statement — "Think big. We'll take care of the details."
Matter 670 at 52px (46px responsive), `#0E101A` near-black, tight negative tracking, centered. The single loudest element on the page.

### Section Heading
**Role:** Sub-section titles.
Matter 670 at 36px, `#1F243C` navy. Smaller sibling of the display line.

### Lead Paragraph
**Role:** Hero supporting copy.
Glyph 18px, `#1C1C1C`/charcoal, line-height ~1.5, centered under the display line, constrained to a comfortable measure.

### Feature Card
**Role:** Product capability tiles ("Paragraph rewrites," "Tone suggestions," "Proofreading").
White `#FFFFFF` body, 1px `#EBEBEB` border, 8px radius. Top holds a full-bleed colored illustration (teal/blue/lime gradient fields); below, a 20px `#000000` title and Glyph body caption. Defined by border, not shadow.

### Inline Suggestion Card
**Role:** The floating in-product UI shown inside illustrations (Tone Suggestion, Fix grammar).
White rounded panel with soft internal shadow, green `#027E6F` Accept button, gray "Dismiss" text link, mint/green highlighted phrases. Illustration-only chrome — richer than the marketing surface.

### Inline Link
**Role:** Legal and inline references.
Native-blue `#0000EE`, underlined ("Terms and Conditions," "Privacy Policy," "CA Notice"). Deliberately left un-branded — signals "this is boilerplate, not a CTA."

### Fine Print
**Role:** Consent and legal microcopy under the CTA.
Glyph 12px, `#545454`/`#707070` gray, centered. Present but visually subordinate.

## Do's and Don'ts
### Do
- Keep the canvas white. Let `#FFFFFF` carry the majority of the page and let emptiness do the framing.
- Reserve `#027E6F` for the primary CTA, the mark, and true accents — one green, doing one job.
- Set headings in Matter at weight 670 with slightly negative tracking for that confident, custom feel.
- Define cards and inputs with 1px borders (`#EBEBEB`, `#D9D9D9`), not drop shadows.
- Use the cooler `#0D8065` when green must appear as small text on white.

### Don't
- Don't add a second brand color to the chrome. The vivid `#00E0AC` mint lives inside illustrations only.
- Don't put shadows on marketing cards — the system is flat by law; depth belongs to product screenshots.
- Don't restyle inline legal links away from `#0000EE`; the plain browser-blue is intentional.
- Don't fill secondary buttons — they stay white with a `#6D758D` outline so the green stays singular.
- Don't tighten body copy; Glyph stays at a calm ~1.5 line height while only display type compresses.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | The page. Dominant surface. |
| 1 | Cloud | `#F5F5F5` | Subtle control fills (carousel arrow) and faint zoned sections. |
| 2 | Card border | `#EBEBEB` | Not a fill — the 1px outline that lifts a white card off a white page. |
| — | Ink surface | `#1C1C1C` | Rare inverted/dark chrome and dense illustration backdrops. |

## Elevation
Depth is conveyed by borders and luminance, not shadow. On the marketing page, a card is "raised" purely by a 1px `#EBEBEB` outline against white — a hairline, not a drop. Real shadows appear only inside product illustrations, where floating suggestion cards use soft blur to read as UI-over-document. Keep the two registers separate: flat chrome, dimensional product shots.

## Imagery
Rich, custom product illustrations are the visual payload. Each feature card is topped by a saturated gradient field — deep teal, cobalt-to-lavender blue, lime — with a realistic Grammarly suggestion card composited on top (Accept/Dismiss, highlighted phrases, tone chips). The illustrations are where color lives; the surrounding layout stays monochrome white-and-ink. No stock photography, no people — the product interface itself is the hero image.

## Layout
Centered, contained, and airy. The hero is a single column: display line, lead paragraph, a button pair, then legal microcopy — all centered in a wide white field. Below, feature capabilities run as a horizontal card rail with a circular next-arrow, each card a bordered white tile with an illustrated top and text below. Navigation is a full-width white bar with a thin bottom hairline. Rhythm is set by large vertical whitespace between the hero and the rail rather than by dividers or background bands.

## Typography Signature
Two voices, sharply divided. **Matter** at the unusual 670 weight, tracked slightly negative and scaled up to 52px, gives headlines a bespoke confidence — heavier than semibold, lighter and more refined than a blunt 700 bold. **Glyph** at 400/700 handles everything else at a relaxed ~1.5 line height, staying quiet and legible. The move that makes it work: only display type compresses (tight leading, negative tracking) while body type stays open — so the page reads as a bold headline over calm, editorial prose. Green never touches the headline; the color and the type each own one register.

## Agent Prompt Guide
## Quick Color Reference
- background: `#FFFFFF` / text: `#1C1C1C` / surface: `#F5F5F5` / border: `#EBEBEB` / accent: `#00E0AC` (illustration only) / primary action: `#027E6F`

## Example Component Prompts
1. **Primary CTA button**: Solid `#027E6F` fill, white `#FFFFFF` label in Glyph/Inter 14px, 6px radius, 16px 24px padding, no shadow, optional trailing arrow. Label pattern: "Sign up · It's free".
2. **Secondary/provider button**: White fill, `#4D536E` text, 1px `#6D758D` border, 6px radius, 8px 16px padding, leading provider glyph. Must never use a colored fill.
3. **Hero display heading**: Matter (fallback Inter) weight 670, 52px, `#0E101A`, line-height 1.05, letter-spacing -0.02em, centered, max ~two lines.
4. **Feature card**: White `#FFFFFF` body, 1px `#EBEBEB` border, 8px radius, no shadow; full-bleed gradient illustration on top, then a 20px `#000000` title and Glyph 16px `#545454` caption, 24px 24px 50px padding.
5. **Carousel arrow control**: Circular (50% radius) `#F5F5F5` fill, 1px `#545454` border, `#545454` chevron, ~40px square.

## Similar Brands
- **Notion** — the same faith in white space and near-black type, with one accent held in deep reserve.
- **Linear** — tight, semi-bold display typography over a quiet, near-monochrome UI shell.
- **Stripe** — clean white marketing chrome where the vivid color lives inside product screenshots, not the layout.
- **Intercom** — a single confident brand hue on white, product-illustration-forward, friendly but disciplined.
- **Superhuman** — minimalist light canvas, bespoke display weight, and restraint as the whole aesthetic.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-green: #027E6F;
  --color-green-text: #0D8065;
  --color-mint: #00E0AC;
  --color-ink: #1C1C1C;
  --color-display: #0E101A;
  --color-heading: #1F243C;
  --color-black: #000000;
  --color-charcoal: #2E2E2E;
  --color-slate: #545454;
  --color-muted: #707070;
  --color-slate-blue: #4D536E;
  --color-border-slate: #6D758D;
  --color-border-cool: #C6CBDE;
  --color-border: #D9D9D9;
  --color-border-card: #EBEBEB;
  --color-cloud: #F5F5F5;
  --color-white: #FFFFFF;
  --color-link: #0000EE;

  /* Typography — Families */
  --font-display: 'Matter', 'Söhne', Inter, ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Glyph', Inter, Roboto, system-ui, sans-serif;

  /* Typography — Scale */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 22px;
  --text-4xl: 36px;
  --text-5xl: 46px;
  --text-6xl: 52px;
  --leading-tight: 1.05;
  --leading-heading: 1.15;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 50px;

  /* Border Radius */
  --radius-nav: 4px;
  --radius-button: 6px;
  --radius-card: 8px;
  --radius-panel: 10px;
  --radius-pill: 20px;
  --radius-container: 38px;
  --radius-full: 50%;
}
```
### Tailwind v4
```css
@theme {
  /* Colors */
  --color-green: #027E6F;
  --color-green-text: #0D8065;
  --color-mint: #00E0AC;
  --color-ink: #1C1C1C;
  --color-display: #0E101A;
  --color-heading: #1F243C;
  --color-black: #000000;
  --color-charcoal: #2E2E2E;
  --color-slate: #545454;
  --color-muted: #707070;
  --color-slate-blue: #4D536E;
  --color-border-slate: #6D758D;
  --color-border-cool: #C6CBDE;
  --color-border: #D9D9D9;
  --color-border-card: #EBEBEB;
  --color-cloud: #F5F5F5;
  --color-white: #FFFFFF;
  --color-link: #0000EE;

  /* Typography — Families */
  --font-display: 'Matter', 'Söhne', Inter, ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Glyph', Inter, Roboto, system-ui, sans-serif;

  /* Typography — Scale */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 22px;
  --text-4xl: 36px;
  --text-5xl: 46px;
  --text-6xl: 52px;
  --leading-tight: 1.05;
  --leading-heading: 1.15;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 50px;

  /* Border Radius */
  --radius-nav: 4px;
  --radius-button: 6px;
  --radius-card: 8px;
  --radius-panel: 10px;
  --radius-pill: 20px;
  --radius-container: 38px;
  --radius-full: 50%;
}
```