Glean Design System

Overview

Glean's marketing site commits a structural decision almost no other consumer or AI brand makes. Block hero. The entire above-fold band is a single flat panel of ultramarine {colors.primary} (#343ced) — no gradient, no atmospheric overlay, no chromatic shift across the surface. A 72px Polysans Neutral display headline in pure white sits anchored to the left third of the panel, and a small product UI screenshot floats on the right. The CTA pair below the headline is a fully-rounded white pill ("See a demo") next to a transparent ultramarine secondary outlined in white. Where Notion paints its hero on near-white with a small chromatic dot and Anthropic on cream with a single accent, Glean fills the entire above-fold band with one saturated color — closer in tonal language to a Workday or Salesforce landing page than to a generative-AI product. The choice signals institutional confidence rather than product polish.

The Polysans family does the typographic work. Polysans Neutral carries display, headings, nav, and the dominant body at weight 400 across 11.84-72px. Polysans Slim carries body paragraphs rendered by <p> elements at 16px / weight 300 — a noticeably lighter cut that softens running prose. Polysans Median appears as a 16-24px footnote tier with 0.32px letter-spacing. Polysans Neutral Mono appears six times for code-style annotations. The four-cut split inside one family is the system's distinguishing typographic move: four weights of the same superfamily rather than two different families. Where Stripe pairs Söhne with mono and Cloudflare pairs FT Kunst Grotesk with Apercu Mono Pro, Glean stays inside Polysans and lets weight variation do every distinction.

The radius scale is pill-anchored: 20px ({rounded.xl}) appears 212 times across the captured page — feature cards, product surfaces, search-result rows, dropdown menus — and 64px ({rounded.pill}) is the fully-rounded CTA. The smallest radius on a UI surface is 8px ({rounded.md}) on the search input. There is no 4-6px tier the way dev-tools systems use; Glean reads as approachable B2B rather than industrial enterprise.

Key Characteristics:

