# ClickUp

> `clickup@1.0.0`

ClickUp is a work-management platform positioned as "one app to replace them all" — tasks, docs, chat, goals, whiteboards, and more in a single surface. The brand voice is bold, enthusiastic, and ambitious. Visually, the identity is carried by the gradient-tipped ClickUp Purple mark (#7B68EE) on a clean white canvas with near-black body text on marketing surfaces.


**Tags:** `saas`, `productivity`, `clickup`, `work-management`

## Atoms

### Palette

**ClickUp** · `clickup@1.0.0` · Proprietary — All Rights Reserved

> ClickUp's brand palette, anchored on ClickUp Purple (#7B68EE) — the signature medium-slate purple that carries the wordmark and the gradient-tipped "CU" mark. The institutional voice pairs that purple with a clean white canvas and near-black body text on marketing surfaces. ClickUp's "one app to replace them all" positioning is reinforced by a single committed brand hue. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `clickup-purple` | ClickUp Purple | `#7B68EE` |
| `clickup-white` | ClickUp White | `#FFFFFF` |
| `clickup-black` | ClickUp Black | `#000000` |
| `clickup-canvas-dark` | ClickUp Canvas Dark | `#1B1A2E` |
| `clickup-surface-light` | ClickUp Surface Light | `#F6F5FB` |
| `clickup-surface-dark` | ClickUp Surface Dark | `#2A2A40` |
| `clickup-text-secondary` | ClickUp Text Secondary | `#6B7280` |
| `clickup-text-tertiary` | ClickUp Text Tertiary | `#9CA3AF` |
| `clickup-purple-hover` | ClickUp Purple Hover | `#9485F2` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `clickup-white` | `#FFFFFF` |
| `surface` | `clickup-surface-light` | `#F6F5FB` |
| `surface-elevated` | `clickup-white` | `#FFFFFF` |
| `text-primary` | `clickup-black` | `#000000` |
| `text-secondary` | `clickup-text-secondary` | `#6B7280` |
| `text-tertiary` | `clickup-text-tertiary` | `#9CA3AF` |
| `primary` | `clickup-purple` | `#7B68EE` |
| `primary-hover` | `clickup-purple-hover` | `#9485F2` |
| `accent` | `clickup-purple` | `#7B68EE` |
| `accent-hover` | `clickup-purple-hover` | `#9485F2` |
| `warning` | `clickup-purple` | `#7B68EE` |
| `warning-hover` | `clickup-purple-hover` | `#9485F2` |
| `error` | `clickup-purple` | `#7B68EE` |
| `success` | `clickup-purple` | `#7B68EE` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `clickup-canvas-dark` | `#1B1A2E` |
| `surface` | `clickup-surface-dark` | `#2A2A40` |
| `surface-elevated` | `clickup-surface-dark` | `#2A2A40` |
| `text-primary` | `clickup-white` | `#FFFFFF` |
| `text-secondary` | `clickup-text-tertiary` | `#9CA3AF` |
| `text-tertiary` | `clickup-text-secondary` | `#6B7280` |
| `primary` | `clickup-purple` | `#7B68EE` |
| `primary-hover` | `clickup-purple-hover` | `#9485F2` |
| `accent` | `clickup-purple` | `#7B68EE` |
| `accent-hover` | `clickup-purple-hover` | `#9485F2` |
| `warning` | `clickup-purple` | `#7B68EE` |
| `warning-hover` | `clickup-purple-hover` | `#9485F2` |
| `error` | `clickup-purple` | `#7B68EE` |
| `success` | `clickup-purple` | `#7B68EE` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `clickup-purple` | `#7B68EE` |
| `on-identity` | `clickup-white` | `#FFFFFF` |
| `primary` | `clickup-purple` | `#7B68EE` |
| `primary-hover` | `clickup-purple-hover` | `#9485F2` |
| `accent` | `clickup-purple` | `#7B68EE` |
| `accent-hover` | `clickup-purple-hover` | `#9485F2` |
| `success` | `clickup-purple` | `#7B68EE` |
| `warning` | `clickup-purple` | `#7B68EE` |
| `error` | `clickup-purple` | `#7B68EE` |
| `background-light` | `clickup-white` | `#FFFFFF` |
| `background-dark` | `clickup-canvas-dark` | `#1B1A2E` |
| `surface-light` | `clickup-surface-light` | `#F6F5FB` |
| `surface-dark` | `clickup-surface-dark` | `#2A2A40` |
| `text-primary-light` | `clickup-black` | `#000000` |
| `text-primary-dark` | `clickup-white` | `#FFFFFF` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `code` | `mono` |

## Rules

### 🛑 error (6)

#### `colorChoice` → `logo.mark`

- **allowed:** clickup-purple, clickup-white, clickup-black
- **forbidden:** any-non-brand-color

> The ClickUp wordmark renders in ClickUp Purple on light surfaces and in white on dark surfaces. Recoloring the wordmark into off-brand hues violates ClickUp's brand-use guidance. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, on-busy-photo

> ClickUp's press resources prohibit stretching, rotating, recoloring, or applying decorative effects to the wordmark. 

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> WCAG 2.1 Level AA contrast minimum for body text. ClickUp Black (#000000) on ClickUp White (#FFFFFF) clears AA at 21:1. 

#### `variantSelection` → `logo`

- **use:** `logo-light`
- **when:** `backgroundColorScheme="dark"`

> On dark surfaces, use ClickUp's documented light-fill wordmark variant; do not invert the purple wordmark on the fly. 

#### `contextRestriction` → `roles.colors.identity`

- **forbiddenContexts:** product-of-competitor, merchandise, endorsement-implication, company-name-or-domain

> ClickUp's trademark guidance forbids use of the ClickUp name and mark in third-party company names, domains, and uses that imply affiliation or endorsement. 

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AA`
- **criterion:** `1.4.3`

> WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. ClickUp-skinned surfaces must clear AA on body text. 

### ⚠️ warning (1)

#### `enumMembership` → `typography.heading.fontWeight`

- **allowed:** 500, 600, 700

> ClickUp's marketing surfaces render headings in the 500–700 band; lighter weights undermine the confident voice of the brand. 

### 💡 recommendation (1)

#### `compositionConstraint` → `roles.colors.identity`

- **pairsWith:** clickup-white, clickup-black, clickup-surface-light

> ClickUp Purple is calibrated to read on white and near-black. Pairing it with another saturated hue at the same weight breaks the focused, ambitious voice of the brand surface. 

## Provenance

- **Source:** <https://clickup.com/press>
- **License:** `Proprietary — All Rights Reserved`
- **Attribution:** ClickUp and the ClickUp logo are trademarks of Mango Technologies, Inc. (d/b/a ClickUp). The primary brand color ClickUp Purple (#7B68EE) is documented on ClickUp's press resources. brand-atoms catalogues only the publicly documented signature color and authored neutrals; licensed application of the ClickUp name and mark is governed by ClickUp's brand-use guidance at clickup.com/press. 
- **Imported:** `2026-05-18`
- **Notes:** ClickUp's marketing pages render in a neutral humanist sans consistent with Inter; Inter is referenced here as the primary face and is already in the brand-atoms catalog. The mark also uses pink and yellow gradient stops on marketing surfaces, but those specific hex stops are not catalogued at the brand-atoms palette level to avoid fabrication. 

---

*Generated by the brand-atoms converter. Source: `clickup@1.0.0` from the encyclopedia.*