ClickUp design system

What font does ClickUp use?

ClickUp’s website uses Plus Jakarta Sans for headings and Inter for body text. Plus Jakarta Sans is free on Google Fonts; Inter is free on Google Fonts.

ClickUp colour palette

ClickUp’s home page is light (#FFFFFF background, #292D34 text) and uses #202020 for its main actions. Its palette: #FFFFFF, #000000, #F8F9FA, #E8E8E8, #000002, #202020.

• #FFFFFF
  72.3% · backgrounds
• #000000
  14% · backgrounds
• #F8F9FA
  4.1% · backgrounds
• #E8E8E8
  2.5% · backgrounds
• #000002
  2.1% · backgrounds
• #202020
  0.9% · backgrounds, text
• #090C1D
  0.6% · text
• #838383
  0.6% · text
• #646464
  0.5% · text
• #292D34
  0.4% · text

Type scale

Each size the page sets text in, with its weight and line height. ClickUp’s largest type is 80px at weight 700.

Spacing and shape

Spacing sits on a 4px grid: 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 36px, 40px, 44px, 48px.

Corner radii: 1px, 2px, 3px, 4px, 5px, 6px, 7px, pill. 24 shadow levels measured.

What makes ClickUp look like ClickUp

Almost entirely neutral: 99% of the page is painted in #FFFFFF and #000000.

#7612FA is an accent: 0.1% of the page, as small fills such as buttons and badges. Keep it to small areas.

#6EE7B7 is an accent: under 0.1% of the page, used for text only. Don't fill large areas with it.

The largest type (80px Plus Jakarta Sans) is bold (700), tracked to -0.04em.

ClickUp DESIGN.md for Claude Code, Cursor and Lovable

A DESIGN.md is the brief an AI coding tool reads before it writes UI. This one carries everything on this page as rules a model follows: the allowed colours and what each is for, the fonts with free stand-ins, the type scale, spacing, corners, and the things ClickUp’s design never does.

Put it in your project root and ask your tool to follow it: “Read DESIGN.md and build [your product] in this design language.” It describes a style, not ClickUp’s product, so use your own name, words and images.

Download ClickUp DESIGN.md · View it as text

As CSS variables

The measured values as CSS custom properties, with free fonts standing in for licensed ones. Use them to learn from or to start a project in a similar style; ClickUp’s name, logo, words and images are theirs.

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;650;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sometype+Mono:wght@400;500&display=swap");

:root {
  --color-background: #FFFFFF; /* Background */
  --color-surface: #F0F0F0; /* Surface */
  --color-text: #292D34; /* Text */
  --color-text-muted: #646464; /* Text muted */
  --color-border: #E8E8E8; /* Border */
  --color-action: #202020; /* Action */
  --color-on-action: #FFFFFF; /* On action */
  --color-positive: #00C07A; /* Positive */
  --color-negative: #E5484D; /* Negative */
  --color-warning: #FC6D2D; /* Warning */
  --color-000000: #000000; /* 14% of the page, as fills */
  --color-f8f9fa: #F8F9FA; /* 4.1% of the page, as fills */
  --color-000002: #000002; /* 2.1% of the page, as fills */
  --font-body: "Inter", sans-serif; /* Inter */
  --font-display: "Plus Jakarta Sans", sans-serif; /* Plus Jakarta Sans */
  --font-interface: "SF Pro Text", "Inter", sans-serif; /* SF Pro Text on the site; Inter renders */
  --font-code: "Sometype Mono", monospace; /* Sometype Mono */
  --type-display-1: 80px; /* Display 1, weight 700 */
  --type-display-1-leading: 96px;
  --type-display-1-tracking: -0.04em;
  --type-display-2: 76px; /* Display 2, weight 700 */
  --type-display-2-leading: 79.8px;
  --type-display-2-tracking: -0.04em;
  --type-display-3: 60px; /* Display 3, weight 700 */
  --type-display-3-leading: 66px;
  --type-display-3-tracking: -0.035em;
  --type-display-4: 56px; /* Display 4, weight 700 */
  --type-display-4-leading: 64.4px;
  --type-display-4-tracking: -0.04em;
  --type-display-5: 48px; /* Display 5, weight 650 */
  --type-display-5-leading: 60px;
  --type-display-5-tracking: -0.035em;
  --type-display-6: 44px; /* Display 6, weight 650 */
  --type-display-6-leading: 48.4px;
  --type-display-6-tracking: -0.04em;
  --type-display-7: 40px; /* Display 7, weight 650 */
  --type-display-7-leading: 48px;
  --type-display-7-tracking: -0.04em;
  --type-headline-large: 34px; /* Headline Large, weight 650 */
  --type-headline-large-leading: 40.8px;
  --type-headline-large-tracking: -0.04em;
  --type-headline-medium: 26px; /* Headline Medium, weight 650 */
  --type-headline-medium-leading: 32.5px;
  --type-headline-medium-tracking: -0.035em;
  --type-headline-small: 24px; /* Headline Small, weight 500 */
  --type-headline-small-leading: 21.6px;
  --type-headline-small-tracking: -0.008em;
  --type-title-1: 22px; /* Title 1, weight 400 */
  --type-title-1-leading: 28px;
  --type-title-1-tracking: -0.023em;
  --type-title-2: 20px; /* Title 2, weight 400 */
  --type-title-2-leading: 30px;
  --type-title-2-tracking: -0.02em;
  --type-title-3: 19px; /* Title 3, weight 500 */
  --type-title-3-leading: 26px;
  --type-title-3-tracking: -0.019em;
  --type-title-4: 18px; /* Title 4, weight 500 */
  --type-title-4-leading: 24px;
  --type-title-4-tracking: -0.02em;

How this was measured

PikSpec’s scanner read the clickup.com home page in Chrome at 1440px wide on 15 October 2026: the computed styles of its elements, the fonts that rendered and how much of the page each colour covers. Websites change; capture the page yourself with PikSpec for today’s values, any page, and exports in five formats.

ClickUp is a trademark of its owner. This page is an independent measurement and is not affiliated with or endorsed by ClickUp.

Similar light designs: Airbnb · Airtable · Allbirds · Anthropic · Apple · Arc

Contact PikSpec

Email support@pikspec.com for support, privacy requests or content reports.