---
title: "ClickUp design system"
variant: extended
source: https://clickup.com/
captured_at: 2026-10-12
theme: light
industry: productivity
generator: Design DNA (https://four.wiralomi.com/style/clickup-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# ClickUp · Design System

> A clear workspace, energized by AI

**Theme:** light · **Industry:** productivity · **Source:** https://clickup.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

ClickUp’s homepage pairs a clean, white SaaS canvas with confident typography and detailed product UI. Carefully contained dark sections and vivid gradients spotlight AI features without overwhelming the practical, product-first presentation.

## North star

Keep the page calm and product-led with a white canvas, bold readable type, and vivid color reserved for meaningful AI moments.

## Overview

The page is led by a bright white canvas, with dark ink headlines, muted gray supporting copy, and restrained blue and violet accents. Black primary buttons provide a decisive counterpoint to the light background. Most sections retain the same white ground, letting shifts in content and generous whitespace establish rhythm; a large black Brain² feature block and a colorful closing CTA create stronger visual punctuation. Plus Jakarta Sans gives display headlines their compact, rounded authority, while Inter handles navigation and body copy with practical clarity. Product screenshots and interface mosaics are prominent, framed like evidence of the software rather than decorative stock imagery. Colorful 3D-style AI artwork and gradients add expressive moments, especially around agent and closing sections. The overall layout is centered and comfortably constrained, combining broad headline areas with dense product grids, split feature panels, and modular proof points. Borders and subtle shadows separate interface layers without making the marketing page feel heavy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Workspace White | `#ffffff` | `--color-workspace-white` | surface | Primary page canvas, light content sections, and text on dark panels. |
| Action Blue | `#0091ff` | `--color-action-blue` | accent | Interface highlights, links, and blue portions of AI feature gradients. |
| Brain Black | `#000000` | `--color-brain-black` | surface | Brain² feature-section background, dark product cards, and selected interface rails. |
| Divider Gray | `#e8e8e8` | `--color-divider-gray` | neutral | Fine borders and separators around interface panels and cards. |
| Badge Blue | `#1d4ed8` | `--color-badge-blue` | semantic | Blue text within product-interface badges; not a primary page-wide brand color. |
| Badge Teal | `#067a6f` | `--color-badge-teal` | semantic | Teal text within backend-style interface badges; appears in product UI. |
| Quiet Gray | `#b4b4b4` | `--color-quiet-gray` | neutral | Low-emphasis interface labels, disabled-like text, and secondary borders. |
| Muted Copy | `#838383` | `--color-muted-copy` | neutral | Secondary copy and subdued links against the white canvas. |
| Slate Copy | `#646464` | `--color-slate-copy` | neutral | Body text and navigation copy on light sections. |
| Panel Charcoal | `#2a2a2a` | `--color-panel-charcoal` | surface | Dark card surfaces and subtle outlines inside the Brain² feature area. |
| Ink Button | `#202020` | `--color-ink-button` | brand | Primary CTA fill, main text, and selected button surfaces. |
| Mist Panel | `#f8f9fa` | `--color-mist-panel` | surface | Soft card and product-panel backgrounds within otherwise white sections. |
| Section Gray | `#bcbcbc` | `--color-section-gray` | surface | Measured neutral section surface; use sparingly where a muted band is needed. |
| Badge Violet | `#7a3fb0` | `--color-badge-violet` | semantic | Small badge accent within interface or illustration details, not a dominant brand field. |
| Badge Rose | `#cb1d63` | `--color-badge-rose` | semantic | Minor product-interface badge color; reserve for illustrative UI details. |
| Badge Umber | `#99543a` | `--color-badge-umber` | semantic | Minor badge color inside product UI and mockups. |
| ClickUp Violet | `#6647f0` | `--color-clickup-violet` | accent | AI feature accents, violet typography, and luminous gradient details. |
| Signal Mint | `#6ee7b7` | `--color-signal-mint` | accent | Small green interface highlights and accent text within product demonstrations. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Workspace White) · `--color-surface` → `#000000` (Brain Black) · `--color-surface-2` → `#e8e8e8` (Divider Gray) · `--color-surface-3` → `#2a2a2a` (Panel Charcoal) · `--color-surface-4` → `#bcbcbc` (Section Gray) · `--color-text` → `#646464` (Slate Copy) · `--color-text-muted` → `#ffffff` (Workspace White) · `--color-text-subtle` → `#838383` (Muted Copy) · `--color-border` → `#e8e8e8` (Divider Gray) · `--color-accent` → `#0091ff` (Action Blue) · `--color-accent-2` → `#6ee7b7` (Signal Mint) · `--color-accent-3` → `#6647f0` (ClickUp Violet)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#646464` | `#ffffff` | 5.92:1 | AA |
| `#646464` | `#000000` | 3.55:1 | AA-large |
| `#646464` | `#e8e8e8` | 4.83:1 | AA |
| `#646464` | `#2a2a2a` | 2.43:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#e8e8e8` | 1.23:1 | fail |
| `#ffffff` | `#2a2a2a` | 14.35:1 | AAA |
| `#838383` | `#ffffff` | 3.79:1 | AA-large |
| `#838383` | `#000000` | 5.54:1 | AA |
| `#838383` | `#e8e8e8` | 3.09:1 | AA-large |

