---
version: alpha
name: Glean
description: Enterprise AI search platform — pure white canvas, Polysans typeface family with weight-400 neutrality, a single saturated indigo-electric primary, pill-radius buttons at 64px, and brand-tinted shadow treatment throughout.

colors:
  # Canvas + surfaces
  background: "#ffffff"
  surface: "#f6f6f6"
  surface-neutral: "#ededed"
  surface-dark: "#05083b"

  # Ink / text
  ink: "#000000"
  ink-secondary: "#333333"
  ink-muted: "#727272"
  ink-subtle: "#777767"
  on-primary: "#ffffff"
  on-dark: "#ffffff"

  # Brand accent — electric indigo
  primary: "#343ced"
  primary-hover: "#131bd4"  # was interactive delta from rgb(52,60,237)→rgb(19,27,212)
  primary-light: "#d2d4fb"  # perceptual tint of primary, used in footer links
  primary-tint: "#eaebfd"  # was #343ced1a (alpha) — flattened: rgba(52,60,237,0.10) over white ≈ #eaebfd

  # Semantic
  success: "#37cd84"
  success-alt: "#37cd8f"

  # Borders
  border: "#d2d2d2"
  border-dark: "#c0c0c0"
  border-primary-tint: "#e5e6fd"  # was rgba(52,60,237,0.1) on white — Google format requires hex
  border-primary-medium: "#cfd1f8"  # was rgba(52,60,237,0.2) on white — Google format requires hex
  input-border: "#cecece"

  # Shadow tints
  shadow-primary: "#343ced"  # was rgba(52,60,237,0.14) 0 0 10px — Google format requires hex

typography:
  display-hero:
    fontFamily: "Polysans Neutral, Inter, system-ui, sans-serif"
    fontSize: 66px
    fontWeight: 400
    lineHeight: 0.88
    letterSpacing: -0.025px
  display:
    fontFamily: "Polysans Neutral, Inter, system-ui, sans-serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 0.96
    letterSpacing: -2.4px
  heading-section:
    fontFamily: "Polysans Neutral, Inter, system-ui, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.04
    letterSpacing: -1.6px
  heading-sub:
    fontFamily: "Polysans Neutral, Inter, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.8px
  body-large:
    fontFamily: "Polysans Median, Inter, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.48px
  body:
    fontFamily: "Polysans Slim, Inter, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-sm:
    fontFamily: "Polysans Slim, Inter, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0.32px
  nav-link:
    fontFamily: "Polysans Neutral, Inter, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px
  button-ui:
    fontFamily: "Polysans Neutral, Inter, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px
  caption:
    fontFamily: "Polysans Slim, Inter, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 0px
  mono:
    fontFamily: "Polysans Neutral Mono, DM Mono, monospace"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.64px

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

rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 32px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 8px 24px
    border: "1px solid {colors.primary}"
  button-secondary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
  button-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 24px
  button-dark-hover:
    backgroundColor: "{colors.ink-secondary}"
    textColor: "{colors.on-primary}"
  card:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.lg}"
    padding: 24px
    border: "1px solid {colors.border-primary-tint}"
    boxShadow: "0px 0px 10px 0px {colors.shadow-primary}"
  card-neutral:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    padding: 24px
    border: "1px solid {colors.border-dark}"
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 14px 12px 14px 36px
    border: "1px solid {colors.input-border}"
  input-focus:
    border: "1px solid {colors.primary}"
    textColor: "{colors.ink-secondary}"
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.md}"
    padding: 8px 10px
  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.nav-link}"
    padding: 16px 24px
  footer:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    linkColor: "{colors.primary-light}"
---

# Glean Design System

## Overview

Glean approaches enterprise software with the confidence of a company that has nothing to prove. The canvas is pure white — not off-white, not warm cream, just `{colors.background}` — an unambiguous signal that the interface exists to surface information, not to perform a brand persona. Against that stark backdrop, a single electric-indigo `{colors.primary}` does all the brand work: it appears on CTAs, borders, link underlines, card shadow halos, and not much else. The restraint makes every touch of it feel deliberate.