• Flat ultramarine block hero — {colors.primary} (#343ced) fills the entire above-fold band with no gradient, no atmospheric shift, no chromatic variation across the surface.
• Polysans family in four cuts: Neutral at 400 for display and labels, Slim at 300 for body paragraphs, Median at 400 for footnotes, Mono for code-style annotations.
• 20px pill ({rounded.xl}) dominates 212 captured corners; 64px ({rounded.pill}) is the CTA radius; no 4-6px tier exists.
• Chartreuse {colors.accent-chartreuse} (#d8fd49) declared as --bright-green appears only inside product UI screenshots — never in marketing chrome.
• Graphite ink ladder: {colors.ink} (#333333) carries 985 text and 976 border occurrences, becoming the dominant tone once past the hero panel.
• Below-fold canvas is near-white {colors.canvas} with hairline {colors.hairline} (#d2d4fb) — a soft lavender tint that echoes the brand voltage at lower saturation.
• 72px hero h1 at weight 400 with -2.16px letter-spacing — the loudest typographic moment; the negative tracking compresses the cap-height for the editorial display feel.
• Search-input surface uses 8px corners ({rounded.md}) — the only place in the system that drops below 20px on a UI element.

Colors

Brand

• Primary Ultramarine ({colors.primary} — #343ced): frequency 609 — 293 as text, 285 as border, 18 as background, 5 as shadow, 8 inside gradients. Wired in CSS as --primary-ultramarine, --blue-500. The brand voltage — fills the entire above-fold hero block, nav surface, primary CTA, and inline link text. The dominant chromatic element on the page; no other accent competes.

Text

• Ink ({colors.ink} — #333333): frequency 1961 — 985 as text, 976 as border. Wired as --black, --grey-333. The dominant text tone below the fold; runs paragraphs, sub-headings, nav labels, and divider strokes. Not pure black — a slightly softer graphite.
• Ink Soft ({colors.ink-soft} — #222222): frequency 31. A secondary text tone used inside specific feature-cell titles where extra weight is needed.
• Ink Graphite ({colors.ink-graphite} — #4b4b4b): frequency 7. Wired as --gray-700, --dim-grey. A mid-graphite for tertiary text and label rows.
• Ink Midnight ({colors.ink-midnight} — #0a0227): frequency 12. Wired as --midnight-blue. Reserved for section h2 headings below the fold — a deep blue-ink that subtly echoes the brand ultramarine.
• Muted ({colors.muted} — #777767): frequency 26. Wired as --gray-600. The secondary running-text tone used for footnote rows beneath product screenshots.
• Muted Cool ({colors.muted-cool} — #8d8d94): frequency 12. Wired as --gray-400. A cool-toned tertiary text for label rows under feature cards.
• Muted Lavender ({colors.muted-lavender} — #b4b5c4): frequency 43 — 22 as text, 21 as border. Wired as --gray-200. A barely-chromatic lavender used for the lightest divider strokes and small-cap row labels.
• Ink Pure ({colors.ink-pure} — #000000): frequency 104 — 43 as text, 47 as border. Used inside body paragraphs rendered with the Slim weight at 300 — the pure-black ink reads softer against the body weight than #333333 would.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 689 — 220 as text, 250 as background, 205 as border. Wired as --white, --ivory-25, plus 30+ declared Osano cookie-banner aliases. The dominant body surface below the fold.
• Surface Soft ({colors.surface-soft} — #ededf8): frequency 6 — 4 as background. Wired as --gray-25, --selected-ultramarine. A pale lavender-tinted surface used for selected category tabs and subtle elevated panels.

Hairline

• Hairline ({colors.hairline} — #d2d4fb): frequency 81 — 25 as text, 25 as border, 17 as background, 14 inside gradients. Wired as --footer-white, --osano-toggle-off-background-color. A soft lavender-tinted hairline that runs as the dominant divider tone below the fold — echoes the brand ultramarine at low chroma.
• Hairline Soft ({colors.hairline-soft} — #cecece): frequency 1 as border. The search-input outline tone.
• Hairline Cool ({colors.hairline-cool} — #dbdbdb): frequency 6 — 3 as background, 3 as border. Wired as --gainsboro, --gray-50. A neutral hairline for feature-cell outlines on the lighter sections.

Product Accents

• Accent Chartreuse ({colors.accent-chartreuse} — #d8fd49): frequency 14 — 3 as text, 6 as background, 3 as border, 2 inside gradients. Wired as --bright-green. The bright chartreuse accent declared on the brand palette but rendered only inside product UI screenshots (the "Agent Development Lifecycle" annotation, the LIVE badge). Never in marketing chrome.
• Accent Pink ({colors.accent-pink} — #e16bff): frequency 4 inside gradients. A fuchsia accent used in product UI visualizations.
• Accent Orange ({colors.accent-orange} — #ff7e4c): frequency 2 inside gradients. Wired as --orange-24. Used inside the LIVE badge color spectrum.
• Accent Peach ({colors.accent-peach} — #ffcfbd): frequency 2 inside gradients. Wired as --orange-200, --teal-pink-brown. The pale stop of the LIVE-badge gradient.
• Accent Fuchsia ({colors.accent-fuchsia} — #f1b7ff): frequency 2 — 1 as border, 1 inside gradients. A pale fuchsia hairline used in product UI annotations.

Typography

Font Families

The system runs four cuts of the Polysans superfamily, all from the same foundry and visually related but differentiated by weight and style. Polysans Neutral carries display, headings, nav, labels, and most of the body at weight 400 across 11.84-72px. Polysans Slim carries body paragraphs rendered by <p> elements at 16px in weight 300 — a noticeably lighter cut. Polysans Median carries the footnote tier at 16-24px in weight 400 with 0.32px letter-spacing. Polysans Neutral Mono appears for code-style annotations at 16px / 400.

The four-cut split inside one superfamily is the typographic move. Where competitors pair two different families (Stripe with Söhne and mono, Cloudflare with FT Kunst Grotesk and Apercu Mono Pro), Glean stays inside Polysans and lets weight and metric variation do every distinction — including the rare mono treatment.

Hierarchy

Principles

Display weight stays at 400 across the entire system. The 72px hero h1 at weight 400 with -2.16px letter-spacing — a 3% negative tracking that compresses the cap-height — is the editorial display treatment; pushing the weight to 600 or 700 would lose the institutional restraint. The body-paragraph tier drops to weight 300 (Polysans Slim) for the <p> element specifically; this is the lightest moment in the system and softens running prose against the headline ink.

The four-cut Polysans split functions like a typographic toolkit: the same superfamily provides four distinct voices via weight and metric variation rather than family substitution. The Mono cut at 16px / 400 is rare but present — six captured occurrences inside product UI annotations.

Note on Font Substitutes

Polysans is licensed and ships only on the brand site. The closest open-source substitutes are Inter at the same weights for the Neutral cut, Inter Light at weight 300 for the Slim cut, Inter Medium at weight 500 for the Median cut, and JetBrains Mono for the Mono cut. Geist (Vercel's open-source sans) is a slightly tighter alternative at the 72px display tier with similar negative tracking metrics.

Layout

Spacing System

• Base unit: 4px, with 12px (243 occurrences) and 8px (87 occurrences) as the dominant smaller modules.
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 24px · {spacing.xl} 28px · {spacing.2xl} 32px · {spacing.3xl} 48px.
• Section padding (vertical): ~96px between major sections; the hero block sits with generous vertical breathing room around the display headline.
• Card internal padding: {spacing.xl} (28px) on product cards (matching the 28px CTA gap) and {spacing.lg} (24px) on feature cells.
• Top-nav padding: {spacing.base} (16px) vertical, {spacing.3xl} (48px) horizontal — generous horizontal breathing room for the wordmark, product-nav links, and the right-aligned CTA cluster.

Grid & Container

• Max content width: ~1280px on the hero, ~1080px on the editorial sections below the fold.
• Hero block: full-bleed ultramarine canvas, content anchored at ~1080px max-width — the 72px display headline sits flush left, the product screenshot sits flush right.
• Below-fold sections: centered displays at ~1080px, with feature-card grids splitting into 2 or 3 equal columns separated by {spacing.lg} (24px) gaps.
• Search-result preview: a wide product-card row at ~960px showing a simulated query result with chartreuse-accent annotations.
• Logo wall: 8-column grid of monochrome customer logos sitting on the white canvas below the hero.

Rhythm

The page alternates between flat block and white editorial rather than a continuous tempo. The hero is a flat ultramarine block. Section 2 (the workspace embed) returns to near-white with a 20px-cornered preview frame. Section 3 (the agent-development gradient banner) is the page's only secondary chromatic moment — a pastel orange-to-lavender wash inside a wide rounded card. Section 4 (the logo wall) is dense. The remaining sections alternate between dense card grids and roomy single-card panels. The block-versus-editorial rhythm is the page's structural device — bands either commit to a flat brand canvas or recede to white.

Elevation

The system has essentially no shadow tier. The captured page has 1 shadow occurrence — barely-perceptible elevations on the search-input field and dropdown surfaces. Hairline borders ({colors.hairline}, {colors.hairline-cool}, {colors.hairline-soft}) carry the work that shadows would carry on a typical SaaS page; depth comes from surface-color contrast (block over white, lavender hairline over canvas) rather than from layered elevation.

• Flat (no shadow): hero block, body bands, feature cells, footer — 99% of surfaces.
• Hairline outlines: {colors.hairline} (#d2d4fb) marks card edges and dividers below the fold — the structural lavender that does most of the elevation work.
• Block contrast: the ultramarine hero panel sits flush against the white canvas with no shadow transition — the surface boundary is sharp.

Shapes

The radius scale is pill-anchored, centered on a 20px corner:

• {rounded.none} 0px — only on the hero block edge and the top-nav surface.
• {rounded.sm} 6px — small UI surfaces (dropdown items, single-line input edges).
• {rounded.md} 8px — the search-input field corners (39 occurrences). The only place in the system that drops below 20px on a meaningful surface.
• {rounded.lg} 12px — secondary card surfaces (9 occurrences).
• {rounded.xl} 20px — the dominant radius (212 occurrences). Product cards, feature surfaces, search-result rows, dropdown menus.
• {rounded.2xl} 24px — slightly larger feature panels (17 occurrences).
• {rounded.pill} 64px — the fully-rounded CTA pill (27 occurrences). Used on both the white CTA in the hero and the ultramarine secondary actions below.
• {rounded.full} 9999px — declared but renders the same as the {rounded.pill} token in practice.

There is no 4px tier. Even the smallest UI surface starts at 8px (the search input). The 20px corner is the structural signature — softer than a 12-16px card but smaller than a full pill, signaling approachable B2B rather than industrial enterprise.

Components

hero-section — Full-bleed {colors.primary} (#343ced) ultramarine canvas, 96×48px padding, no border-radius. Holds the 72px Polysans Neutral hero h1 in pure white, a 16px Polysans Slim sub-paragraph beneath, and the white-pill plus transparent-secondary CTA pair.

hero-heading — Pure white text on the ultramarine canvas, Polysans Neutral 72px / 400 with -2.16px letter-spacing. "Work AI that works." is the canonical instance — the loudest typographic moment on the page.

section-heading — Polysans Neutral 40px / 400 in {colors.ink-midnight} (#0a0227). Used for "Reimagine your everyday work with AI" and similar section h2s below the fold.

sub-heading — Polysans Median 24px / 400 in graphite. Used for the small editorial h2s above feature-card grids.

body-paragraph — Polysans Slim 16px / 300 in pure black. The workhorse paragraph rendered by <p> elements — the lighter Slim cut softens running prose against the headline ink.

body-paragraph-strong — Polysans Neutral 16px / 400 in graphite. Used for emphasis inside body copy and for short callout statements.

label-eyebrow — Polysans Neutral 14px / 400 with 0.4px tracking, graphite ink. The tracked-label tier above feature cells.

footnote-strip — Polysans Median 16px / 400 with 0.32px tracking, in {colors.muted} (#777767). The footnote rows beneath product cards and customer-logo strips.

button-primary — The signature CTA. {colors.primary} (#343ced) ultramarine fill, white text, {rounded.pill} 64px radius, 10×32px padding, 51px height, Polysans Neutral 18px / 400. "Get a demo" is the canonical instance below the fold.

button-primary-on-block — The hero variant. White fill, ultramarine text, same pill radius and dimensions. Used inside the hero block where the primary becomes the inverted surface.

button-secondary — Transparent fill with white text and a 1px white border. Pill radius, 51px height. The "See it in action" secondary CTA paired beside the white pill in the hero.

top-nav — {colors.primary} ultramarine surface, 64px height, with the Glean wordmark flush left in white, product-nav links (Product, Solutions, Customers, Resources, Pricing) center, and the right-aligned Sign In plus Get a Demo cluster.

nav-link — White text in {typography.nav-link} (Polysans Neutral 16px / 400), 8×12px padding. No hover background visible on the captured surface.

product-card — White surface, 1px {colors.hairline} (#d2d4fb) lavender border, {rounded.xl} 20px radius, 28px internal padding. The dominant card surface — holds product UI previews, search-result rows, feature explanations.

feature-cell — White surface, 1px {colors.hairline-cool} (#dbdbdb) border, {rounded.xl} 20px radius, 24px padding. Used in the 3-up "Find and understand / Create and summarize / Automate" strip.

category-tab — {colors.surface-soft} (#ededf8) lavender-tinted fill, graphite text, fully-rounded pill, 8×24px padding, 36px height. The "Find & understand", "Create & summarize", "Automate" selector strip.

search-input — White surface, muted-graphite text, 1px {colors.hairline-soft} (#cecece) border, {rounded.md} 8px radius, 14px vertical padding, 52px height. The only surface in the system below 20px corners — the embedded search-bar simulation.

footer — White canvas, muted-gray text, 48×48px padding. No surface contrast against the page floor — the footer continues the canvas with a single hairline rule above.

Do's and Don'ts

Do treat the brand ultramarine as a block-canvas color, not just an accent. The defining structural move is the full-bleed {colors.primary} (#343ced) hero block — committing to the saturated panel across the entire above-fold band is the institutional-confidence signal. Holding the ultramarine in reserve for CTAs and link text only loses the brand block.

Do use Polysans Slim at weight 300 for body paragraphs rendered by <p> elements. The lighter Slim cut is the system's structural body tone — softer than Neutral 400 against the headline ink. Substituting Neutral 400 across all body text flattens the four-cut typographic discipline.

Do keep the 20px ({rounded.xl}) corner as the dominant radius across product cards and feature cells. The 212-occurrence dominance is the system's structural signature; bumping to 24px or down to 12px softens the approachable-B2B identity into either consumer-AI roundness or industrial-enterprise tightness.

Do render the customer-logo wall in monochrome graphite. The flat ultramarine hero already commits the brand to a single chromatic voice; adding native-color logos below the fold would create competing chromatic centers and dilute the block-hero discipline.

Don't use the chartreuse {colors.accent-chartreuse} (#d8fd49) anywhere outside product UI screenshots. The bright green is declared as --bright-green and rendered only inside the captured product surfaces (the "Agent Development Lifecycle" annotation, the LIVE badge); using it as a CTA fill or accent stroke in marketing chrome would compete with the brand ultramarine.

Don't swap the flat ultramarine hero for a gradient. The above-fold band commits to a single flat panel of {colors.primary} (#343ced) with no chromatic shift; adding a gradient atmosphere (indigo-to-violet, blue-to-purple) loses the institutional-confidence signal and reads as a generic SaaS hero.

Don't introduce a tight 4px corner. The smallest UI radius in the system is 8px ({rounded.md}) on the search input; adding 4px corners on dropdowns or chips breaks the soft-pill identity and reads as borrowed from a dev-tools system.

Don't mix the three muted text tones in a single composition. {colors.muted} (#777767), {colors.muted-cool} (#8d8d94), and {colors.muted-lavender} (#b4b5c4) each have distinct semantic roles (footnote / tertiary / divider); placing them adjacent on the same surface reads as a system fault rather than a tonal hierarchy.

Known Gaps

• Dark mode: the captured marketing surfaces are light-only. A dark variant likely exists in the Glean product surface (the search assistant interface) but is not represented here.
• Hover and focus states: the captured surfaces show resting states only. The full hover, focus, and active matrix for the primary CTA, nav links, and feature cards is not exposed.
• Form input error states: the embedded search-input simulation carries the resting state; validation and error styling lives inside the authenticated product and is not captured.
• Motion: the hero block appears static in the screenshot but may carry subtle motion (search-bar pulse, product-screenshot parallax) on the live page. The spec captures end-state values only.
• Product surfaces: this DESIGN.md captures the marketing site only. The Glean assistant interface (app.glean.com) carries a separate token set for the search-result canvas, agent UI, and citation styling that is not represented here.
• Osano cookie-banner tokens: the CSS exposes 30+ --osano-* aliases mapped to the brand ultramarine, white, and gray families; these belong to the cookie-consent overlay rather than the design system and are not included as primary tokens.
• The chartreuse accent: {colors.accent-chartreuse} (#d8fd49) is declared as --bright-green but appears only inside product UI screenshots, never in marketing chrome. Its full role in the product palette is not exposed.