`; 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.glean.com" title: "Glean — official site" description: "Glean's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Glean's primary brand color?" answer: "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." - id: "typography" title: "What typefaces does Glean use, and what should I use as substitutes?" answer: "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." - id: "hero-block" title: "Why does Glean's hero use a flat brand block instead of a gradient?" answer: "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." - id: "rounded-style" title: "What is Glean's corner-radius philosophy?" answer: "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." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own enterprise AI marketing site?" answer: "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." mockups: - "marketing-hero" - "dashboard-card-grid" colors: primary: "#343ced" ink: "#333333" ink-soft: "#222222" ink-graphite: "#4b4b4b" ink-midnight: "#0a0227" canvas: "#ffffff" surface-soft: "#ededf8" hairline: "#d2d4fb" hairline-soft: "#cecece" hairline-cool: "#dbdbdb" muted: "#777767" muted-cool: "#8d8d94" muted-lavender: "#b4b5c4" accent-chartreuse: "#d8fd49" accent-pink: "#e16bff" accent-orange: "#ff7e4c" accent-peach: "#ffcfbd" accent-fuchsia: "#f1b7ff" ink-pure: "#000000" typography: display-xl: fontFamily: "\"Polysans Neutral\", Arial, sans-serif" fontSize: 72px fontWeight: 400 lineHeight: 78px letterSpacing: "-2.16px" display-lg: fontFamily: "\"Polysans Neutral\", Arial, sans-serif" fontSize: 40px fontWeight: 400 lineHeight: 48px letterSpacing: 0 display-md: fontFamily: "\"Polysans Median\", Arial, sans-serif" fontSize: 24px fontWeight: 400 lineHeight: 31px letterSpacing: 0 heading-md: fontFamily: "\"Polysans Neutral\", Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 25px letterSpacing: 0 body-lg: fontFamily: "\"Polysans Neutral\", Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 26px letterSpacing: 0 body-md: fontFamily: "\"Polysans Slim\", Arial, sans-serif" fontSize: 16px fontWeight: 300 lineHeight: 22px letterSpacing: 0 body-sm: fontFamily: "\"Polysans Neutral\", Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 18px letterSpacing: 0 caption: fontFamily: "\"Polysans Neutral\", Arial, sans-serif" fontSize: 11.84px fontWeight: 400 lineHeight: 15px letterSpacing: 0 label-tight: fontFamily: "\"Polysans Neutral\", Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 15px letterSpacing: "0.4px" footnote: fontFamily: "\"Polysans Median\", Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 18px letterSpacing: "0.32px" mono-md: fontFamily: "\"Polysans Neutral Mono\", Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 26px letterSpacing: 0 button-md: fontFamily: "\"Polysans Neutral\", Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 29px letterSpacing: 0 nav-link: fontFamily: "\"Polysans Neutral\", Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 21px letterSpacing: 0 rounded: none: "0px" sm: "6px" md: "8px" lg: "12px" xl: "20px" 2xl: "24px" pill: "64px" full: "9999px" spacing: xs: "4px" sm: "8px" md: "12px" base: "16px" lg: "24px" xl: "28px" 2xl: "32px" 3xl: "48px" components: hero-section: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.display-xl}" rounded: "{rounded.none}" padding: "96px 48px" hero-heading: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.display-xl}" section-heading: backgroundColor: "transparent" textColor: "{colors.ink-midnight}" typography: "{typography.display-lg}" sub-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-md}" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink-pure}" typography: "{typography.body-md}" body-paragraph-strong: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-lg}" label-eyebrow: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.label-tight}" footnote-strip: backgroundColor: "transparent" textColor: "{colors.muted}" typography: "{typography.footnote}" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: "10px 32px" height: "51px" button-primary-on-block: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: "10px 32px" height: "51px" button-secondary: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: "10px 32px" height: "51px" borderColor: "{colors.canvas}" top-nav: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "16px 48px" height: "64px" nav-link: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.nav-link}" padding: "8px 12px" product-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: "28px" borderColor: "{colors.hairline}" feature-cell: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: "24px" borderColor: "{colors.hairline-cool}" category-tab: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.pill}" padding: "8px 24px" height: "36px" search-input: backgroundColor: "{colors.canvas}" textColor: "{colors.muted}" typography: "{typography.body-lg}" rounded: "{rounded.md}" padding: "14px 12px 14px 36px" height: "52px" borderColor: "{colors.hairline-soft}" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.muted}" typography: "{typography.body-sm}" padding: "48px 48px" --- ## 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 `
` 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 `
` 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 | Token | Family / Weight | Size | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.display-xl}` | Polysans Neutral 400 | 72px | 78px | -2.16px | Hero h1 ("Work AI that works") | | `{typography.display-lg}` | Polysans Neutral 400 | 40px | 48px | 0 | Section h2 ("Reimagine your everyday work with AI") | | `{typography.display-md}` | Polysans Median 400 | 24px | 31px | 0 | Sub-section h2 (smaller editorial display) | | `{typography.heading-md}` | Polysans Neutral 400 | 18px | 25px | 0 | h3 sub-section titles | | `{typography.body-lg}` | Polysans Neutral 400 | 16px | 26px | 0 | Default running text — Neutral weight body | | `{typography.body-md}` | Polysans Slim 300 | 16px | 22px | 0 | The workhorse body paragraph rendered by `
` elements — the lighter Slim cut | | `{typography.body-sm}` | Polysans Neutral 400 | 14px | 18px | 0 | Caption rows beneath product cards | | `{typography.caption}` | Polysans Neutral 400 | 11.84px | 15px | 0 | Metadata strips, small-cap row labels | | `{typography.label-tight}` | Polysans Neutral 400 | 14px | 15px | 0.4px | Tight tracked labels under product cells | | `{typography.footnote}` | Polysans Median 400 | 16px | 18px | 0.32px | Footnote strips beneath section dividers | | `{typography.mono-md}` | Polysans Neutral Mono 400 | 16px | 26px | 0 | Code-style annotations | | `{typography.button-md}` | Polysans Neutral 400 | 18px | 29px | 0 | Primary and secondary button labels | | `{typography.nav-link}` | Polysans Neutral 400 | 16px | 21px | 0 | Top-nav link labels | ### 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 `
` 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 `
` 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 `
` 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.