What is ClickUp's primary brand color?

ClickUp's voltage is neon purple at "#7612fa" (426 occurrences as a background) — but it almost never appears as a flat fill. The dominant CTA gradient sweeps 263 degrees through "#fa12e3" → "#7612fa" → "#12d0fa", and that gradient carries the brand identity. A quieter lavender "#7b68ee" lives in the `--color-link` and `--color-brand-clickup` CSS variables and shows up on inline links and footer accents. The graphite text "#292d34" appears far more often (3585 hits) and does the visual heavy lifting.

Does ClickUp have a dark mode in this DESIGN.md?

Not as a togglable theme on the marketing site. The captured homepage is light-only with a "#ffffff" canvas and a "#f8f9fa" surface tier. The single dark surface is the primary CTA pill itself — "#292d34" background, white text, 20px radius. The ClickUp product app ships a full dark theme, but this DESIGN.md documents the marketing homepage where dark is scoped to the button level rather than a global mode.

What fonts does ClickUp use, and what should I substitute?

ClickUp runs two families. Display headlines use Plus Jakarta Sans at weight 650-700 — the hero h2 hits 76px at weight 700 with -3.04px letter-spacing (the `--display-3xl` token). Body copy, nav links, and button labels run Inter at weight 400-600. A third family, Sometype Mono, is reserved for uppercase eyebrow labels at 14px / weight 500. Plus Jakarta Sans is open-source on Google Fonts, as is Inter. Sometype Mono is also free — JetBrains Mono or Geist Mono are acceptable substitutes for the eyebrow role.

Why does ClickUp use such varied border-radius values?

The radius scale is wider than most SaaS marketing pages. Buttons land at 20px (the primary CTA) or 9px (secondary tertiary surfaces), inline chips at 4px, app-grid tiles at 12px, feature cards at 14px, section panels at 25px, and oversized feature frames at 35px. The mix lets ClickUp differentiate the dominant CTA pill geometry from the workspace-app tile grid below it. Avatars and icon chips push to 50 percent (perfect circles) — by far the most frequent radius on the page at 926 occurrences.

Can I use this DESIGN.md to build a React productivity app?

Yes. Drop the file into Claude, Cursor, or Copilot and the agent will reproduce ClickUp's gradient-CTA discipline, graphite-on-white text ladder, Plus Jakarta display paired with Inter chrome, and the 20px dark pill primary geometry — not a generic purple SaaS theme. You can also pull tokens directly: every hex ("#7612fa", "#292d34", "#7b68ee", the brand-accent badges) and every radius / spacing / typography value is a quoted scalar you can paste into Tailwind config or CSS variables. The 22 component definitions cover the gradient hero CTA, dark pill CTA, app-tile grid, feature cards, top nav and footer.

What's missing from this DESIGN.md spec?

A few items live in the Known Gaps section. The text-input component was not surfaced on the captured homepage — the public landing is read-only above the fold, so input geometry is inferred from sibling productivity tools. Dark mode is not documented for the marketing surfaces. Animation and transition timings are partially captured (`--transition-short` at 0.25s with the `cubic-bezier(0.5, 0, 0.5, 1)` easing) but motion specifics for the gradient hover state were not extracted. The 7-color accent-badge palette is drawn from CSS variables; the actual in-product label palette may include additional hues.

ClickUp Design System

ClickUp's design system as a DESIGN.md file.

About ClickUp DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source clickup.com

Project Management
Productivity & SaaS

ClickUp's homepage is a white canvas with one voltage and one gradient. The page floor is "#ffffff" with graphite "#292d34" carrying every heading and every hairline (3585 occurrences across text and border). The dominant chromatic signal is neon purple "#7612fa" — but it appears almost exclusively inside the primary-CTA gradient `linear-gradient(263deg, #fa12e3 -35%, #7612fa 41%, #12d0fa 135%)`, not as a flat fill. The hero CTA itself ("Get started. It's FREE!") is the inversion of that rule: a near-black "#292d34" pill at 20px radius, white text, weight 650. The gradient sits behind secondary "Try ClickUp Brain" surfaces and the wordmark, while the page itself stays calm.

This DESIGN.md packages the homepage spec into one Google Labs DESIGN.md file. Inside: 22 color tokens grouped into a graphite text ladder ("#292d34" through "#838383", "#b4b4b4"), a near-black-button family, a brand layer for neon purple "#7612fa", lavender link "#7b68ee" and the deep-blue utility "#4a2fff", and the 7 accent badge colors (blue "#0091ff", purple "#6647f0", pink "#ff02f0", orange "#f76808", green "#078d3b", red "#f0382d") drawn from the `--Core-Accents-*` CSS variable set. Typography spans 12 tokens running Plus Jakarta Sans for display and Inter for chrome, with Sometype Mono reserved for uppercase eyebrows. Eight rounded values (4px chip, 9px button, 12px tile, 14px card, 20px hero-pill, 25px section, 35px feature panel, 9999px avatar), nine spacing tokens on a 10px base, and 22 components covering buttons, cards, the workspace-app tile grid, gradient hero CTA, dark pill CTA, top nav and footer.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces ClickUp's actual move — gradient reserved for one CTA family, dark pill for the primary, graphite text on white, Plus Jakarta display paired with Inter chrome — instead of a generic purple-SaaS theme. Or reference the tokens directly: every hex, font, radius, and spacing value is a quoted scalar you can paste into Tailwind config, CSS variables, or a component library. ClickUp is worth studying because it positions a multi-color gradient as the brand voltage without letting it leak across the rest of the page — every other surface is sober graphite-on-white.

What makes it distinct

Gradient-as-brand voltagethe primary CTA is a 263deg sweep through #fa12e3, #7612fa and #12d0fa, never a flat fill
Graphite over true blackpage text sits at #292d34 (1830 occurrences) so headings read warm against the white canvas, not stark
Plus Jakarta Sans for display, Inter for chrometwo-family split with -3.04px tracking at the 76px hero
Dark-pill primary CTAthe 'Get started. It is FREE!' button renders #292d34 background at 20px radius, not the brand gradient
Sometype Mono uppercase eyebrowsthe only mono surface in a system that otherwise runs two sans families

Live at clickup.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

clickup.com

Explore ClickUp

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

ClickUp design system FAQ

Common questions about ClickUp's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

ClickUp — official site

ClickUp's marketing homepage — the everything app for work, with tasks, docs, goals, and chat.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use ClickUp in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→