Figma file available
.webp)
Cluely
Live AI meeting assistant
No items found.
No items found.
Visual identity
Cluely Design System
Stack \- Framework: Next.js (App Router, \_next/static asset paths, meta-next-size-adjust) \- Deployment: Cloudflare (CDN, email obfuscation via cdn-cgi) \- Images: Next.js Image Optimization (/\_next/image?url=...&w=...&q=75)
Color Philosophy Cluely uses a cool blue-lavender palette as its primary identity. The theme color #DDE2EE sets a soft, airy tone. Section backgrounds use vivid purple, pink, dark purple, and blue gradient JPGs for visual storytelling. The overall feel is polished, consumer-grade, with dark sections for dramatic effect and light sections for readability.
Typography \- No custom font explicitly declared in meta; likely Inter or system-ui via Tailwind/Next defaults \- Heading hierarchy: H1 for hero (large, bold), H2 for section titles, H3 for cards/features \- Hero headline: uppercase-style treatment, large display size (~4-5xl) \- Body text: clean, medium weight, generous line-height \- CTA labels: short, action-oriented, medium weight
Spacing & Layout \- Full-width section-based layout with centered max-width containers \- Generous vertical padding between sections (~80–120px equivalent) \- Card grid layouts for features (2–3 columns on desktop) \- Horizontal stat row (12+ languages / 300ms / 95%) with dividers \- Footer: 4-column link grid, full-width with top border
Color Palette \- Brand/Theme: #DDE2EE (blue-lavender) \- Background sections: purple (bg-purple), pink (bg-pink), dark purple (bg-purple-dark), blue (bg-blue) \- Text: dark on light backgrounds, light on dark section backgrounds \- Accent: purple tones for interactive elements and highlights
Component Defaults \- Buttons: rounded pill style, primary (dark/black fill), secondary (ghost/outline) \- App Store badge: standard Apple badge component \- Nav: minimal top bar with logo left, CTA right, hamburger on mobile \- Cards: rounded corners, subtle shadow, image-heavy \- FAQ: accordion-style collapsed sections \- Pricing: 3-column card layout with feature comparison table below
Dark/Light Mode \- Two wordmark assets: wordmark-light.svg and wordmark.svg (dark) \- Theme color meta tag signals light-mode preference: #DDE2EE \- Section-level dark areas via background images (not CSS prefers-color-scheme) \- No explicit system dark mode toggle observed
:root { / Brand Colors / --color-brand-primary: #DDE2EE; / theme-color, blue-lavender / --color-brand-purple: #7B5EA7; / inferred from bg-purple sections / --color-brand-pink: #E8619A; / inferred from bg-pink sections / --color-brand-blue: #4B7BE5; / inferred from bg-blue sections / --color-brand-purple-dark: #3D2B6B; / inferred from bg-purple-dark sections /
/ Neutrals / --color-bg-page: #FFFFFF; --color-bg-subtle: #F5F7FC; --color-text-primary: #0F0F10; --color-text-secondary: #5A5A6B; --color-text-muted: #9898A8; --color-border: #E2E6F0; --color-border-subtle: #F0F2F8;
/ Typography / --font-family-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-size-xs: 0.75rem; / 12px / --font-size-sm: 0.875rem; / 14px / --font-size-base: 1rem; / 16px / --font-size-lg: 1.125rem; / 18px / --font-size-xl: 1.25rem; / 20px / --font-size-2xl: 1.5rem; / 24px / --font-size-3xl: 1.875rem; / 30px / --font-size-4xl: 2.25rem; / 36px / --font-size-5xl: 3rem; / 48px / --font-size-6xl: 3.75rem; / 60px / --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.2; --line-height-snug: 1.375; --line-height-normal: 1.5; --line-height-relaxed: 1.625;
/ Spacing scale / --space-1: 0.25rem; / 4px / --space-2: 0.5rem; / 8px / --space-3: 0.75rem; / 12px / --space-4: 1rem; / 16px / --space-5: 1.25rem; / 20px / --space-6: 1.5rem; / 24px / --space-8: 2rem; / 32px / --space-10: 2.5rem; / 40px / --space-12: 3rem; / 48px / --space-16: 4rem; / 64px / --space-20: 5rem; / 80px / --space-24: 6rem; / 96px / --space-32: 8rem; / 128px /
/ Border radius / --radius-sm: 0.25rem; / 4px / --radius-md: 0.5rem; / 8px / --radius-lg: 0.75rem; / 12px / --radius-xl: 1rem; / 16px / --radius-2xl: 1.5rem; / 24px / --radius-full: 9999px; / pill /
/ Shadows / --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --shadow-card: 0 8px 32px rgba(110, 90, 180, 0.12);
/ Transitions / --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease;
/ Layout / --container-max-width: 1200px; --container-padding: 1.5rem; --nav-height: 64px; }
/ Dark section overrides (used via background-image sections, not prefers-color-scheme) / .section-dark { --color-bg-page: #1A1033; --color-text-primary: #FFFFFF; --color-text-secondary: rgba(255, 255, 255, 0.75); --color-border: rgba(255, 255, 255, 0.12); }
Color Tokens
| Token | Value | Usage |
|---|---|---|
| brand-primary | #DDE2EE | Theme color, hero tints, nav background |
| brand-purple | #7B5EA7 | Section backgrounds, accents |
| brand-pink | #E8619A | Feature highlight sections |
| brand-blue | #4B7BE5 | Stats section, icon accents |
| brand-purple-dark | #3D2B6B | Dark card backgrounds |
| text-primary | #0F0F10 | Main body text |
| text-secondary | #5A5A6B | Subtext, captions |
| text-muted | #9898A8 | Placeholder, disabled |
| bg-page | #FFFFFF | Page background |
| bg-subtle | #F5F7FC | Card/section subtle bg |
| border | #E2E6F0 | Default borders |
Spacing Tokens
| Token | Value | px equivalent |
|---|---|---|
| space-1 | 0.25rem | 4px |
| space-2 | 0.5rem | 8px |
| space-3 | 0.75rem | 12px |
| space-4 | 1rem | 16px |
| space-6 | 1.5rem | 24px |
| space-8 | 2rem | 32px |
| space-12 | 3rem | 48px |
| space-16 | 4rem | 64px |
| space-20 | 5rem | 80px |
| space-24 | 6rem | 96px |
Typography Tokens
| Token | Value | Usage |
|---|---|---|
| font-family-base | Inter / system-ui | All text |
| font-size-xs | 12px | Labels, badges |
| font-size-sm | 14px | Secondary text, nav links |
| font-size-base | 16px | Body text |
| font-size-lg | 18px | Lead text |
| font-size-xl | 20px | Card titles |
| font-size-2xl | 24px | Section subtitles |
| font-size-3xl | 30px | H3 headings |
| font-size-4xl | 36px | H2 section headings |
| font-size-5xl | 48px | H1 hero heading |
| font-size-6xl | 60px | Hero display (desktop) |
| font-weight-normal | 400 | Body |
| font-weight-medium | 500 | UI labels |
| font-weight-semibold | 600 | Subheadings |
| font-weight-bold | 700 | Headlines, CTAs |
Border Radius Tokens
| Token | Value | Usage |
|---|---|---|
| radius-sm | 4px | Input fields, small chips |
| radius-md | 8px | Buttons (secondary), tags |
| radius-lg | 12px | Cards |
| radius-xl | 16px | Large cards, modals |
| radius-2xl | 24px | Hero UI panels |
| radius-full | 9999px | Pill buttons (primary CTA) |
Shadow Tokens
| Token | Value | Usage |
|---|---|---|
| shadow-sm | 0 1px 2px rgba(0,0,0,0.05) | Subtle lifts |
| shadow-md | 0 4px 6px rgba(0,0,0,0.08) | Cards on hover |
| shadow-lg | 0 10px 15px rgba(0,0,0,0.08) | Floating panels |
| shadow-xl | 0 20px 25px rgba(0,0,0,0.10) | Modals, drawers |
| shadow-card | 0 8px 32px rgba(110,90,180,0.12) | Feature cards with purple tint |
Framework: Next.js (App Router) — confirmed by \_next/static asset paths, meta-next-size-adjust, and Next.js Image Optimization URLs with w and q query params.
CSS Approach: Likely Tailwind CSS — class-based utility styling inferred from Next.js App Router conventions and the absence of external stylesheet link tags in crawled HTML. No CSS Modules or styled-components signals detected.
Theme Support: Light mode primary. No prefers-color-scheme media query evidence. Dark visuals achieved via full-bleed background image JPGs (bg-purple, bg-pink, bg-purple-dark, bg-blue) rather than a true dark mode system. Two wordmark SVGs (wordmark-light.svg, wordmark.svg) confirm manual dark/light switching within specific sections.
Data Confidence: Medium-High. Theme color #DDE2EE is confirmed from meta tag. Section color names (purple, pink, blue) inferred from image filenames. Typography and spacing are inferred from Next.js/Tailwind defaults and visual hierarchy. No raw CSS file was accessible (Next.js bundles and minifies). Actual hex values for purple/pink/blue sections are estimates derived from common design conventions and filename cues.
Notable Patterns: \- Consumer-first aesthetic: smooth animations implied by video hero (pro-res-hevc-safari.mp4), App Store CTA prominent \- Pricing page uses a 3-tier card layout (Starter / Pro / Pro+Undetectability) with a feature comparison table below \- Stats displayed in a horizontal metric row with large numbers and short descriptors \- FAQ uses accordion pattern \- Footer: 4-column (Product / Resources / Support / Legal) + status badge + social icons \- App icon treatment in hero: macOS dock-style row of app icons (Safari, Settings, Zoom, Cluely, Trash) \- Keyboard shortcut UI elements used as product illustrations (Cmd+Enter, arrow keys) \- Cloudflare used for CDN and email obfuscation