---
version: alpha
name: "Glean"
description: "Glean is enterprise Work AI — an assistant, agent platform, and company-wide search — and its marketing site reads exactly that confident: a bright paper-white `#ffffff` canvas, body copy in a calm neutral `#333333`, and headlines set in near-black indigo `#0a0227` that lands a half-shade warmer and more authoritative than pure black. PolySans Neutral carries every word, kept at a restrained 400 weight even at the 56px hero size so the type feels engineered rather than shouted. The whole page resolves to a single chromatic event: electric indigo-blue `#343ced` (rgb 52,59,237), reserved almost entirely for the `Get a demo` call-to-action, which renders as a fully-rounded 64px pill — the brand's most recognisable shape primitive. Secondary actions invert the same blue into an outline-on-white treatment, never a second hue. The result is a trustworthy, AI-search register: enterprise-serious, generously white, and disciplined enough that the one indigo CTA reads as the obvious next click on every screen."
colors:
  bg: "#ffffff"
  surface: "#f5f5f7"
  surface-soft: "#fafafa"
  text: "#333333"
  text-heading: "#0a0227"
  text-muted: "#6b6b73"
  text-faint: "#9a9aa2"
  brand: "#343ced"
  brand-sampled: "#343bed"
  brand-hover: "#2a31cc"
  brand-soft: "#ebecff"
  brand-deep: "#29246a"
  on-brand: "#ffffff"
  border: "#e6e6ea"
  border-strong: "#d2d2d8"
  success: "#058a5e"
  success-bg: "#e6f5ee"
  warning: "#9a6b00"
  warning-bg: "#fbf2dc"
  danger: "#b42318"
  danger-bg: "#fdeceb"
  info: "#343ced"
  info-bg: "#ebecff"
typography:
  display:
    fontFamily: "PolySans Neutral"
    fontSize: "72px"
    lineHeight: 1.55
    letterSpacing: "-0.02em"
  body:
    fontFamily: "PolySans Neutral"
    fontSize: "16px"
    lineHeight: 1.55
  mono:
    fontFamily: "SFMono-Regular"
rounded:
  button: "8px"
  card: "12px"
  pill: "9999px"
spacing:
  xs: "0px"
  sm: "4px"
  md: "12px"
  lg: "32px"
  xl: "64px"
---

## Overview

## Overview

Glean's marketing site looks like enterprise software that has read the consumer-AI playbook and decided to take only the calm parts. The canvas is bright paper-white at `#ffffff` — no off-white ecru tint, no warm paper cast, just clean corporate light. Body copy sits in a measured neutral grey (`#333333`, rgb 51,51,51) rather than black, which softens long blocks of prose and keeps the page from feeling printed-on-the-nose. Headlines, by contrast, drop into a near-black indigo (`#0a0227`, rgb 10,2,39): a black that has been warmed a half-shade toward the brand's blue, so the big type feels authoritative and quietly on-brand without ever announcing a colour.

The type does the heavy lifting. PolySans Neutral — a geometric-humanist grotesque — carries every word from the 56px hero headline down to the 12px caption, and the most telling decision is that the hero is set at only **400 weight**. Most SaaS sites reach for 600–700 at hero scale to manufacture confidence; Glean does the opposite, trusting the size and the negative tracking to carry weight while the strokes stay slim and engineered. The effect is a headline that reads as a stated fact ("Work AI that Works") rather than a sales pitch.

Chromatically, the entire page resolves to a single event. Electric indigo-blue `#343ced` (rgb 52,59,237) is the brand colour, and it appears almost exclusively on the primary call-to-action — the `Get a demo` button — which renders as a fully-rounded **64px pill** in white-on-indigo. Everything else on the page is white, grey, and near-black indigo. Secondary actions like `Sign in` don't get a second colour: they invert the same indigo into an outline-on-white pill, so the page never has two competing saturated elements. That discipline is the whole point — when there's only one blue thing on the screen, the buyer always knows where to click.

The shape language reinforces the AI-search register. The 64px pill is much rounder than the 8px–12px radii of developer-tool SaaS; it nods to the search box, the chat input, the consumer-friendly affordance. Cards and feature tiles sit at a moderate 12px radius on a faint cool-grey surface (`#f5f5f7`), lifted off the white by tone rather than shadow. The overall atmosphere is enterprise-trustworthy with an AI-native warmth: generously spaced, low on ornament, and engineered to feel like a product that large companies can safely standardise on.