### Gradients

- `radial-gradient(132% 74% at 96% 1%, rgb(252, 109, 45) 23%, rgb(247, 54, 153) 57%, rgb(102, 71, 240) 95%, rgb(11, 136, 253) 115%)`
- `linear-gradient(rgba(246, 233, 232, 0), rgba(255, 91, 54, 0.23))`
- `conic-gradient(rgb(0, 145, 255), rgb(255, 2, 240), rgb(247, 104, 8), rgb(102, 71, 240), rgb(0, 145, 255) 360deg)`
- `conic-gradient(rgb(252, 109, 123) 0deg, rgb(253, 154, 70) 7deg, rgb(246, 135, 198) 16deg, rgba(79, 185, 250, 0) 36deg, rgba(0, 0, 0, 0) 324deg, rgba(0, 145, 255, 0) 330deg, rgb(0, 145, 255) 340deg, rgb(250, 36, 206) 352d`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 500, 400, 600, 700, 650 | Navigation, body copy, and practical interface text. | Inter |
| Plus Jakarta Sans | `--font-display` | webfont | 500, 650, 700, 400, 600 | Display headlines, major headings, and prominent product-feature labels. | Plus Jakarta Sans |
| SF Pro | `--font-sf-pro` | system | 500, 590 | Captions and small supporting labels. | Inter |
| Sometype Mono | `--font-mono` | webfont | 500, 400 | Code-like snippets and technical labels in AI interface content. | IBM Plex Mono |
| SF Pro Text | `--font-sf-pro-text` | system | 450, 600, 500, 400, 700 | Small UI badges and interface text. | Inter |

- **Inter:** Use medium weights for compact copy; keep sentence case and slightly tight tracking.
- **Plus Jakarta Sans:** Heavy display weights, rounded forms, tight negative tracking; headline case remains natural.
- **SF Pro:** Compact, medium-weight captions with neutral tracking.
- **Sometype Mono:** Use monospace sparingly for compact technical text; regular weight.
- **SF Pro Text:** Small, legible interface labels in regular or medium weights.

### Type scale — Perfect Fourth (ratio ≈ 1.338, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 700 | 1.1 | -0.035em | — | Plus Jakarta Sans | Oversized homepage hero and campaign headlines. |
| h1 | 48px | 650 | 1.25 | -0.035em | — | Plus Jakarta Sans | Primary section headlines and high-priority feature statements. |
| h2 | 40px | 650 | 1.2 | -0.04em | — | Plus Jakarta Sans | Secondary section headings and product-story titles. |
| h3 | 22px | 400 | 1.27 | -0.023em | — | Inter | Feature and content-card headings. |
| h4 | 20px | 400 | 1.5 | -0.02em | — | Inter | Compact subheadings and explanatory panel titles. |
| body | 14px | 500 | 1.43 | -0.011em | — | Inter | Descriptions, supporting marketing copy, and interface-adjacent text. |
| caption | 12px | 500 | 1.5 | 0 | — | SF Pro | Small metadata, footnotes, and quiet labels. |
| nav | 14px | 500 | 1.43 | -0.011em | — | Inter | Top-level navigation and menu labels. |
| link | 12px | 500 | 1.5 | 0 | — | Inter | Compact contextual links and supporting actions. |
| code | 10px | 400 | 2 | 0 | — | Sometype Mono | Code-like AI examples and technical UI snippets. |

OpenType features in use: `"calt" 0`, `"calt" 0, "clig" 0, "liga" 0`.

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 5, 6, 8, 10, 12, 20, 24 px.
- Section rhythm 80px · element gap 8px · card padding — · max content width 1080px.

Use a centered content frame with a measured maximum width of 1080px, but allow selected product imagery and feature bands to spread wider. The page alternates spacious single-column statements with two-column product or agent presentations, dense interface grids, and modular metrics. Keep headlines mostly left-aligned in hero and proof sections; center major campaign and product-story blocks. The measured section rhythm is generous, with comfortable internal gaps and clear separation between major content groups.

## Shape & elevation

