<!-- Generated by ExtractVibe — https://extractvibe.com/brand/cluely.com -->
<!-- Extracted: 2026-11-07T11:19:31.764Z | Schema: v1 | Quality: 90/100 -->
---
version: alpha
name: "Cluely"
description: "Cluely projects a sophisticated yet approachable vibe, blending the seriousness of a productivity tool with a subtle sense of modern elegance. It feels like a discreet, intelligent assistant that prioritizes clarity and efficiency without being overtly flashy."
colors:
  primary: "#18171c"
  tertiary: "#040406"
  surface: "#ffffff"
  on-surface: "#040406"
  border: "#d3d9e9"
typography:
  display-lg:
    fontFamily: "EB Garamond"
    fontSize: "80px"
    fontWeight: "500"
    lineHeight: "76.8px"
    letterSpacing: "-1px"
  headline-lg:
    fontFamily: "Geist"
    fontSize: "19px"
    fontWeight: "500"
    lineHeight: "26.6px"
    letterSpacing: "-0.38px"
  headline-md:
    fontFamily: "Geist"
    fontSize: "28px"
    fontWeight: "500"
    lineHeight: "35px"
    letterSpacing: "-0.5px"
  body-md:
    fontFamily: "Geist"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
rounded:
  sm: "3px"
  md: "8px"
  lg: "12px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#000000"
    rounded: "8px"
    padding: "7px 9px"
    fontSize: "16px"
    fontWeight: "400"
    borderColor: "#e2e3e9"
    borderWidth: "1px"
  button-outline:
    textColor: "#ffffff"
    rounded: "3px"
    padding: "8px 20px"
    fontSize: "12px"
    fontWeight: "500"
    borderWidth: "1px"
---

# Cluely — Design System

## Overview

Cluely embodies the archetype of The Sage, an intelligent and discreet assistant that prioritizes clarity and efficiency. Our design system reflects this through a sophisticated yet approachable aesthetic, drawing inspiration from brands like Notion, Superhuman, Linear, and Dropbox. The emotional register is one of quiet competence and modern elegance. Users should perceive Cluely as an indispensable tool that seamlessly integrates into their workflow, enhancing productivity without demanding overt attention. The design is engineered to be 'undetectable' in its brilliance, allowing the user's content and tasks to remain the focal point.

This system is not about flashy animations, vibrant gradients, or overly playful elements. We deliberately avoid anything that could be perceived as distracting, juvenile, or overly decorative. Cluely's visual language is grounded in professionalism and utility, ensuring that every design choice serves a functional purpose while subtly reinforcing our brand values of intelligence and efficiency. The aim is to create an environment that feels inherently capable and trustworthy, a digital space where complex tasks become manageable through thoughtful, understated design.

**Key characteristics:**

- Vibe — undetectable, efficient, professional, modern, subtle, intelligent
- Archetypes — The Sage, The Magician
- Comparable to — Notion, Superhuman, Linear, Dropbox
- Design era — contemporary-minimal
- Emotional tone — trustworthy-efficient
- Target audience — Professionals and teams seeking a discreet, powerful AI assistant for meetings, who value clean design and seamless integration over playful or overly casual interfaces.
- Visual energy — 4/10 (moderate)

## Colors

Cluely's color philosophy centers on understated sophistication and clarity. The primary color, `#18171c`, establishes a deep, professional foundation, evoking a sense of calm authority and focus. This near-black hue provides a strong anchor for content without being overtly harsh. The `#ffffff` surface color ensures maximum readability and a clean, expansive canvas, reinforcing the brand's commitment to efficiency and clarity. This minimalist palette is designed to be subtle and 'undetectable,' allowing the interface to recede and the user's work to take precedence.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#18171c` | Near-Black |
| accent / tertiary | `#040406` | Black |
| background | `#ffffff` | White |
| text | `#040406` | Black |
| border | `#d3d9e9` | Gainsboro |

## Typography

The Cluely type system is built for precision and elegance. Geist and Aeonik serve as the primary sans-serifs, providing modern, highly legible interfaces for functional text and data. EB Garamond introduces a touch of classic sophistication for specific content elements, balancing the contemporary feel with timeless readability. This dual-font strategy ensures a clear hierarchy and distinct voice, communicating both cutting-edge efficiency and intellectual depth. The typography is designed to be effortlessly readable, supporting the brand's commitment to clarity and professional communication.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Geist | body | self-hosted | 400, 500 |
| EB Garamond | heading | self-hosted | 500 |
| Geist | heading | self-hosted | 500 |
| Aeonik | body | self-hosted | 500 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | EB Garamond | 80px | 500 | 76.8px | -1px |
| Heading 2 | Geist | 19px | 500 | 26.6px | -0.38px |
| Heading 3 | Geist | 28px | 500 | 35px | -0.5px |
| Body | Geist | 16px | 400 | 24px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 24px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(175, 179, 196) 0px 0.7px 0px 0px inset` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.5) 2.093px 1.951px 9.012px 0px inset, rgba(255, 255, 255, 0.5) 1.111px 1.035px 4.506px 0px inset` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.21) -1px 0px 8px 0px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.15) 0px 4px 10px 0px` |
| element | `rgba(0, 0, 0, 0.2) 0px 2px 4.2px 0px, rgba(0, 0, 0, 0.2) 0px 13.025px 26.05px 0px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 15px 15px 0px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.999994 0.0000455678 0.0000200868 / 0.5) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset` |

### Gradients

- `radial-gradient(87.76% 87.72% at 50% 9.2%, rgba(255, 255, 255, 0) 41.36%, rgb(255, 255, 255) 71.93%), image-set(url("https://cluely.com/images/pages/home/background.png") 1dppx, url("https://cluely.com/images/pages/home/background@2x.png") 2dppx, url("https://cluely.com/images/pages/home/background@4x.png") 4dppx)`
- `linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%)`
- `radial-gradient(101.79% 101.79% at 65.61% 81.79%, rgba(255, 255, 255, 0.6) 0px, rgba(255, 255, 255, 0) 100%), radial-gradient(114.65% 114.65% at 9.73% 17.27%, rgb(30, 130, 224) 0px, rgb(28, 56, 234) 100%)`
- `linear-gradient(rgb(46, 48, 57), rgb(39, 42, 49))`
- `linear-gradient(oklab(0 0 0 / 0.1) 0px, oklab(0 0 0 / 0.15) 100%)`
- `linear-gradient(to right in oklab, rgb(25, 25, 29) 0px, rgb(98, 98, 117) 100%)`
- `linear-gradient(354deg, rgba(255, 255, 255, 0.02) 7.62%, rgba(255, 255, 255, 0.01) 89.04%)`
- `linear-gradient(rgba(255, 255, 255, 0.7), rgb(249, 250, 251))`

## Shapes

Border-radius scale:

- `sm` — 3px
- `md` — 8px
- `lg` — 12px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Secondary**

- Background — `#ffffff`
- Text — `#000000`
- Radius — `8px`
- Padding — `7px 9px`
- Font size — `16px`
- Font weight — `400`
- Border — `1px solid #e2e3e9`
- Sample copy — "command"