One note on the probe data: Glean's cookie banner is powered by Osano, whose CSS variables (`--osano-*`) happen to reuse `#343ced` for some controls and introduce a green (`#37cd8f` / `#058a5e`) and a deep indigo (`#29246a`). The green is **cookie chrome, not a Glean brand colour** — it does not appear in the product's own palette and should never be treated as an accent. Only the indigo family belongs to Glean.

**Key Characteristics**

- Bright paper-white `#ffffff` canvas — clean and corporate, no warm tint
- Body copy in calm neutral `#333333`, never pure black, for readable long-form
- Headlines in near-black indigo `#0a0227` — black warmed toward the brand blue
- A single saturated chromatic event: electric indigo `#343ced` on the primary CTA
- PolySans Neutral throughout, held at a restrained 400 weight even at 56px hero scale
- Signature 64px pill CTAs — much rounder than developer-tool SaaS, nodding to the search box
- Secondary actions invert the same indigo to outline-on-white, never a new hue
- Moderate 12px radius cards on a faint `#f5f5f7` surface, lifted by tone not shadow
- Generous 96px+ section padding; whitespace as enterprise composure
- Green (`#37cd8f`) in the probe is Osano cookie chrome — explicitly not a brand colour

## Colors

### Canvas

- **bg** (`#ffffff`) [→ body background]: bright paper-white enterprise canvas, the default surface for nearly every band.
- **surface** (`#f5f5f7`) [→ observed feature/card tile]: faint cool-grey lift used for cards and feature tiles; provides depth tonally rather than via shadow.
- **surface-soft** (`#fafafa`): softest panel tint, a half-step off white for nested or quiet panels.

### Text

- **text** (`#333333`) [→ body color rgb(51,51,51)]: primary body copy; a calm neutral grey, deliberately not full black.
- **text-heading** (`#0a0227`) [→ h1/h2 color rgb(10,2,39)]: near-black indigo for all headlines; black warmed toward the brand blue for quiet authority.
- **text-muted** (`#6b6b73`): captions, metadata, and secondary labels.
- **text-faint** (`#9a9aa2`): placeholder text and disabled labels.

### Brand

- **brand** (`#343ced`) [→ ELECTRIC-INDIGO, rgb 52,59,237]: the single action colour; primary CTA fill, focus ring tint, link cousin.
- **brand-sampled** (`#343bed`): the exact fill sampled on the live primary `Get a demo` button (rgb 52,59,237) — within a hair of `#343ced`; either is correct, `#343ced` is canonical.
- **brand-hover** (`#2a31cc`): pressed / hover state for the CTA; one step deeper indigo.
- **brand-soft** (`#ebecff`): soft indigo wash for ghost-button hover fills, selected states, and info banners.
- **brand-deep** (`#29246a`) [→ observed widget outline color]: deep indigo for footers, dark bands, and on-dark grounds.
- **on-brand** (`#ffffff`): white text and icons on the indigo CTA.

### Borders

- **border** (`#e6e6ea`): light cool-grey hairline; the universal 1px divider.
- **border-strong** (`#d2d2d8`): emphasised dividers and resting form-field borders.

### Semantic

- **success** (`#058a5e`) on **success-bg** (`#e6f5ee`): enterprise green for confirmations — note this is a real success token, distinct from the coincidental Osano cookie green.
- **warning** (`#9a6b00`) on **warning-bg** (`#fbf2dc`): warm amber for caution states, never crayon-yellow.
- **danger** (`#b42318`) on **danger-bg** (`#fdeceb`): restrained red for error states and destructive actions.
- **info** (`#343ced`) on **info-bg** (`#ebecff`): info reuses the brand indigo; the system declines to invent a separate info hue.

### Shadow Colors

- Shadows are tinted with the heading indigo (`rgba(10,2,39,...)`) rather than neutral black, keeping elevation in chromatic agreement with the near-black-indigo headline colour. They appear only on truly floating elements — search-result cards, pricing tiers, dropdowns — never as a default card treatment.

## Typography

### Font Family