- Radius: button `8px` · card `12px` · media `50%` · badge `6px` · nav `8px` · link `12px` · xs `1px` · sm `3px` · md `4px` · lg `6px` · xl `8px` · 2xl `12px` · pill `9999px`
- Shadow `sm` (other): `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`
- Shadow `md` (card): `rgba(18, 43, 165, 0.04) 0px 1px 1px -0.5px, rgba(18, 43, 165, 0.04) 0px 3px 3px -1.5px, rgba(18, 43, 165, 0.04) 0px 6px 6px -3px, rgba(18, 43, 165, 0.04) 0px 12px 12px -6px`
- Shadow `hairline` (other, card): `rgba(0, 0, 0, 0.08) 0px 1px 2px 0px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0.17) -34px -13px 37px 0px, rgba(0, 0, 0, 0.2) -9px -3px 20px 0px`
- Shadow `inset` (other): `rgba(226, 232, 255, 0.12) 0px -22.5px 67.4px -19.3px inset`
- Shadow `lg` (card): `rgba(0, 0, 0, 0.15) 0px 12px 48px 0px`
- Motion: standard transition `0.25s cubic-bezier(0.5, 0, 0.5, 1)` on interactive elements.

Keep most sections flat on white, using fine gray borders to define product panels and card divisions. Apply subtle shadows to floating UI elements and selected cards, rather than raising every component. Layer product screenshots, small assistant callouts, and dark AI panels with clear contrast; reserve stronger glow and inset effects for the Brain² showcase.

## Imagery

Use authentic-looking product screenshots as the main visual proof: crisp application UI, task lists, dashboards, and device views. Arrange interface imagery in structured mosaics or broad panels, with restrained framing and subtle separation. Colorful AI artwork can add expressive contrast in agent sections; gradients belong to specific campaign moments, not every background. Use customer photos and awards as compact social-proof content.

## Components

### Primary CTA

Dark #202020 button with white text and an 8px radius; use for get-started and other primary actions.

### Secondary login button

Light gray #f0f0f0 fill, dark text, compact padding, and an 8px radius.

### Top navigation

Compact text-led navigation on white, with dark labels and small dropdown indicators; actions sit at the right.

### Product showcase

Large application UI panel with a narrow navigation rail, task content, and restrained borders.

### Brain² feature panel

Black section with white headings, dark modular cards, fine outlines, and blue-violet light effects.

### Badge

Small interface label with a 6px radius; use measured blue or teal badge colors sparingly.

### Gradient CTA

Closing campaign block with a vivid pink-orange-blue-violet background, centered message, and embedded product imagery.

### Measured component styles

- **Primary button** (“Dependencies”): background #ffffff · text #292d34 · border 1px solid · radius 0px · padding 0px · 700 14px Plus Jakarta Sans
- **Secondary button** (“Login”): background #f0f0f0 · text #000000 · radius 8px · padding 8px 12px · 600 14px Inter
- **Link** (“Projects”): background #ffffff · text #7b68ee · radius 0px · padding 0px 0px 30px 0px · 400 16px Plus Jakarta Sans
- **Card** (“CONTEXT Brain² sees your tasks, docs, an”): background #000000 · text #292d34 · radius 0px · padding 0px · 400 16px Plus Jakarta Sans
- **Badge** (“Backend”): background #e7f9f5 · text #067a6f · radius 6px · padding 2px 8px · 500 12px SF Pro Text
- **Navigation item** (“Brain AI Product Solutions Learn Pricing”): transparent background · text #292d34 · radius 0px · padding 0px · 400 16px Plus Jakarta Sans

## Do

- Keep the primary canvas white and visually quiet.
- Use Plus Jakarta Sans for display headlines and Inter for supporting copy.
- Make screenshots and real interface details the main product proof.
- Use black primary buttons with clear white labels.
- Reserve gradients for AI moments and the closing campaign panel.
- Create section rhythm through whitespace and alignment shifts.
- Use fine borders to organize dense product UI.

## Don't

- Do not turn every section into a gradient or dark panel.
- Do not replace product screenshots with generic decorative imagery.
- Do not use loud badge colors as page-wide brand colors.
- Do not crowd the hero or competing headline areas.
- Do not add heavy shadows to every card.
- Do not make all section headings center-aligned.
- Do not use multiple competing primary button treatments.

## Agent prompt

