Cluely. A premium product emerging from atmospheric gradient into crisp white workspace.
- AI
- Light theme
- 17 colors
- 3 typefaces
Cluely presents an atmospheric SaaS aesthetic anchored by a dramatic sky-to-mountain blue gradient hero that sets a premium, almost cinematic tone. The signature move is the pairing of a large editorial serif display headline (EB Garamond at 80px) with a precise modern sans-serif (Geist) for everything functional — this serif-meets-tech contrast is the visual identity. A single vivid blue accent (#3c83f6) powers the primary CTA, while the rest of the interface stays achromatic with soft cool-gray neutrals. Components lean compact and lightweight: 4px-radius buttons, 12-24px-radius cards, hairline borders in #e4e4e7, and no decorative shadows. The product screenshots are presented as floating, slightly tilted laptop frames — the app is the hero, not abstractions.
Cluely design system
Brand4
Blue action color for filled buttons, selected navigation states, and focused conversion moments.
Gradient terminal stop, button shadow depth — dark indigo that anchors the primary blue toward night
Supporting palette color for small decorative accents when the core palette needs contrast. Do not promote it to the primary CTA color
Blue supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Accent2
Green outline accent for tags, dividers, and focused UI edges
Subtle highlight wash, code-block tints, decorative gradient stop — cool cyan as atmospheric detail
Neutrals11
Maximum-emphasis text, logo wordmark, icon fills — true black for highest hierarchy
Primary body and heading text — near-black with slight warmth, softer than pure black for long reading
Navigation text, icon strokes, secondary headings — dark cool gray for nav and structural elements
Muted body text, helper text — medium gray for supporting copy
Tertiary text, captions, disabled states — lighter gray for de-emphasized content
Icon strokes (most frequent use at 56 stroke instances), placeholder icons, secondary strokes — the workhorse cool-gray for line work
Secondary borders, separator lines — slightly darker than Bone for tiered dividers
Hairline borders (2500+ instances), dividers, input borders, icon borders — the dominant structural line color
Card surface tint, body background alternates, subtle elevation base — cool off-white for layered surfaces
Tinted card background, hero-adjacent surfaces — barely-blue white that whispers atmospheric color
Primary card surface, page background, button text — pure white for max-brightness layers
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Ink Black on Signal Blue
5.77 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictFails AAA 7