- **Display & body**: PolySans Neutral → PolySans → system-ui → -apple-system → Segoe UI → Helvetica → Arial → sans-serif. A single geometric-humanist grotesque carries the whole site; there is no serif companion.
- **Mono**: ui-monospace → SFMono-Regular → SF Mono → Menlo → Consolas → monospace — used only for code samples and the occasional query-string display.
- **Weight philosophy**: the family ships in light-to-medium weights here. Headlines hold at 400 (the live hero is literally 400 weight at 56px); 500 carries sub-heads, buttons, and labels; 600 is reserved for eyebrows and small emphatic badges. The site never pushes to 700.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| display-hero | PolySans Neutral | 72 | 400 | 1.02 | -0.02em | campaign-scale display headline |
| display-lg | PolySans Neutral | 56 | 400 | 1.05 | -0.018em | the live hero size — light, engineered |
| h1 | PolySans Neutral | 56 | 400 | 1.05 | -0.018em | primary page headline, indigo `#0a0227` |
| h2 | PolySans Neutral | 40 | 400 | 1.1 | -0.014em | feature-band heads (live h2 = 40px) |
| h3 | PolySans Neutral | 32 | 500 | 1.2 | -0.01em | sub-feature heads |
| h4 | PolySans Neutral | 24 | 500 | 1.3 | -0.005em | card titles |
| h5 | PolySans Neutral | 20 | 500 | 1.35 | 0 | inline emphasis, small heads |
| body-lg | PolySans Neutral | 18 | 400 | 1.55 | 0 | hero subheads, intro paragraphs |
| body | PolySans Neutral | 16 | 400 | 1.55 | 0 | default reading size (live body = 16px) |
| body-sm | PolySans Neutral | 14 | 400 | 1.5 | 0 | secondary copy, footnotes |
| label | PolySans Neutral | 13 | 500 | 1.4 | 0.01em | UI labels, button text companions |
| eyebrow | PolySans Neutral | 13 | 600 | 1.4 | 0.08em | uppercase section eyebrows / kickers |
| caption | PolySans Neutral | 12 | 500 | 1.4 | 0.02em | image and chart captions |
| code | mono | 14 | 400 | 1.5 | 0 | code block |
| code-inline | mono | 13 | 400 | 1.4 | 0 | inline code, query strings |

### Principles

- **Light headlines, by design**: the hero is 400 weight at 56px. This is the brand's signature typographic move — confidence through size and tracking rather than bold weight. Resist the urge to set headlines at 600–700.
- **Indigo, not black, on headings**: headlines use `#0a0227` (near-black indigo), never pure `#000`. The warmth ties the type to the brand without spending an obvious colour.
- **Negative tracking at scale**: tracking tightens to `-0.018em` at hero size and relaxes back to `0` by body size; the compression keeps the slim 400-weight headlines from drifting.
- **Body grey, not black**: long-form copy is `#333333`, a calibrated neutral that reads comfortably across paragraphs without the harshness of full black on white.
- **One typeface, many weights**: PolySans does everything. The hierarchy is built from weight (400/500/600) and size, not from mixing families.
- **Eyebrows carry the only positive tracking**: section kickers use `+0.08em` uppercase at 13px / 600 — the one place letter-spacing opens up, signalling "category" rather than "headline".

## Layout

### Spacing System

Base unit: 4px. Scale: `[0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128]`. The 24px gutter is the workhorse for card grids; 48px separates stacked blocks within a band; 96–128px separates major sections. The rhythm is enterprise-roomy — generous but not editorial-loose — so the page reads as composed and trustworthy rather than dense.

### Grid & Container

- **Page width**: 1280px max, centred.
- **Prose width**: 720px max for editorial / documentation text columns.
- **Hero**: copy claims roughly 760–860px horizontal, often centred above a full-width search bar or product visual.
- **Feature grid**: 3-column at 1024px+, 2-column at 640–1024px, 1-column below 640px. Card gap: 24px.

### Whitespace Philosophy

Whitespace here signals composure and seriousness — the visual equivalent of an enterprise vendor that doesn't need to crowd the slide. Section padding runs 96px+ on desktop; cards run 24–28px internal padding. The bright white canvas plus the generous spacing is what makes the single indigo CTA pop without any other chromatic help.

### Section Cadence

The pattern is calm and consistent: `white hero (with search bar) → white feature grid → white capability/agent showcase → white logo/social-proof band → deep-indigo footer`. Unlike sites that alternate light/dark bands for drama, Glean stays white almost the whole way down and reserves the deep indigo for the footer — keeping the body authoritative and unbroken.

### Breakpoints

