# Cluely — Marketing site Design Spec

> Source: cluely.com (live DOM, computed styles), 2026-07-25. 0 stylesheets
> blocked; 170 :root vars (mostly Tailwind v4 scaffolding), so §2 is read from
> computed fills/text. `[data-sonner-toast]` rules and the `swipe-out-*` /
> `sonner-fade-in` keyframes belong to the Sonner toast library, not the brand.
> **Screenshot could not be captured**: injection timed out at 5s repeatedly —
> the page runs an autoplaying hero video plus continuous animation. All values
> below are live-DOM reads; only the visual side-by-side is missing.
> Reality check: **"bold, high-contrast" holds; "dark" is only half the story.**
> The body canvas is **white**, and the site is genuinely **dual-theme** — it
> ships **33 `prefers-color-scheme: dark` blocks**, the first real light/dark
> system in this library. The dark hero is a section, not the theme. The find the
> hint misses entirely: the display is an **80px EB Garamond serif** over Geist
> UI, and the buttons are a **named gradient-button family** (blue / black /
> purple) whose hover fades in a second inner gradient layer.

## 1. Visual Theme & Atmosphere

High-contrast, confident, and more literary than the category. A white body carries a dark full-bleed hero section where an 80px EB Garamond serif headline sits over video; everything functional is Geist at small sizes. The chrome is a cool blue-grey ladder, and the accents are unusual — an electric cyan and a coral — used sparingly on state. What makes it feel expensive is the button construction: gradient fills with a *second* gradient layer that fades in on hover, plus richly coloured shadows (a blue bevel, a periwinkle offset glow) rather than neutral black. Feels: high-contrast, confident, glossy, literary.

## 2. Color Palette & Roles

| Token | Hex / value | Role / usage |
|---|---|---|
| white | #ffffff | body canvas + text on dark (405/240 uses) |
| white-333 | rgba(255,255,255,.333) | THE translucent fill (48 uses) |
| white-70 | rgba(255,255,255,.7) | lighter translucent fill |
| white-25 | rgba(255,255,255,.25) | top rim-light shadow |
| black | #000000 | primary text |
| ink | #1c1d22 | near-black surface |
| ink-2 | #22242a | dark fill |
| slate | #2e3038 | dark surface / secondary text |
| slate-2 | #263043 | blue-cast dark text |
| grey | #676b74 | muted fill |
| grey-2 | #777a88 | muted text |
| grey-3 | #898b91 | mid fill |
| grey-4 | #b2b3ba | faint text (82 uses) |
| mist | #edeef2 | light text on dark (75 uses) |
| mist-2 | #e3e3e7 | light fill |
| mist-3 | #e2e3e9 | 1px border |
| periwinkle-bg | #dde2ee | section fill |
| ink-10 | rgba(24,23,28,.1) | light scrim |
| ink-80 | rgba(24,23,28,.8) | heavy scrim |
| cyan | #7df0f8 | electric accent |
| coral | #ff6467 | alert / destructive accent |
| green | #00ff26 | one 2px status border |