The typographic choice is Polysans, a proprietary suite comprising Neutral, Median, Slim, and Neutral Mono optical variants. Where most enterprise products reach for Inter or Aktiv as a safe default, Glean's Polysans carries a subtle geometric warmth — the letterforms are precisely drawn but not clinical. Display sizes run tight, often below 1.0 line-height, giving headings an architectural compression; body text opens back up to 1.6 in Polysans Slim, creating a clear reading gear distinct from the display gear. At weight 400 across every variant, the system expresses confidence in the typeface itself rather than weight variation — contrast comes from optical width, not boldness.

The signature spatial move is the 64px pill radius on interactive elements. Glean's buttons are fully rounded — not softly rounded, not squircled, but proper capsules. Combined with the `{colors.primary}` blue fill and generous 10px 32px padding, CTAs feel more like platform UI components than marketing prompts. Cards and surfaces use 8–12px corners to stay grounded, creating a clear two-tier shape language: round for interactive, nearly square for structural. Brand-tinted shadows (`rgba(52,60,237,0.14)` expressed as `{colors.shadow-primary}`) appear on card hover states, making the primary color emerge from depth rather than just surface.

**Key Characteristics:**
- Pure `{colors.background}` white canvas with no warm or cool tint
- Single brand color `{colors.primary}` (electric indigo #343ced) does 100% of accent work
- Deep navy `{colors.surface-dark}` footer creates a dark-mode coda to the light experience
- Polysans Neutral for display and nav, Polysans Median for lead body, Polysans Slim for reading body
- Display text at sub-1.0 line-height (0.88–0.96) with aggressive negative tracking on large sizes
- Pill buttons at `{rounded.pill}` — 64px radius — distinguished from structural `{rounded.md}` 8px cards
- `{colors.primary-tint}` borders trace cards and interactive containers with a barely-there brand halo
- Brand-tinted box shadows (`{colors.shadow-primary}` at 14% opacity) appear on elevation, not neutral grey
- Font Awesome icon-font augmented by custom SVGs for product illustration
- Motion at 0.3–0.4s ease; buttons scale to 1.1 on hover via transform
- PrimeReact component library underlying the product UI
- 11-step breakpoint ladder from 376px mobile to 1920px ultrawide

## Colors

### Primary
- **Pure White** (`{colors.background}`): The base canvas. Applied to page background, card faces, and inputs. No tint.
- **Near-black** (`{colors.ink}`): `#000000` heading text and maximum-emphasis content.
- **Charcoal** (`{colors.ink-secondary}`): `#333333` — the most-used text color across nav, body, and secondary headings.

### Brand Accent
- **Electric Indigo** (`{colors.primary}`): `#343ced` — Glean's only brand color. Applied to primary CTAs, link text, button borders, card shadow halos, footer links, and brand icon strokes. On hover shifts to `{colors.primary-hover}` (#131bd4, ~10% darker).
- **Indigo Tint** (`{colors.primary-light}`): `#d2d4fb` — desaturated light periwinkle used in footer link colors against the dark surface.

### Text States
- **Muted text** (`{colors.ink-muted}`): `#727272` — eyebrow labels, secondary descriptors, input placeholder text.
- **Warm grey** (`{colors.ink-subtle}`): `#777767` — footnote content with a slightly warmer cast.

### Surfaces
- **Light grey surface** (`{colors.surface}`): `#f6f6f6` — section backgrounds and secondary card fills.
- **Mid grey** (`{colors.surface-neutral}`): `#ededed` — badge/pill backgrounds, icon logo containers.
- **Dark navy** (`{colors.surface-dark}`): `#05083b` — footer and dark section backgrounds. Near-midnight blue, not true black.

### Borders & Shadows
- **Soft border** (`{colors.border}`): `#d2d2d2` — card dividers and section separators.
- **Primary-tint border** (`{colors.border-primary-tint}`): `#e5e6fd` — converted from rgba(52,60,237,0.1) on white. Used pervasively on interactive containers to mark them with brand presence without saturating them.
- **Shadow primary** (`{colors.shadow-primary}`): `#343ced` at 14% opacity — the signature brand-tinted halo applied on card elevation.

## Typography

### Font Family
- **Primary display**: `Polysans Neutral`, self-hosted, with fallbacks: `Inter, system-ui, sans-serif`
- **Lead body / links**: `Polysans Median` — slightly heavier optical width for 20–24px lead paragraphs
- **Reading body**: `Polysans Slim` — the lightest optical variant, used for 16–18px reading text
- **Monospace**: `Polysans Neutral Mono`, with fallback `DM Mono` (the one Google Font loaded)
- **OpenType Features**: `"tnum"` on display sizes for tabular number alignment in data contexts

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Use those tokens directly via reference (`{typography.display-hero}`, `{typography.body}`) rather than restating values.

| Token | Use |
|---|---|
| `display-hero` | Top-of-page hero headlines, 66px at 0.88 lh — maximum compression |
| `display` | Section openers and mid-page hero moments, 56px |
| `heading-section` | H2-level section headings, 40px with –1.6px tracking |
| `heading-sub` | Feature card titles and sub-section labels, 20px |
| `body-large` | Lead paragraphs and feature descriptions, 24px Polysans Median |
| `body` | Reading paragraphs, 18px Polysans Slim at 1.6 lh |
| `body-sm` | Captions, secondary info, 16px with 0.32px positive tracking |
| `nav-link` | Top navigation items, 18px Polysans Neutral |
| `button-ui` | All button labels, 18px Polysans Neutral weight 400 |
| `caption` | Pills, labels, eyebrows, 12px |
| `mono` | Code snippets, technical strings, Polysans Neutral Mono |

### Principles
- Weight 400 across every variant — contrast comes from optical width switching (Neutral → Median → Slim), not boldness
- Negative tracking scales with size: –2.4px at 56px, 0px at 18px reading, slightly positive at 16px
- Sub-1.0 line-height only for display sizes; body text opens to 1.4–1.6 for readability
- Single sans-serif DNA throughout — no serif mixing, no decorative typefaces

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

The spacing feels confident and generous — sections breathe at 96px vertical margins on desktop, while card interiors use 24px padding. The 4px and 8px increments serve iconography and compact UI detail. No mid-range values like 5px or 7px; the grid is disciplined.

### Grid & Container
- Max content width: approximately 1200px (breakpoint at 1200px corresponds to container edge)
- 12-column grid implied by the component layout patterns
- Full-bleed sections at the 1920px extreme (nav and footer span edge-to-edge)
- Cards in 2–4 column grids at desktop, stacking to 1 at 767px

### Whitespace Philosophy
- Generous vertical rhythm gives each section its own visual isolation
- Cards use consistent 24px internal padding regardless of card size
- Icon + text combinations maintain 12–16px gaps, preserving visual association

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Section backgrounds, plain text containers |
| Subtle (Level 1) | `1px solid {colors.border-primary-tint}` | Default card borders — barely-there primary halo |
| Card (Level 2) | `0px 0px 10px 0px {colors.shadow-primary}` at 14% | Interactive card hover, featured content panels |
| Neutral Card | `1px solid {colors.border-dark}` | Secondary cards without brand elevation |
| Elevated (Level 3) | `rgba(0,0,0,0.03) 0 8px 10px` | Modals, dropdowns |
| Focus Ring | `outline: 2px solid {colors.primary}` | Keyboard focus on interactive elements |

**Shadow Philosophy**: Glean doesn't reach for neutral grey shadows. The signature treatment is a diffuse, low-opacity bloom of the brand blue — the halo created by `{colors.shadow-primary}` at 14% opacity, spread over 10px with zero offset. It functions less as depth cue and more as aura: the product's presence seeping around its containers. Modals and overlays use conventional near-black shadows to provide clear modal separation without competing with the brand-tinted card treatment.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Hard-edged dividers, full-bleed section separators |
| `sm` | 4px | Badges, small pill labels, icon containers |
| `md` | 8px | Inputs, secondary cards, most structural containers |
| `lg` | 12px | Feature cards, dialog shells |
| `pill` | 9999px | All buttons (64px effective radius), search bars, small chips |

The shape system is unmistakably two-tier: interactive elements get the full pill, structural containers stay at 8–12px. This binary creates instant affordance signaling — anything you can click is round, anything that holds content is square-ish. The 64px and 100px values extracted from the live site confirm buttons are rendered as true capsules regardless of content width.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them.

### Button variants

- **`button-primary`** — Electric indigo `{colors.primary}` fill, white label, fully pill-rounded. "Get a demo" — the primary conversion CTA. 10px vertical × 32px horizontal padding; scales to 1.1 on hover via transform.
- **`button-secondary`** — White fill with a 1px `{colors.primary}` border and indigo label text. "Sign in" — navigation utility. Shares pill radius; fills solid indigo on hover, matching primary state.
- **`button-dark`** — Black `{colors.ink}` fill, white label. Appears in dark-section contexts where indigo would clash with the `{colors.surface-dark}` navy backdrop.

### Cards

Two card registers: **branded cards** use `{colors.border-primary-tint}` hairline border plus the `{colors.shadow-primary}` box-shadow aura — interactive, featured, attention-drawing. **Neutral cards** use `{colors.border-dark}` grey border with no shadow — informational, secondary, background.

### Inputs

Inputs use `{colors.background}` fill with `{colors.input-border}` (#cecece) border at `{rounded.md}` 8px radius. Placeholder text in `{colors.ink-muted}`. Focus state activates `{colors.primary}` border. Left padding of 36px accommodates a leading search or field icon.

### Badges / Tags

Hero pills use `{colors.surface-neutral}` (#ededed) background, 8px radius, 8px 10px padding, 10px caption text in `{colors.ink}`. The pill format groups integration logos (Slack, Salesforce, etc.) in a scannable icon row. Icon container slots use 4px radius in `{colors.surface-neutral}`.

### Navigation

Fixed-position top nav on `{colors.background}` white. Nav links in `{colors.ink-secondary}` using `{typography.nav-link}`. The CTA button pair (Sign in outlined, Get a demo filled) sits right-justified. On scroll, the nav likely gains a subtle border or shadow to delineate from page content. Collapses to hamburger at the 767px breakpoint.

## Do's and Don'ts

### Do
- Use `{colors.primary}` as the single brand accent — it carries sufficient signal on its own without secondary accent competition
- Apply `{rounded.pill}` only to interactive elements (buttons, chips, search inputs); keep structural containers at `{rounded.md}` or `{rounded.lg}`
- Set display-size headings with `{typography.display-hero}` letterSpacing at –2.4px or tighter; loose tracking at large sizes undermines the architectural compression the typeface is built for
- Use brand-tinted shadows (`{colors.shadow-primary}`) to elevate featured content; reserve neutral grey shadows for modal overlays
- Pair `{colors.primary-tint}` borders with white-surface cards to maintain brand presence without saturating the canvas
- Switch from Polysans Neutral to Polysans Slim for body paragraphs — the optical width difference is what creates reading hierarchy at uniform weight 400
- Use `{colors.surface-dark}` sections as accent moments within a predominantly light layout, not as a primary dark mode

### Don't
- Don't introduce a secondary brand color — Glean's entire visual identity rests on the singularity of `{colors.primary}` indigo
- Don't apply `{rounded.pill}` to cards or static containers; it will dissolve the two-tier interactive/structural shape signal
- Don't mix Polysans with serif typefaces — the geometric neutrality of Polysans doesn't have a complementary serif partner in this system
- Don't use grey box-shadows on interactive cards — the `{colors.shadow-primary}` blue halo is the designed elevation signature
- Don't reduce heading letterSpacing above –0.8px at large display sizes; positive or zero tracking at 56px+ reads as amateur on this typeface
- Don't fill the nav with more than two button variants — the outlined + filled CTA pair is the designed maximum
- Don't use `{colors.primary-light}` (#d2d4fb) on white backgrounds as link color — contrast is insufficient; reserve it for links on `{colors.surface-dark}`

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile XS | <376px | Single-column, pill buttons go full-width |
| Mobile | 376–479px | Single-column layout, reduced heading size |
| Mobile Large | 479–767px | Single-column, nav collapses |
| Tablet | 768–991px | 2-column card grids, condensed nav |
| Desktop | 992–1200px | Full nav, 3-column feature grids |
| Large Desktop | 1200–1540px | Max-width container centered, full layout |
| Ultrawide | >1920px | Full-bleed nav and footer, container unchanged |

### Touch Targets
- Pill buttons with 10px 32px padding render at minimum 44px height at 18px font size, meeting iOS/WCAG touch target minimums
- Nav links at 18px with comfortable vertical padding are tappable without magnification

### Collapsing Strategy
- Navigation hamburger triggers at 767px; menu opens as overlay drawer or vertical stack
- Hero heading scales down from 66px to approximately 40–44px on mobile
- Feature card grids collapse 4→2→1 column across the tablet–mobile range
- Footer multi-column layout stacks vertically at 767px

### Image Behavior
- Product screenshots and UI mockups in hero sections use responsive sizing, likely `max-width: 100%` with fixed aspect containers
- Integration logo grids reflow from 8-up to 4-up to 2-up rows as width decreases

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Muted text: `{colors.ink-muted}`
- Brand accent: `{colors.primary}`
- Border: `{colors.border}`
- CTA: `{colors.primary}`
- Dark surface: `{colors.surface-dark}`

### Example Component Prompts

- "Build a Glean-style hero section: `{colors.background}` white canvas, headline in `{typography.display-hero}` (Polysans Neutral 66px/0.88lh/–0.025px tracking) in `{colors.ink}`, lead paragraph in `{typography.body-large}` in `{colors.ink-muted}`, one primary CTA using `{components.button-primary}` and one outline CTA using `{components.button-secondary}`, both with `{rounded.pill}` pill radius."

- "Create a Glean feature card: `{colors.background}` fill, `{rounded.lg}` 12px radius, `{components.card}` spec with `1px solid {colors.border-primary-tint}` border and `0px 0px 10px 0px {colors.shadow-primary}` at 14% opacity. Card title in `{typography.heading-sub}`, body copy in `{typography.body}`, internal padding 24px."

- "Design a Glean top navigation: `{colors.background}` white bar, Glean wordmark logo left-aligned, nav links in `{typography.nav-link}` `{colors.ink-secondary}` center-spaced, right-aligned button pair — outlined 'Sign in' (`{components.button-secondary}`) and filled 'Get a demo' (`{components.button-primary}`). Both buttons at `{rounded.pill}` radius."

- "Style a Glean search input: `{colors.background}` fill, `{rounded.md}` radius, `1px solid {colors.input-border}` border, placeholder in `{colors.ink-muted}`, 14px 12px 14px 36px padding (36px left for search icon), focus border-color `{colors.primary}`. Font `{typography.body}` Polysans Slim 18px."

- "Build a Glean integration badge: `{colors.surface-neutral}` (#ededed) background, `{rounded.sm}` 4px radius for icon slot, `{rounded.md}` 8px for the wrapping pill chip. Icon 20×20px. Label in `{typography.caption}` Polysans Slim 12px, `{colors.ink}` color, 8px 10px padding."

- "Compose a Glean dark footer: `{colors.surface-dark}` (#05083b) background, primary links in `{colors.on-dark}` white, secondary/icon links in `{colors.primary-light}` (#d2d4fb). Footer nav links in `{typography.body-sm}`. Social icon links as SVG in `{colors.primary-light}`. Max-width 1200px container centered, 96px top padding."

### Iteration Guide

1. Start with `{colors.background}` white canvas — there is no warm or cool tint to match, just pure white
2. Apply `{colors.primary}` sparingly: one primary CTA, link underlines, and card borders; everything else is black/grey
3. Set all display typography at weight 400, differentiating with optical variant (Neutral for headings, Slim for body) — never go bold for hierarchy
4. Use pill radius (`{rounded.pill}`) exclusively on interactive elements; keep cards and containers at `{rounded.md}` or `{rounded.lg}`
5. Elevate featured cards with the brand-tinted shadow (`{colors.shadow-primary}` at 14% opacity); use flat borders for secondary content
6. When adding a dark section, use `{colors.surface-dark}` as a contained moment, not a global mode — reverse text to `{colors.on-dark}` and links to `{colors.primary-light}`
7. All motion at 0.3–0.4s ease; buttons use transform scale(1.1) on hover rather than color darkening alone

---

## 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 Glean. Brand names and trademarks belong to their respective owners.