| Tier | Width | Behavior |
|---|---|---|
| mobile | < 640px | single column, 16px gutter, 64px section padding, hero search bar full-width |
| tablet | 640–1024px | 2-column feature grids, 24px gutter, 80px section padding |
| desktop | 1024–1280px | 3-column feature grids, 24px gutter, 96px section padding |
| wide | 1280px+ | container caps at 1280px, content centred |

### Touch Targets

Minimum 44×44px on touch devices. The 64px pill CTAs comfortably exceed this with their `14px 28px` padding; smaller inline links expand their tap area via `padding: 8px 0` rather than relying on line-height.

### Collapsing strategy

- **Top nav**: hamburger menu < 1024px; full nav with the two-pill cluster above.
- **Feature grid**: 3 → 2 → 1 columns at 1024 / 640.
- **Hero**: product visual moves below the search bar and copy < 768px; the search bar stays prominent and full-width.
- **Pricing**: tiers stack vertically < 768px with the recommended tier highlighted via order and a soft indigo border.
- **Footer**: multi-column → 2-column → 1-column accordion at 1024 / 640.

### Image / visual behavior

Product screenshots and 3D visuals use `srcset` with 1x/2x densities and `sizes` matched to container width. Below 768px, hero visuals adopt `object-fit: cover` with a locked `aspect-ratio` so the search bar never gets pushed below the fold.

### Container queries

Used inside the search-result and capability cards so they reflow their internal layout (icon + title + snippet) based on the card's own width rather than the viewport — important when the same card appears in both a 3-up grid and a full-width list.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| 0 | flat, no shadow, on `#ffffff` | body content, default surfaces |
| 1 | faint tonal lift onto `#f5f5f7` | feature / capability cards within a band |
| 2 | `1px hairline + ambient shadow` | elevated cards over white |
| 3 | `raised` two-layer indigo-tinted shadow | pricing, demo previews, search-result cards |
| 4 | `elevated` shadow, 12–16px radius | dropdowns, popovers, the search autocomplete panel |
| 5 | `elevated` shadow + backdrop, 16px radius | modals, lightboxes |

**Shadow Philosophy**: Glean's shadows are tinted with the heading indigo (`rgba(10,2,39,...)`) rather than neutral black, keeping elevation chromatically consistent with the near-black-indigo type. The marketing surface is sparing with elevation — most depth comes from the faint tonal step between `#ffffff` and `#f5f5f7` plus the `#e6e6ea` hairline. True shadows are reserved for things that genuinely float: the search autocomplete panel, pricing tiers, and modal dialogs.

## Shapes

| Tier | Value | Use |
|---|---|---|
| micro | 2px | inline tags, tiny inline markers |
| sm | 4px | small inputs, nested UI primitives |
| md | 8px | text inputs, secondary panels, inline buttons |
| lg | 12px | cards, feature tiles, search-result cards |
| xl | 16px | modals, large emphasis blocks |
| pill | 9999px | the signature 64px CTA pills, badges, search bar, avatars |

Glean's radius story is bimodal: structural surfaces (cards, inputs, panels) live in a moderate 8–16px band, while every **action and query affordance** jumps straight to a full pill. That contrast — calm rectangles for content, generous pills for interaction — is the shape signature, and the 64px CTA pill is the single most recognisable primitive on the site.

## Components

### Buttons

**Primary**
- Background: `#343ced` (canonical; live fill sampled as `#343bed`). Text: `#ffffff` at PolySans 500 / 16px. Padding: `14px 28px`. Radius: **64px (full pill)**. Border: none.
- Hover: background → `#2a31cc`, optional `translateY(-1px)`. Active: background → `#2a31cc`, lift removed.
- Use: the single saturated event on the page — `Get a demo`, `Start free`, `Talk to sales`. Exactly one per module.

**Outline (secondary)**
- Background: `#ffffff`. Text: `#343ced` at PolySans 500 / 16px. Border: `1px solid #343ced`. Padding: `14px 28px`. Radius: 64px pill.
- Hover: background → `#ebecff`. Active: background → `#ebecff`, border deepens to `#2a31cc`.
- Use: secondary action paired with the primary CTA — the live `Sign in` button. Same indigo, inverted; never a second hue.

**Ghost (tertiary)**
- Background: transparent. Text: `#0a0227` at PolySans 500 / 16px. Radius: 64px pill (or 8px when inline). No border.
- Hover: background → `#f5f5f7`. Use: nav-adjacent links, quiet secondary CTAs, in-page jump links.

