Glean

Overview

Glean is an Enterprise AI platform that connects to company data to power intelligent search, autonomous agents, and workflow automation at scale. The design system embodies 'Data-Driven Minimalism'—a visual philosophy that prioritizes clarity and precision through bold, saturated accent colors (primary: #343ced, secondary: #ff7e4c, tertiary: #d8fd49) layered over a clean, light canvas (surface: #ffffff, on-surface: #333333). The aesthetic conveys enterprise trustworthiness and technical sophistication without sacrificing approachability. Every interface element is designed to feel purposeful and responsive, reflecting the platform's core promise: turning complex knowledge into immediate, actionable intelligence.

The brand voice is direct, confident, and human-centered. Glean speaks to enterprise leaders and knowledge workers with precision and respect for their time—no marketing hyperbole, no unnecessary jargon. Sentences are active and outcome-focused. Example: 'Glean turns company knowledge into action without runaway model spend.' The tone balances technical credibility with accessibility, acknowledging that AI adoption is both an opportunity and a challenge that requires thoughtful, scalable solutions.

Colors

The color system is built on a foundation of clean, high-contrast surfaces with three strategic accent colors that drive user attention and interaction. Primary (#343ced, a saturated indigo-blue) is the signature brand accent used exclusively for CTAs, focus states, and primary navigation—it appears on the 'Get a demo' button and key interactive elements, commanding attention without aggression. Secondary (#ff7e4c, a warm coral-orange) provides supporting emphasis for secondary actions, highlights, and status indicators, creating visual rhythm across feature cards and testimonials. Tertiary (#d8fd49, a vibrant lime-yellow) is reserved for accent highlights, badges, and data visualization accents that require maximum contrast against the primary blue.

The surface stack uses a near-white pa

Typography

The type system uses Polysans Neutral as the primary typeface family, paired with Arial as a fallback, creating a modern yet accessible visual language. Display (56px, 400 weight, -0.02em letter-spacing) is reserved for hero headlines and major page titles, commanding attention through scale rather than weight. Headline-lg (40px, 400 weight) and headline-md (28px, 400 weight) establish section hierarchy with consistent 400 weight, maintaining a clean, uncluttered aesthetic that feels premium and intentional. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) provide comfortable reading rhythm with generous line-height (1.5x to 1.75x font size) to support scanning and comprehension. Label-md (14px, 600 weight, 0.01em letter-spacing) and label-sm (1

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, providing flexibility for both desktop and tablet experiences. The grid is fluid on mobile (single column with 24px gutter) and expands to multi-column layouts at breakpoints (768px, 1024px, 1280px). Whitespace is semantic and generous: lg spacing (40px) separates major sections (hero, feature blocks, testimonials), md spacing (24px) is used for component padding and card margins, and sm spacing (12px) is used for internal component spacing (button padding, input field padding). The gutter (24px) is consistent across all breakpoints, creating a predictable rhythm. Container max-width (1280px) ensures content remains readable and scannable at ultra-wide displays. Hero sections use full-width backgrounds with c

Elevation & Depth

Elevation in Glean's design system is achieved through subtle shadow layering and background color shifts rather than dramatic depth effects. Level 1 (Base): The primary surface (#ffffff) with no shadow, used for the main page background and content areas. Level 2 (Elevated Cards): Cards and containers use elevation.sm (0 1px 2px rgba(0, 0, 0, 0.06)) with a background of surface-container-lowest (#f6f3eb), creating a barely perceptible lift that suggests interactivity without visual noise. Level 3 (Interactive/Hover): On hover, cards transition to elevation.md (0 4px 12px rgba(0, 0, 0, 0.08))

Shapes

The shape philosophy is 'Soft-Technical'—combining rounded corners with precise geometry to convey both approachability and enterprise-grade precision. Buttons use the full radius (border-radius: 9999px / rounded.full) to create a friendly, pill-shaped appearance that feels modern and inviting; this is applied consistently across primary, secondary, and ghost button variants. Cards and containers use lg radius (1rem / 16px) for a subtle roundness that softens the grid without appearing playful or casual. Input fields use DEFAULT radius (0.5rem / 8px) for a more technical, form-like appearance

Components

Action Elements Buttons are the primary interaction pattern and come in three variants: primary (background: #343ced, color: #ffffff, border-radius: 9999px, padding: 10px 32px, height: 48px), secondary (background: #eeeeee, color: #333333, border: 1px solid #d0d0d0, border-radius: 9999px, padding: 10px 24px, height: 48px), and ghost (background: transparent, color: #343ced, border: 1px solid #343ced, border-radius: 9999px, padding: 10px 24px, height: 48px). All buttons use typography.label-md (14px, 600 weight) and transition background-color 200ms ease-out on hover. Primary buttons darken to #2a2fb8 on hover and #1f2399 on active. Secondary buttons shift to #e8e8e8 on hover. Ghost buttons shift to #e8ebff (primary-container) on hover. All buttons maintain a minimum height of 48px to m

Do's and Don'ts

**Do**

• Do use primary (#343ced) exclusively for CTAs, focus states, and primary navigation—it is the signature brand accent and should never be diluted or overused.
• Do maintain a minimum 48px height for all interactive elements (buttons, input fields, list items) to meet WCAG 2.5.5 touch-target requirements.
• Do apply generous whitespace (lg spacing: 40px) between major sections to create visual breathing room and reduce cognitive load.
• Do use 400 weight typography for all headlines—emphasis is achieved through scale and color, not weight, maintaining a clean, premium aesthetic.
• Do transition all interactive elements (buttons, cards, inputs) with 200ms ease-out timing to create responsive but not jarring interactions.
• Do use the full radius (border-radius: 9999px) exclusively for buttons to create a distinctive, modern pill-shaped appearance.

**Don't**

• Don't use secondary (#ff7e4c) or tertiary (#d8fd49) as primary CTAs—these are supporting accents and will dilute the primary brand signal.
• Don't apply shadows heavier than elevation.lg (0 16px 40px rgba(0, 0, 0, 0.12)) on standard components—Glean's aesthetic is clean and minimal, not layered or dramatic.
• Don't use font weights heavier than 600 in body text or headlines—this creates visual clutter and contradicts the premium, uncluttered aesthetic.
• Don't mix border-radius values within a single component family (e.g., don't use both 0.5rem and 1rem on different buttons)—consistency in shape language is critical to brand recognition.
• Don't place small text (label-sm, 12px) over busy backgrounds without a text-shadow (0 1px 2px rgba(0, 0, 0, 0.05)) or background treatment—legibility is non-negotiable.
• Don't use on-surface-variant (#727272) for primary text—it is reserved for secondary text, helper text, and disabled states to maintain clear hierarchy.