Cluely

Overview

Cluely is an undetectable AI meeting assistant designed for professionals who need real-time intelligence during conversations. The brand embodies "Transparent Clarity"—a design philosophy that prioritizes trust, precision, and seamless invisibility. The UI uses a bright, open aesthetic with a vibrant blue accent (#4984fd) that signals confidence and actionability, paired with clean grays (surface-container-high: #d1d5db, on-surface: #19191d) that convey professionalism. The emotional response is one of calm empowerment: users feel supported by intelligent assistance without distraction or cognitive overhead.

Cluely's voice is direct, confident, and human-centric. The brand avoids jargon and hype, instead using concrete, benefit-driven language. Example: "Get real-time answers without breaking focus" rather than "leveraging AI-powered contextual intelligence." The tone is reassuring yet energetic, acknowledging that users are in high-stakes moments (interviews, client calls, negotiations) and need a partner they can trust implicitly.

Colors

The color system centers on a primary blue (#4984fd) that appears on all interactive elements—buttons, links, focus states, and key data highlights. This blue is the brand's signature accent, chosen for its association with trust, clarity, and technological sophistication. It is supported by a secondary dark slate (#3d4150) used for secondary actions and structural elements, and a tertiary deep blue (#0c44a1) reserved for emphasis and high-priority states. The surface stack uses a pure white (#ffffff) as the base, with carefully calibrated grays descending from #f9fafb (surface-dim) through #b2b3ba (surface-container-highest) to create visual hierarchy without introducing color. The on-surface text color is a near-black (#19191d) that maintains 15:1 contrast ratio against white, ensuring r

Typography

The type system pairs EB Garamond (serif, 80px, 500 weight) for hero headlines with Geist (sans-serif) for all body and interface text. This pairing creates visual distinction between aspirational messaging (the serif display) and functional interface (the sans-serif system). Display text (80px, 500 weight, -0.02em letter-spacing) is reserved for hero sections and major page titles, commanding attention without aggression. Headline-lg (40px, 600 weight) is used for section titles and modal headers, maintaining hierarchy through weight rather than size. Body text (16px, 400 weight, 24px line-height) is set with generous line-height to support readability during rapid scanning—critical for users reviewing meeting notes or real-time suggestions. Label text (12–14px, 500 weight) is used for bu

Layout

The layout uses a 12-column grid with a max-width of 1280px, maintaining a fluid layout on mobile (full-width with 24px gutters) and fixed-width on desktop. The spacing scale is semantic: xs (4px) for micro-adjustments, sm (12px) for component internal spacing, md (24px) for section separation and card padding, lg (40px) for major section breaks, and xl (64px) for hero sections and full-width spacing. Container max-widths vary by section (900px for content, 1152px for feature grids, 1504px for full-bleed hero) to create visual rhythm and prevent text lines from exceeding 75 characters. White space is generous—sections are separated by lg (40px) spacing minimum, and card padding uses md (24px) on all sides. The gutter (24px) is applied consistently to all grid columns, creating a predictabl

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids heavy drop-shadows in favor of subtle, directional lighting. Level 1 (Base): no shadow; surface elements sit flush on the white background. Level 2 (Standard Cards & Inputs): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), creating a soft lift of 4px with a 12px blur radius. Level 3 (Elevated Cards, Modals, Popovers): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), increasing the lift to 8px and blur to 24px. Interactive elements (buttons) use a 6px lift on hover (0 6px 16px rgba(73, 132, 253, 0.25)) to signal interactivity without overwh

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used consistently to soften the interface while maintaining a sense of precision and control. Buttons use full (9999px) border-radius to create pill-shaped affordances that feel friendly and clickable. Cards and containers use lg (1rem / 16px) border-radius, creating a gentle curve that distinguishes them from the background without appearing playful or casual. Input fields use md (0.75rem / 12px) border-radius, a middle ground that signals functionality without excessive rounding. Chips and badges use full (9999px) radius to emphasi

Components

Action Elements Buttons are the primary call-to-action mechanism. Primary buttons use backgroundColor: {colors.primary} (#4984fd), textColor: {colors.on-primary} (white), with padding 12px 24px and height 44px for touch targets. On hover, the background shifts to #3d6fd9 (a 20% darker blue) with an expanded shadow (0 6px 16px rgba(73, 132, 253, 0.25)) to signal interactivity. On active/pressed state, the background becomes #2d5cc0 with a reduced shadow (0 2px 8px rgba(73, 132, 253, 0.15)) to indicate the button is being pressed. All button transitions use 150ms cubic-bezier(0.4, 0, 0.2, 1) for smooth, responsive feedback. Secondary buttons use a transparent background with a 1px border (outline: 1px solid {colors.outline}) and textColor: {colors.primary}. On hover, the background fills

Do's and Don'ts

**Do**

• Do use the primary blue (#4984fd) exclusively for interactive elements—buttons, links, focus states, and key data highlights. This creates a consistent, scannable interface.
• Do maintain 24px (md spacing) gutters and padding on cards to create breathing room and prevent visual clutter.
• Do apply the full (9999px) border-radius to buttons and badges to signal their interactive nature and approachability.
• Do use EB Garamond (serif) only for hero headlines and major page titles; all body and UI text must use Geist (sans-serif) for clarity.
• Do include a 1px border on all cards (border: 1px solid {colors.surface-container-high}) to define edges against the white background.
• Do use the shadow system (0 4px 12px rgba(0, 0, 0, 0.1) for standard, 0 8px 24px rgba(0, 0, 0, 0.12) for elevated) consistently across all elevated elements.

**Don't**

• Don't use the secondary blue (#0c44a1) or tertiary slate (#3d4150) for primary CTAs—reserve these for secondary actions and structural elements only.
• Don't apply rounded corners smaller than sm (0.25rem / 4px) to any interactive element; this reduces affordance and accessibility.
• Don't use colored shadows or shadows with opacity > 12%; maintain the clean, bright aesthetic by using black shadows at 6–12% opacity.
• Don't set body text smaller than 16px or with line-height less than 24px; this compromises readability during rapid scanning of meeting notes.
• Don't mix serif and sans-serif fonts within a single section or component; maintain clear visual hierarchy by reserving EB Garamond for display only.
• Don't use more than 3 levels of visual hierarchy (primary, secondary, tertiary) in a single view; excessive differentiation creates cognitive load.