**On-dark inverted**
- Background: `#ffffff`. Text: `#29246a` (deep indigo) at PolySans 500 / 16px. Padding: `14px 28px`. Radius: 64px pill.
- Hover: background → `#f5f5f7`. Use: CTA placed inside the deep-indigo footer or any dark band.

### Cards

**Standard card**
- Background: `#f5f5f7`. Border: `1px solid #e6e6ea`. Radius: 12px. Padding: 24px. No shadow.
- Use: feature / capability tile (e.g. the "Engineering — Debug code" capability cards observed live at 12px radius). Depth via faint tonal lift, not shadow.

**Elevated card**
- Background: `#ffffff`. Border: `1px solid #e6e6ea`. Radius: 12px. Padding: 28px.
- Shadow: `rgba(10,2,39,0.06) 0 1px 2px, rgba(10,2,39,0.05) 0 8px 24px`.
- Use: pricing tiers, demo previews, search-result cards — anything that should float above the canvas.

**Search-result card**
- Background: `#ffffff`. Border: `1px solid #e6e6ea`. Radius: 12px. Padding: `16px 20px`.
- Title in PolySans 500 / 16px `#0a0227`, snippet in 14px `#333333`, source chip as a soft indigo badge. The product-defining primitive — Glean is enterprise search, and the result card is its hero object.

### Badges, Tags, Pills

**Status / category badge**
- Background: `#ebecff`. Text: `#343ced` at PolySans 600 / 12px. Padding: `4px 10px`. Radius: 9999px.
- Use: "New", "Beta", capability tags, source labels in search results.

**Neutral chip**
- Background: `#f5f5f7`. Text: `#6b6b73` at PolySans 500 / 12px. Padding: `4px 10px`. Radius: 9999px.
- Use: filters, metadata pills, file-type tags.

### Inputs / Forms

**Text input**
- Background: `#ffffff`. Border: `1px solid #d2d2d8`. Radius: 8px. Padding: `10px 14px`. Font: PolySans 400 / 16px.
- Focus: border → `#343ced`, ring `0 0 0 3px rgba(52,60,237,0.18)`.
- Placeholder colour: `#9a9aa2`.

**Search input (the signature primitive)**
- Background: `#ffffff` or `#f5f5f7`. Border: `1px solid #e6e6ea`. Radius: 9999px (pill) or 12px when full-width. Padding: `12px 18px 12px 44px` (leading search icon). Font: PolySans 400 / 16–18px.
- Focus: ring `0 0 0 3px rgba(52,60,237,0.18)`, border → `#343ced`.
- Use: the hero search bar — Glean's product is search, so the query input is treated with the same care as a CTA.

### Navigation

**Top bar**
- Background: `#ffffff`, often with a `1px solid #e6e6ea` bottom border on scroll. Height: 72px.
- Logo at left; nav items at PolySans 500 / 15px in `#0a0227`. Hover: colour shifts toward `#343ced`, no underline jump.
- Right cluster: an outline `Sign in` pill and the solid indigo `Get a demo` pill — the two-pill pairing is the brand's nav signature.

**Footer**
- Background: deep indigo (`#29246a`) or white depending on the page. On dark: link text `#ffffff` at 14px, section headings `#ffffff` at 13px / 600 tracked `+0.08em`, inverted white CTA pill.

### Easing

- **standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — the workhorse ease for hover and colour transitions.
- **emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — slower acceleration, faster deceleration; reserved for hero entrance and modal open.
- **decelerate**: `cubic-bezier(0, 0, 0.2, 1)` — for elements entering from off-canvas and for the search-panel reveal.

### Durations

- **fast** (150ms): button colour shift, link colour shift, badge state changes.
- **standard** (240ms): button hover lift, card hover, dropdown open.
- **slow** (320ms): modal open, search-panel expand, hero entrance.

### Per-component micro-states

- **Button hover**: indigo deepens to `#2a31cc` over 150ms with `standard` ease, plus an optional `translateY(-1px)` lift. No scale-up, no glow.
- **Outline-button hover**: fill animates from transparent to `#ebecff` over 150ms; border stays put.
- **Card hover**: background tint deepens one tonal step; if elevated, the shadow intensifies one tier over 240ms.
- **Search-bar focus**: the indigo ring fades in at ~120ms and the autocomplete panel decelerates open over 320ms — the most choreographed interaction on the site, because search is the product.
- **Input focus**: border shifts to `#343ced` and the `0 0 0 3px rgba(52,60,237,0.18)` ring fades in simultaneously.