Rules: chrome is a **cool blue-grey** ladder (note #263043 and #dde2ee both carry blue). Cyan and coral are state accents only. Nothing is warm.

## 3. Typography Rules

A two-voice split with a large size gap. **EB Garamond** — a book serif — carries display at **80/76.8, weight 500, -1px tracking** (line-height below font size). **Geist** does everything else, and notably runs *small*: 28/35 sub-heads, 19/26.6 section labels, 16/24 nav, and body at just **12/19.2**. A trace of `ui-monospace` appears for technical text.

> Specimen substitution: **both are open Google fonts** (EB Garamond, Geist), so
> previews use the real faces.

| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Display (h1) | EB Garamond | 80/76.8 | 500 | -1px |
| Sub-head (h3) | Geist | 28/35 | 500 | -0.5px |
| Section label (h2) | Geist | 19/26.6 | 500 | -0.38px |
| Nav | Geist | 16/24 | 400 | normal |
| Body | Geist | 12/19.2 | 400 | normal |
| Button | Geist | 12/16 | 500 | normal |

## 4. Component Stylings

Radii are tight: **4px** dominant (33 uses), 6px, 8px, 10px, 12px, 13px, 16px, 24px. Buttons are a **named gradient family** — `.blue-gradient-button`, `.black-gradient-button`, `.purple-gradient-button` — and the hover mechanic is consistent and worth copying: each holds an **inner gradient layer at opacity 0 that fades to 1** on hover, so the fill deepens without a colour swap; purple additionally scales to **1.03**. Borders include a 1px #ffffff (12 uses), 1px
#e2e3e9, a **0.5px rgba(155,155,155,.4)** sub-pixel rule, and a 2px #00ff26
status outline.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Blue gradient button | gradient fill, 4px | inner gradient layer `opacity: 0 → 1` | not defined on brand chrome | — | not observed |
| Black gradient button | gradient fill | same inner-layer fade | as above | — | — |
| Purple gradient button | gradient fill | `::after opacity → 0.4` **plus `transform: scale(1.03)`** | as above | — | — |
| Translucent chip | rgba(255,255,255,.333) | `all 0.15s cubic-bezier(.4,0,.2,1)` | as above | — | — |

Focus note: **no focus ring on Cluely's own chrome**; the only focus rules recovered belong to Sonner toasts. Supply one (e.g. `0 0 0 3px rgba(125,240,248,.5)` using the brand cyan).

## 5. Layout Principles

A dark full-bleed hero section over an autoplaying video, carrying the 80px serif headline and gradient CTAs, sits at the top of an otherwise white page. Below, content alternates white and #dde2ee bands with 4px-radius cards and small Geist type. Live meeting-assistant mockups (transcript panels, instant-answer cards) do the explaining.

## 6. Depth & Elevation

Radius: **4px** dominant, then 6/8/10/12/13/16/24px. Shadows are the standout — **richly coloured, never neutral**:

- `rgb(12,68,161) 0 0 0 0.5px, rgb(2,44,112) 0 -1px …` — a **deep blue bevel** ring (5 uses)
- `rgba(148,172,243,.4) 20px 20px 24px` + layer — a **periwinkle offset glow**, thrown down-right (4)
- `rgba(207,226,255,.24) 0 0 0 1px` + white layer — pale blue rim light (4)
- `rgba(255,255,255,.25) 0 -1px 0` — top rim-light (3)
- `rgba(0,0,0,.05) 0 2px 20px -1px inset` — soft interior (3)
- 9 elements carry a transparent placeholder shadow

**Five backdrop blurs** — 64px, 16px, 8px, 3px and a fine **0.5px** — a genuinely graded glass scale. One grain layer.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| color, background, border, outline, fill | Tailwind default | cubic-bezier(.4,0,.2,1) | chrome (dominant, 49x) |
| all | 0.15s | cubic-bezier(0.4, 0, 0.2, 1) | controls |
| transform, translate, scale, rotate | 0.2s | cubic-bezier(0.4, 0, 0.2, 1) | motion group |
| transform | 0.16s | ease-out | fast nudges |
| transform group | 0.16s | cubic-bezier(0, 0, 0.2, 1) | entrances |
| opacity | 0.3s | cubic-bezier(0.4, 0, 0.2, 1) | the gradient-layer fades |

House transition: **0.15–0.2s cubic-bezier(.4,0,.2,1)**. Brand keyframes: `hero-word-rise` (**0.55s**, on 5 elements — a staggered word-by-word entrance), `hero-fade-up` (0.5s), `desktop-campaign-cta-pulse`, `logos`, `marquee`, `accordion-up`/`-down`, `pulse` (2s infinite). One overshoot easing, `cubic-bezier(0.34, 1.56, 0.64, 1)`. The `swipe-out-*` and `sonner-fade-in` keyframes are the toast library. No animation library detected. The site ships **one `prefers-reduced-motion: reduce` block**.

## 8. Backgrounds, Effects & WebGL

Eight gradients, and they are **layered multi-radial compositions** rather than single ramps — e.g. `radial-gradient(101.79% 101.79% at 65.61% 81.79%, rgba(255,255,255,.6), transparent)` stacked with a second `radial-gradient(114.65% 114.65% …)`. Note the fractional percentage sizing and off-centre origins. Five graded backdrop blurs (§6), one autoplaying video, one grain layer, 1 raster layer. No canvas/WebGL.

## 9. Do's and Don'ts

### Do
- Treat this as a **dual-theme** system — 33 dark-scheme blocks means light and dark are both first-class.
- Pair an 80px EB Garamond serif display with small Geist UI (body at 12/19.2).
- Set the display line-height below the font size (80/76.8) with -1px tracking.
- Build buttons as gradient fills with an **inner gradient layer that fades in on hover**, not a colour swap.
- Use richly **coloured** shadows — a blue bevel, a periwinkle offset glow — never neutral black.
- Use the graded blur scale (0.5 / 3 / 8 / 16 / 64px) rather than one blur value.
- Keep the ladder cool blue-grey; ration cyan and coral to state.

### Don't
- Don't assume dark-only; the body canvas is white.
- Don't scale body type up — 12/19.2 is deliberate.
- Don't swap button fills on hover; fade the second layer.
- Don't use neutral drop shadows.
- Don't ship without a focus ring; the site defines none on its own chrome.

## 10. Responsive Behavior

Tailwind v4 range syntax plus a px overlay:

| Breakpoint | What changes |
|---|---|
| 440px | small-phone floor |
| max 600px | phone |
| 40rem (640px) | phone → large-phone |
| 48rem / 768px | tablet |
| 64rem / 1024px | desktop |
| 80rem / 1280px | wide |
| 96rem (1536px) | ultra-wide |

**`darkSchemeBlocks: 33`** — a real dual-theme system, the most in this library by a wide margin. No container queries. **1 reduced-motion block.**

## 11. Agent Prompt Guide

- Canvas `#ffffff` (light) / `#1c1d22`–`#2e3038` (dark sections) · Ink `#000000` · Faint `#b2b3ba` · On-dark `#edeef2` · Band `#dde2ee` · Fill `rgba(255,255,255,.333)` · Accents `#7df0f8` cyan / `#ff6467` coral
- Font: **EB Garamond** display 80/76.8 500 -1px + **Geist** UI, body **12/19.2** (both open, real faces) · Radius: **4px** dominant · Blur scale 0.5/3/8/16/64px
- Focus: **none defined** — add `0 0 0 3px rgba(125,240,248,.5)` · Hover: inner gradient layer `opacity 0 → 1` (+ `scale(1.03)` on purple) · Shadows: **coloured** (blue bevel, periwinkle glow)

<cluely_design_language>
High-contrast, confident and more literary than its category — and genuinely
DUAL-THEME rather than dark-only: the body canvas is #ffffff and the site ships 33
prefers-color-scheme dark blocks, with the dark hero being a section rather than
the theme. The ladder is cool blue-grey throughout (#1c1d22, #22242a, #2e3038,
#263043 dark; #edeef2, #e3e3e7, #e2e3e9, #dde2ee light; #b2b3ba faint), with
rgba(255,255,255,.333) as the dominant translucent fill and nothing warm anywhere;
an electric cyan #7df0f8 and a coral #ff6467 are state accents only. Type is a
two-voice split with a large size gap: EB Garamond, a book serif, at 80/76.8
weight 500 and -1px tracking so line-height sits below font size, against Geist
running deliberately SMALL for everything functional — 28/35 sub-heads down to
12/19.2 body. Both faces are open, so use the real ones. Radii are tight at 4px
dominant. The signature construction is the button family — named blue, black and
purple gradient buttons, each holding an INNER GRADIENT LAYER at opacity 0 that
fades to 1 on hover so the fill deepens without a colour swap, with purple also
scaling to 1.03 — and shadows are richly COLOURED rather than neutral: a
rgb(12,68,161)/rgb(2,44,112) blue bevel ring and a rgba(148,172,243,.4) 20px 20px
24px periwinkle offset glow. Backgrounds are layered multi-radial compositions
with fractional sizing and off-centre origins, under a graded blur scale of 0.5,
3, 8, 16 and 64px. Motion is 0.15-0.2s cubic-bezier(.4,0,.2,1) with a staggered
hero-word-rise entrance. Feels: high-contrast, confident, glossy, literary. Avoid:
assuming dark-only, scaling body type up, swapping button fills on hover instead
of fading the layer, neutral drop shadows, shipping without a focus ring.
</cluely_design_language>