What is Glean's primary brand color?

Glean's brand voltage is a saturated ultramarine #343ced wired into CSS as --primary-ultramarine and --blue-500. It appears 609 times in the captured marketing page — 293 as text, 285 as border, 18 as background, 5 as shadow, 8 inside gradients. The dominant rendering is the flat above-fold hero block: the entire panel is filled with this single color, and the 72px Polysans Neutral headline reads in pure white on top. Below the fold the ultramarine retreats to nav-button fills, inline link text, and the search-input focus ring. No other accent competes; the bright chartreuse #d8fd49 declared as --bright-green appears only inside product UI screenshots, never in the marketing chrome.

What typefaces does Glean use, and what should I use as substitutes?

Glean runs four cuts of the Polysans family. Polysans Neutral at weight 400 carries display headings (72px hero, 40px section h2, 24px sub-heading), nav labels, and the dominant body. Polysans Slim at weight 300 carries paragraphs rendered by ` ` at 16px / 22.4px line-height. Polysans Median at weight 400 carries footnote text at 16px with 0.32px letter-spacing. Polysans Neutral Mono at weight 400 carries code-style annotations. The closest open-source substitute for the Polysans family is Inter at the same weights — the proportions transfer cleanly at the 14-18px body sizes. The Slim weight at 300 is the trickiest to substitute; Inter Light or Geist Light at the same weight is the nearest match.

Why does Glean's hero use a flat brand block instead of a gradient?

The hero is a single flat panel of ultramarine #343ced — no gradient, no atmospheric overlay, no chromatic shift across the band. The choice signals institutional confidence rather than product polish. Where consumer-AI brands like Anthropic and OpenAI lean on white or near-white heroes with a small accent, Glean commits the entire above-fold band to one saturated color, which is closer to a Workday or Salesforce landing page than to a generative-AI product. The 72px Polysans Neutral headline in pure white sits on the left third and reads with maximum contrast against the flat indigo surface. This is the structural design move that defines the brand on first scroll.

What is Glean's corner-radius philosophy?

The radius scale is dominated by a single 20px pill appearing 212 times across the captured page — feature cards, product surfaces, search-result rows, dropdown menus. 64px appears 27 times as the fully-rounded CTA pill. 24px appears 17 times on slightly larger surfaces. 8px is reserved for the search-input field. There is no 4-6px tight tier the way dev-tools systems use; the smallest radius on a UI surface is 8px. The 20px corner is the system's structural signature — softer than a typical 12-16px card but smaller than a full pill, signaling approachable B2B rather than industrial enterprise.

Can I use this DESIGN.md to build my own enterprise AI marketing site?

Yes — the file is structured for ingestion by Claude, Cursor, or any AI tool that reads design tokens. The agent reproduces Glean's specific moves: the flat ultramarine block hero, the 72px Polysans Neutral display in pure white, the 20px pill radius on product cards, the 64px fully-rounded CTA, and the Polysans Slim body at 16px / 300. The token references resolve cleanly — every hex, font name, radius, and spacing value is quoted scalar. The one move worth borrowing only if your audience is enterprise: the flat brand-block hero. On a consumer-AI marketing site the saturated panel reads as a corporate landing page; the move depends on the audience expecting institutional polish.

Glean Design System

Glean's marketing site sits on a flat ultramarine block hero with a 72px Polysans Neutral headline in white.

About Glean DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source glean.com

AI & LLM Platforms
Productivity & SaaS

Glean's marketing site stages its hero as a saturated ultramarine block — the above-fold band is a flat panel of #343ced, the page's brand voltage, with a 72px Polysans Neutral display headline in pure white anchored to the left third and a small product screenshot floating on the right. The CTA pair below the headline is a fully-rounded white pill ("See a demo") sitting beside a transparent ultramarine secondary. Where Notion paints its hero on near-white and Asana leans on a soft pastel atmosphere, Glean commits the entire above-fold panel to a single saturated indigo block — closer in tonal language to a B2B enterprise like Workday than to a consumer-AI product. Below the fold the page returns to near-white surfaces and the ultramarine retreats to nav buttons and inline links.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 19 color tokens drawn from the captured page — the brand ultramarine appearing 609 times, near-black graphite at 1961 occurrences for text and borders, white at 689, a soft lavender hairline at 81, plus a discreet chartreuse accent held inside product UI. Typography runs four cuts of the Polysans family — Polysans Neutral at 11.84-72px in weight 400 for display, headings, and labels; Polysans Slim at 16px in weight 300 for body paragraphs rendered by `<p>`; Polysans Median at 16-24px in weight 400 for footnotes; and Polysans Neutral Mono for code-style annotations. 18 components cover the ultramarine block hero, the white pill CTA, hairline cards, the search-input field, and the nav.

Feed this file to Claude or Cursor and it reproduces Glean's specific moves: the flat ultramarine block hero, the 72px Polysans Neutral display in white, the 20px pill corners across product cards, the 64px fully-rounded CTA pill, and the Polysans Slim 16px / 300 body paragraph tier. The one move worth borrowing only if your product is enterprise-targeted: the flat brand-block hero. On a consumer marketing site the saturated panel reads as a corporate landing page rather than as a product surface; on a B2B enterprise page it reads as institutional confidence.

What makes it distinct

Ultramarine block herothe brand voltage #343ced fills the entire above-fold panel as a flat block, with a 72px Polysans Neutral headline in pure white anchored to the left
Polysans triplePolysans Neutral at 400 for display and labels, Polysans Slim at 300 for body paragraphs, Polysans Median for footnotes, plus Polysans Neutral Mono for code
20px pill everywherethe radius scale is dominated by a 20px corner appearing 212 times across cards and surfaces, plus a fully-rounded 64px CTA pill
Chartreuse held inside product UIthe bright #d8fd49 accent appears only inside the captured product screenshots, never in the marketing chrome
Graphite ink ladder#333333 carries 985 text occurrences and 976 borders, becoming the dominant tone below the fold while the brand ultramarine retreats to nav buttons and inline links

Live at glean.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

glean.com

Explore Glean

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Glean design system FAQ

Common questions about Glean's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Glean — official site

Glean's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.