High-contrast and confident, but not the dark site the category suggests — the PAGE is white and the darkness arrives as inset #1c1d22 sections, so the contrast is structural rather than a global theme. It is the first genuine dual-theme system in this library, shipping thirty-three prefers-color-scheme dark blocks. Type runs the widest display-to-body ratio captured here: EB Garamond at 80/76.8 weight 500 with -1px tracking against a Geist body of just 12/19.2, so the serif headline does all the shouting and the interface stays quiet and small. Buttons are a NAMED gradient family — blue, black and purple — sharing one hover mechanic worth stealing: each holds an inner gradient layer at opacity 0 that fades to 1, so the fill deepens without a colour swap, and purple additionally scales to 1.03. Shadows are richly coloured rather than neutral: a rgb(12,68,161) 0 0 0 0.5px blue bevel ring and a rgba(148,172,243,.4) 20px 20px 24px periwinkle glow thrown down-right, over a genuinely graded blur scale of 0.5/3/8/16/64px on translucent rgba(255,255,255,.333) panels. Radii stay tight at 4px dominant, and cyan #7df0f8, coral #ff6467 and green #00ff26 appear only as state accents. Motion is 0.15–0.2s cubic-bezier(.4,0,.2,1) with a staggered 0.55s hero-word-rise entrance and one reduced-motion block. Anti-pattern to fix when borrowing: the brand chrome defines NO focus ring at all — the only focus rules on the page belong to Sonner toasts.
Browse Cluely in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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 theswipe-out-*/sonner-fade-inkeyframes 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 33prefers-color-scheme: darkblocks, 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.
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.
| 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.
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 |
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.