### Page transitions

Marketing page transitions are deliberately quiet — opacity-only fades at ~200ms with `standard` ease. No slide, no parallax. The enterprise register favours stability over spectacle.

### Reduced-motion strategy

`prefers-reduced-motion: reduce` is honoured: transform-based animations collapse to opacity-only at ~100ms, hover lifts disappear, and the search panel opens instantly rather than animating. Content never depends on motion to be understood.

### Contrast pairs (computed from live tokens)

- **text on bg**: `#333333` on `#ffffff` → **12.6:1** (AAA at all body sizes).
- **heading on bg**: `#0a0227` on `#ffffff` → **18.9:1** (AAA at all sizes — the near-black indigo is essentially as legible as black).
- **on-brand on brand**: `#ffffff` on `#343ced` → **4.9:1** (AA at body sizes, AAA at large) — comfortable for the white-on-indigo CTA.
- **brand on bg**: `#343ced` on `#ffffff` → **4.3:1** (AA for large text and UI components such as the outline button's text and border).
- **muted on bg**: `#6b6b73` on `#ffffff` → ~4.7:1 (AA at body sizes) — keep muted text at 14px+ for comfortable reading.

### Focus indicators

- **Default focus ring**: `3px solid rgba(52,60,237,0.4)` with a 2px offset; never removed for keyboard users.
- **Within inputs and the search bar**: border shifts to `#343ced` and adds a `0 0 0 3px rgba(52,60,237,0.18)` ring.
- **On the deep-indigo footer**: ring switches to `rgba(255,255,255,0.6)` for contrast against the dark ground.

### ARIA patterns

- The hero search bar uses `role="combobox"` with `aria-expanded`, `aria-controls`, and `aria-activedescendant` for the autocomplete listbox.
- Modals use `role="dialog"`, `aria-modal="true"`, a focus trap, and `Esc` to close.
- Capability / agent tabs use `role="tablist"` / `role="tab"` / `role="tabpanel"` with arrow-key navigation.
- The cookie banner (Osano) is third-party chrome; ensure it does not trap focus before main content.

### Keyboard nav order

Top bar → search bar → primary CTA → feature bands in DOM order → footer. `Tab` order matches visual order; a `Skip to content` link appears first in the DOM and becomes visible on focus.

### Screen reader hints

- Decorative product illustrations and 3D visuals carry `aria-hidden="true"`.
- Icon-only buttons carry `aria-label` ("Open menu", "Search", "Get a demo").
- Stat callouts use `aria-label` with the full phrase rather than relying on numeral parsing.

### Reduced motion

Honoured throughout — see §8.

### Tone

Glean's voice is **enterprise-confident and plainly declarative**: it states capabilities as facts ("Work AI that Works", "Agents, Assistant & Search") and trusts the reader to be a serious buyer rather than a casual browser. Sentences are short, present-tense, and free of hype punctuation — periods over exclamation marks. The register is the written equivalent of the 400-weight headline: assured without raising its voice.

### Microcopy patterns

- **Primary CTA**: "Get a demo" is the canonical phrase — the one indigo pill. Variants: "Talk to sales", "Start free".
- **Secondary CTA**: "Sign in" (the outline pill). Glean separates the buyer action (demo) from the existing-user action (sign in) and gives each its own pill treatment.
- **Error messages**: pattern is "Couldn't [action] because [reason]. [Recovery]." — specific cause, then a way forward.
- **Success confirmations**: short and declarative ("Connected." / "Demo requested.") rather than effusive.

### Empty states

Empty states are practical and instructive rather than playful: "No results — try a broader query" or "Connect a data source to start searching", each with a clear next action. No cartoons, no "Oops!" — the enterprise reader expects competence.

### CTA verb conventions

- **Primary marketing CTA**: "Get a demo" (canonical) or "Talk to sales".
- **Product / self-serve**: "Start free" or "Try Glean".
- **Existing user**: "Sign in" (never "Log in" elsewhere — keep it consistent).
- **Resources**: "Read the report", "Watch the demo" — name the artefact, never "Learn more" alone.

Glean's marketing site is **light-only** — there is no full dark-mode token swap for the public pages. The canvas stays bright white throughout, with the only consistently dark surface being the deep-indigo footer (`#29246a`).

When a dark band or footer is needed, treat it as a bounded inversion rather than a theme:

- ground swaps to `#29246a` (deep indigo), not pure black — keep the surface in the indigo family
- text becomes `#ffffff`; muted text becomes `rgba(255,255,255,0.7)`
- borders become `rgba(255,255,255,0.12)` (faint white hairline)
- the primary CTA inverts to a **white pill with deep-indigo text** (`#29246a`), since the indigo fill would disappear against the indigo ground
- the focus ring switches to `rgba(255,255,255,0.6)`
- shadows are removed; depth comes from the tonal step between the indigo ground and white cards

The in-product application may offer richer theming, but for marketing the discipline is: stay white, reserve the deep indigo for the footer, and never run a full dark page.

Glean sits at the intersection of two design lineages. The first is the **trust-via-restraint enterprise SaaS** school — Stripe and Linear — which spends its entire chromatic budget on a single confident accent over a clean canvas, lets typography rather than colour carry hierarchy, and treats whitespace as a credibility signal. Glean's one-indigo discipline, its near-black-indigo headlines, and its light-weight PolySans hero are all squarely in this tradition. The second lineage is **consumer AI search** — Perplexity, Algolia, and the lineage of the search box itself — which is why Glean's hero centres a search bar, treats the query input with as much care as a CTA, and rounds its interactive affordances into generous pills rather than the tight 8px radii of developer tools.

What Glean rejects is just as defining. It rejects the multi-hue gradient maximalism common to consumer AI startups; it rejects bold 700-weight marketing headlines in favour of an engineered 400; it rejects warm ecru canvases (Notion) in favour of clean corporate white; and it rejects shadow-heavy Material elevation in favour of tonal layering and indigo-tinted shadows used sparingly. The PolySans typeface ties it into a contemporary AI/dev-tool design wave (it shares the family with brands like Spline), but Glean holds the type lighter and quieter than most of that cohort — the typographic equivalent of an enterprise vendor that has nothing to prove.

**Named influences**

- **Stripe** ([stripe.com](https://stripe.com)) — Single confident action colour and trust-via-restraint discipline on a white canvas.
- **Linear** ([linear.app](https://linear.app)) — Near-black indigo headline register and engineered, low-shout enterprise typography.
- **Perplexity** ([perplexity.ai](https://www.perplexity.ai)) — Search-bar-as-hero composition and the consumer AI-search product register.
- **Algolia** ([algolia.com](https://www.algolia.com)) — Enterprise search styling: result cards, query chrome, indigo-blue accent.
- **Spline** ([spline.design](https://spline.design)) — Shared PolySans grotesque lineage across the modern AI / 3D-tool design wave.

## Do's and Don'ts

**Do**

- Keep the action palette to a single electric indigo (`#343ced`); secondary actions invert it to outline-on-white, never a different hue.
- Set headlines in near-black indigo (`#0a0227`), not pure black — the warmth is what ties the type to the brand.
- Hold hero headlines at 400 weight; the slim, engineered PolySans is the brand's signature typographic move.
- Set body copy in `#333333`, a calm neutral grey, for comfortable long-form reading.
- Render every primary CTA as a full 64px pill — the rounded action shape is the most recognisable primitive on the site.
- Pair the two-pill nav cluster: an outline `Sign in` and a solid indigo `Get a demo`.
- Treat the search bar as a first-class hero object — pill or 12px radius, generous padding, an indigo focus ring.
- Lift cards onto the faint `#f5f5f7` surface with a `#e6e6ea` hairline; use shadow only for things that genuinely float.
- Run sections at 96px+ vertical padding; the enterprise breath is part of the credibility.
- Tint shadows with the heading indigo (`rgba(10,2,39,...)`), keeping elevation chromatically consistent.

**Don't**

- Don't introduce a second saturated colour — and never treat the Osano cookie green (`#37cd8f` / `#058a5e`) as a Glean accent; it is third-party chrome.
- Don't set headlines bold (600–700); the negative-tracked 400-weight PolySans is what carries the voice.
- Don't use pure black (`#000`) for headings or body; use `#0a0227` for heads and `#333333` for body.
- Don't square off the CTAs — the 64px pill is non-negotiable; 8px radius reads as a different, more developer-y product.
- Don't warm the canvas toward ecru; Glean's white is clean and corporate, not paper-like.
- Don't lean on drop-shadows for card depth — depth here is tonal (`#ffffff` → `#f5f5f7`) plus a hairline.
- Don't run a full dark-mode page; the body stays white and the deep indigo (`#29246a`) is reserved for the footer.
- Don't use vague CTAs like "Learn more" or "Get started" alone — name the action ("Get a demo", "Talk to sales").
- Don't crowd the layout; the generous whitespace is what lets the single indigo CTA do its job.
- Don't mix a heavier display font in; PolySans does the whole hierarchy through weight and size, not family-mixing.

### Quick Color Reference

```
bg: #ffffff
surface: #f5f5f7
text: #333333
text-heading: #0a0227
text-muted: #6b6b73
brand: #343ced
brand-hover: #2a31cc
brand-soft: #ebecff
brand-deep: #29246a
border: #e6e6ea
on-brand: #ffffff
```

### Example Component Prompts

1. "Create a marketing hero in the Glean style: bright white `#ffffff` canvas, a centred PolySans Neutral 56px / 400-weight headline in near-black indigo `#0a0227` with `-0.018em` tracking, an 18px / 400 subhead in `#333333`, a full-width pill search bar below (white, `#e6e6ea` hairline, leading search icon, indigo `#343ced` focus ring), and a primary `Get a demo` CTA as a 64px indigo pill (`#343ced` fill, white text, `14px 28px` padding)."

2. "Design an enterprise nav bar in the Glean style: 72px tall, white background with a `1px solid #e6e6ea` bottom border, logo at left, nav items at PolySans 500 / 15px in `#0a0227`, and a right cluster of two pills — an outline `Sign in` (white fill, `#343ced` text and border, 64px radius) and a solid `Get a demo` (`#343ced` fill, white text, 64px radius)."

3. "Render a feature / capability card in the Glean style: `#f5f5f7` background, 12px radius, `1px solid #e6e6ea` hairline, 24px padding, an icon in indigo `#343ced`, a PolySans 500 / 24px title in `#0a0227`, and body text at PolySans 400 / 16px in `#333333`, no drop-shadow."

4. "Build an enterprise search-result card in the Glean style: white `#ffffff` background, 12px radius, `1px solid #e6e6ea` hairline, `16px 20px` padding, title in PolySans 500 / 16px `#0a0227`, snippet in 14px `#333333`, and a soft indigo source badge (`#ebecff` background, `#343ced` text, pill radius, PolySans 600 / 12px)."

5. "Create a deep-indigo footer band in the Glean style: `#29246a` background, white `#ffffff` link text at 14px, section headings in white 13px / 600 tracked `+0.08em` uppercase, and an inverted CTA — a white pill with deep-indigo `#29246a` text — for the final `Get a demo` call."

6. "Design a pricing tier card in the Glean style: white `#ffffff` background, `1px solid #e6e6ea` hairline, 12px radius, 28px padding, raised indigo-tinted shadow (`rgba(10,2,39,0.06) 0 1px 2px, rgba(10,2,39,0.05) 0 8px 24px`), tier name in PolySans 500 / 20px `#0a0227`, price in PolySans 400 / 48px, and a 64px indigo pill CTA at the foot."

### Iteration Guide

1. **Start with the canvas and the pill**: confirm a clean white `#ffffff` base and a 64px-pill primary CTA in `#343ced`. If your prototype's CTA is a tight rectangle, it has drifted to a developer-tool look.
2. **Check the headline weight**: hero headlines should be PolySans at **400 weight**, 56px, near-black indigo `#0a0227`. If the headline reads bold and shouty, lighten it — the slim headline is the signature.
3. **Audit the action colour**: there should be exactly one saturated indigo per module. If you see two competing colours, one is wrong — and if one of them is green, you've picked up the Osano cookie chrome by mistake.
4. **Verify the heading vs body split**: headings are `#0a0227` (near-black indigo), body is `#333333` (neutral grey). Pure black anywhere is a tell that you've left the system.
5. **Make the search bar a hero**: if the page is about search or AI assistance, the query input should be as prominent and as carefully styled as the CTA — pill or 12px radius, indigo focus ring.
6. **Keep depth tonal**: cards lift onto `#f5f5f7` with an `#e6e6ea` hairline; reserve real (indigo-tinted) shadows for floating panels only. Heavy shadows everywhere read as Material, not Glean.
7. **Mind the whitespace**: run sections at 96px+ vertical padding. If the layout feels crowded, the single indigo CTA loses its pop — the generous white is doing chromatic work.
8. **Reserve the deep indigo for the footer**: never run a full dark page; drop `#29246a` only in the footer (or one bounded band) and invert the CTA to a white pill there.