.webp)
Cluely
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
Biggest SaaS library.
.webp)
.webp)
Desktop & mobile versions.
Access the Figma files.
Advanced filtering.
Let it flow.
Save design inspirations.
research
How do you process payment?
SaaSFrame subscriptions are sold on Lemon Squeezy, a secured online selling platform for creators.
What about future updates and versions?
SaaSFrame gets updated all the time! Every new update and version will immediately be made available to all SaaSFrame users.
Can you send me an invoice?
You can generate an invoice on your Lemon Squeezy portal once you purchased SaaSFrame. You will find the link in the order confirmation email.
How can I cancel my membership subscription?
You can cancel your membership subscription at any moment on your profile page.
Can I get a refund?
If you're not satisfied, you can ask for a refund within 7 days. Just send me an email at antoine[at]unmake[dot]io
I have another question.
You can send me an email at antoine[at]unmake[dot]io, I'll be happy to help with any questions.