Cluely

Overview

Cluely is an undetectable AI meeting assistant designed for professionals who need real-time intelligence during conversations without drawing attention. The design system embodies 'Transparent Minimalism'—a philosophy where powerful functionality recedes into the background, allowing the user's meeting to remain the focal point. The aesthetic combines a vibrant blue gradient hero (transitioning from #0544a9 to #81b6ff) with clean, purposeful white surfaces and precise typography. The brand personality is confident yet unobtrusive: Cluely doesn't announce itself, it simply works. Voice: direct, professional, never flashy. Example: 'Get instant answers without breaking eye contact.'

Colors

The color system centers on a trust-driven blue primary (#4984fd) used exclusively for interactive elements—buttons, links, and focus states. This blue appears across the hero gradient (layered with #0544a9, #022c70, #0c44a1, #497ee9, #749cff) to create visual depth and energy. The surface stack uses a refined grayscale: white (#ffffff) for primary surfaces, light grays (#f9fafb, #f3f4f6, #edeef2) for containers and hover states, and dark charcoal (#19191d) for text. Secondary blue (#3b82f6) and supporting grays (#626275, #898b91, #b2b3ba) provide hierarchy without competing for attention. Error states use a muted red (#dc2626) reserved for critical warnings. The tertiary color (#a3adc2) and its container (#dde2ee) create subtle visual separation for secondary information and badges. All i

Typography

The type system pairs EB Garamond (serif, 80px, weight 500) for the hero display to convey sophistication and permanence—meeting notes are permanent records. Body copy uses Geist (sans-serif, 16px, weight 400, line-height 24px) for clarity and scannability during rapid information intake. Headlines scale from 40px (headline-lg, weight 600) down to 14px (label-md, weight 500), each with precise letter-spacing: display uses -0.02em for tightness, headline-lg uses -0.01em, and labels use +0.01em to +0.02em for emphasis. All text over gradient backgrounds receives a subtle text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to ensure legibility. Interactive labels (buttons, badges) use weight 500 at 12–14px to signal actionability without visual noise.

Layout

The layout uses a 12-column grid with a max-width of 1280px, maintaining 24px gutters on desktop and 16px on mobile. The hero section spans full-width with 112px padding (top and sides) to create breathing room around the display headline. Section rhythm follows a lg spacing rule (40px) between major sections, with md spacing (24px) between cards and content blocks. Container widths vary by content type: full-width for hero and gradients, 960px for feature sections, 800px for comparison tables, and 900px for testimonials. White-space is aggressive—the design favors clarity over density, with 28px line-height on body text and 12px gaps between list items. The spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is used consistently for padding, margins, and gaps to create visual

Elevation & Depth

Depth is achieved through a restrained shadow system and subtle color shifts rather than dramatic layering. Level 1 (Base): surfaces use no shadow, relying on 1px borders at rgba(0, 0, 0, 0.08) for definition. Level 2 (Standard Card): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) with a 1px border at {colors.outline-variant}. Level 3 (Elevated/Hover): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) with a 2px border at {colors.primary}. Interactive elements (buttons, inputs) use the md shadow on hover and lg shadow on active. Focus states add a 3px ring at rgba(73, 132, 253, 0.1) without additional sh

Shapes

The shape philosophy is 'Precision with Warmth'—sharp corners where clarity matters, rounded corners where interaction occurs. Buttons use full border-radius (9999px) to signal affordance and approachability, creating pill-shaped CTAs at 44px height. Cards and containers use lg radius (1rem / 16px) for a modern, friendly feel without excessive softness. Input fields use DEFAULT radius (0.5rem / 8px) for a technical, focused appearance. Dividers and subtle UI elements use md radius (0.75rem / 12px). The hero section and full-width backgrounds use 0px radius to anchor the design. This hierarchy

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use {colors.primary} (#4984fd) background with white text, full radius (9999px), 12px vertical / 24px horizontal padding, and 44px height. Hover state shifts to #3d7ae8 with md elevation shadow (0 4px 12px rgba(0, 0, 0, 0.1)). Active state uses #2d5cc4 with a 0.98 scale transform for tactile feedback. Secondary buttons use transparent background with a 1px border at {colors.outline-variant}, same padding and height, and shift to {colors.surface-container-low} background on hover. All buttons use label-md typography (14px, weight 500) with 0.01em letter-spacing. Transition timing is 200ms cubic-bezier(0.4, 0, 0.2, 1) for smooth state changes.

Containers & Surfaces Cards use {colors.surface} (#ffffff) backg

Do's and Don'ts

**Do**

• Do use the primary blue (#4984fd) exclusively for interactive elements—buttons, links, focus rings—to create a consistent call-to-action language.
• Do maintain aggressive white-space: 40px between major sections, 24px between cards, 28px line-height on body text to ensure clarity during rapid scanning.
• Do apply the md elevation shadow (0 4px 12px rgba(0, 0, 0, 0.1)) on hover states for all interactive surfaces to signal depth and responsiveness.
• Do use EB Garamond (serif, 80px, weight 500) only for hero display headlines to convey permanence and trust; reserve Geist for all other typography.
• Do pair full border-radius (9999px) buttons with lg radius (1rem) cards to create a clear hierarchy: the most interactive elements feel the most inviting.

**Don't**

• Don't use secondary colors (gray, tertiary blue) for primary CTAs—reserve #4984fd for all primary actions to maintain visual clarity.
• Don't apply shadows deeper than lg elevation (0 16px 40px rgba(0, 0, 0, 0.12)) to avoid visual heaviness; the design favors subtle depth over drama.
• Don't mix border-radius values within a single component family—buttons are always full (9999px), cards are always lg (1rem), inputs are always DEFAULT (0.5rem).
• Don't use text-shadow on dark backgrounds or over solid colors; reserve it only for text over gradients (0 2px 4px rgba(0, 0, 0, 0.15)) to maintain legibility.
• Don't compress spacing below the sm unit (12px) for interactive elements; maintain minimum 44px height for buttons and 44px height for inputs to ensure touch-friendly targets.