Build a new productivity SaaS page in ClickUp’s product-led visual style. Use Workspace White (#ffffff) as the main canvas, Ink Button (#202020) for primary CTAs and text, Slate Copy (#646464) for body and navigation, and Divider Gray (#e8e8e8) for fine panel borders. Set major headlines in Plus Jakarta Sans with compact, bold forms; use Inter for readable supporting copy and UI. Structure content in a centered, comfortable-width frame with spacious white sections, alternating centered campaign statements, split features, product grids, and proof points. Treat realistic application screenshots as the core imagery. Use Brain Black (#000000) sparingly for an AI showcase, with ClickUp Violet (#6647f0) and Action Blue (#0091ff) as restrained highlights. Save vivid gradients for a specific AI campaign or closing CTA, not routine panels.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Large left-aligned headline and copy above a product UI preview. | Free-start CTA, Supporting reassurance | Oversized headline, Dark primary button, Product screenshot |
| 2 | product-showcase | Wide application preview with a sidebar and task workspace. | Task navigation, Search, Create task | Application chrome, List view, Floating AI assistant |
| 3 | feature-split | Centered headline followed by a broad illustrative diagram and three explanatory columns. | Problem framing, Play video prompt | Centered title, Illustrated workflow, Three text columns |
| 4 | product-grid | Centered introduction above a dense multi-column product and feature mosaic. | Browse capabilities, Explore product areas | Feature tiles, Product screenshots, Icon grid |
| 5 | feature-split | Centered feature heading and actions paired with a colorful agent visual. | Build an agent, Learn more | Large headline, Paired actions, 3D-style artwork |
| 6 | product-showcase | Full-width campaign image with a centered embedded action. | Build your own agent | Warm gradient backdrop, Human silhouette, Dark button |
| 7 | feature-grid | Centered title and availability details inside a full-width black section. | Platform availability, Get started | Dark background, Brand mark, Gradient glow |
| 8 | feature-grid | Three side-by-side dark cards within the continuing AI section. | Feature comparison, Scan key benefits | Three-column cards, Fine borders, Embedded UI snippets |
| 9 | feature-grid | Centered headline above a multi-row grid of dark feature cards. | Explore AI capabilities, Review examples | Card grid, Dark panels, Small UI previews |
| 10 | stats | Left-aligned proof headline with a row of four business metrics. | Review ROI, Start free | Metric columns, Compact notes, Primary CTA |
| 11 | logo-cloud | Heading and reassurance copy aligned alongside certification marks. | Build trust, Review standards | Certification logos, Compact labels, White background |
| 12 | cta | Rounded, colorful full-width panel with centered message and product devices below. | Get started free | Multicolor gradient, Centered CTA, Desktop and phone mockups |

## Source CSS custom properties (selected)

```css
--color-button-other-background: 0,0,0,0.15;
--color-shadow: 16,30,54,0.1;
--color-shadow-1: 16,30,54,0.06;
--color-pink-shadow-1: 253,113,175,0.1;
--color-pink-shadow-2: 253,113,175,0.2;
--color-blue-shadow-1: 73,204,249,0.1;
--color-blue-shadow-2: 73,204,249,0.2;
--color-green-shadow-1: 0,184,132,0.1;
--color-green-shadow-2: 0,184,132,0.2;
--color-purple-shadow-1: 123,104,238,0.1;
--color-purple-shadow-2: 123,104,238,0.2;
--color-purple-shadow-4: 123,104,238,0.4;
--color-purple-shadow-5: 123,104,238,0.5;
--color-violet-shadow-1: 155,81,224,0.1;
--color-violet-shadow-2: 155,81,224,0.2;
--color-yellow-shadow-1: 255,200,0,0.1;
--color-yellow-shadow-2: 255,200,0,0.1;
--color-gradient-cyan-accent-light-1: 255,255,255,0.1;
--color-gradient-cyan-accent-lightest-1: linear-gradient(45deg,#45C4F9 -0.01%,#7D09FF 50.33%,#FF0BE5),linear-gradient(180deg,#FFF8FB,rgba(255,248,251,0.00));
--spacing-nav-height: 60px;
--spacing-stack-spacing-desktop: 150px;
--spacing-stack-spacing-mobile: 60px;
--Core-Text-Main: #202020;
--Core-Text-Secondary: #646464;
--Core-Text-Tertiary: #838383;
--Core-Text-Disabled: #bbb;
--Core-Background-Main: #fff;
--Core-Background-Box: #f8f9fa;
--Core-Background-Card: #f8f9fa;
--Core-Button-Primary: #202020;
--Core-Button-Secondary: #f0f0f0;
--Core-Button-Secondary-Hover: #dedede;
--Core-Border-Default: #e8e8e8;
--Core-Accents-Purple: #6647f0;
--Core-Accents-Purple-Badge: #efedfd;
--Core-Accents-Blue: #0091ff;
--Core-Accents-Blue-Badge: #edf6fd;
--Core-Accents-Pink: #ff02f0;
--Core-Accents-Pink-Badge: #feecfc;
--Core-Accents-Orange: #fc6d2d;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/clickup-com