**Outline**

- Text — `#ffffff`
- Radius — `3px`
- Padding — `8px 20px`
- Font size — `12px`
- Font weight — `500`
- Sample copy — "Accept all cookies"

## Do's and Don'ts

### Do

- Utilize Geist (400, 500 weights) and Aeonik (500 weight) for body text, ensuring a line-height of 24px for readability.
- Employ EB Garamond (500 weight) or Geist (500 weight) for headings, always in sentence-case.
- Maintain a monochrome color palette, primarily using #18171c (primary), #040406 (accent/text), and #ffffff (background).
- Apply subtle, multi-layer shadows (e.g., rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0)) to create depth, avoiding harsh or single-layer shadows.
- Incorporate radial and linear gradients (e.g., radial-gradient(87.76% 87.72% at 50% 9.2%, rgba(255, 255, 255, 0) 41.36%, rgb(25)) or linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%)) to add subtle visual interest and depth.
- Design secondary buttons with a #ffffff background, #000000 text, 8px border-radius, #e2e3e9 border, and 7px 9px padding.
- Design outline buttons with #ffffff text, 3px border-radius, and 8px 20px padding, ensuring no background color.
- Maintain consistent spacing using a 2px base unit, with border radii of 3px (small), 8px (medium), and 12px (large).

### Don't

- Avoid using emojis in any marketing or product copy.
- Do not use exclamations frequently; reserve them for rare, impactful moments.
- Refrain from using overly playful or casual language; maintain a serious and matter-of-fact tone.
- Do not use title case for headings; all headings should be in sentence-case.
- Avoid bright or vibrant colors outside of the established monochrome palette.
- Do not use sharp, angular corners; always apply border radii of 3px, 8px, or 12px.
- Do not use heavy, opaque shadows; stick to subtle, multi-layered shadow effects.
- Avoid overly technical jargon unless specifically targeting a highly technical audience; aim for accessible language with some moderate vocabulary.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 5/10 | balanced |
| Playful ↔ Serious | 8/10 | serious |
| Enthusiastic ↔ Matter-of-fact | 7/10 | matter-of-fact |
| Respectful ↔ Irreverent | 6/10 | balanced |
| Technical ↔ Accessible | 6/10 | balanced |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct, action-oriented commands, some benefit-focused
- Rhetorical devices — repetition

### Sample copy

> Undetectable AI notetaker and meeting assistant with live notes and instant answers during calls. Unlike Otter or Granola, Cluely helps you during meetings, not just after.

> Cluely takes perfect meeting notes and gives real-time answers, all while completely undetectable

> How Cluely helps during a meeting

> Why real-time vs. a regular AI notetaker?

> Undetectable in every way

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/cluely.com) | 100% |
| favicon | — | png | [link](brands/cluely.com/logo-0.png) | 95% |
| favicon | — | png | [link](brands/cluely.com/logo-1.png) | 95% |
| favicon | — | png | [link](brands/cluely.com/logo-2.png) | 95% |
| favicon | — | png | [link](brands/cluely.com/logo-3.png) | 95% |
| favicon | — | png | [link](brands/cluely.com/logo-4.png) | 95% |
| favicon | — | png | [link](brands/cluely.com/logo-5.png) | 95% |
| favicon | — | png | [link](brands/cluely.com/logo-6.png) | 95% |
| favicon | — | png | [link](brands/cluely.com/logo-7.png) | 95% |
| favicon | — | png | [link](brands/cluely.com/logo-8.png) | 95% |
| favicon | — | png | [link](brands/cluely.com/logo-9.png) | 95% |
| favicon | — | png | [link](brands/cluely.com/logo-10.png) | 95% |

## Sources

- Live brand page — https://extractvibe.com/brand/cluely.com
- Raw JSON — https://extractvibe.com/api/brand/cluely.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/cluely.com/design.md
- Extracted — 2026-11-07T11:19:31.764Z
- Generator — ExtractVibe vv1
- Quality score — 90/100