Light interfaceMeasured clickup.com

ClickUp

A busy, energetic productivity tool packed with colour-coded tags and bold buttons.

This page is styled with ClickUp’s own measured values. It is a private reference for AltLeads; their logo, brand and company-only fonts belong to them.

Colours

Each role is a value read from their live website, checked against their screenshots.

Background#FFFFFF
Page behind everything

Surface#F8F9FA
Cards, panels, menus

Text#202020
Headings and body

Muted text#646464
Secondary info

Line#E8E8E8
Dividers and outlines

Accent#202020
Main button, links, selection

On accent#FFFFFF
Text on the accent

Contrast

Text on background 16.3:1Muted on background 5.9:1Text on accent 16.3:1

Every colour found on their site

#838383#202020#646464#FFFFFF#000000#F8F9FA#E8E8E8#FCFCFC#FBFAFF#F0F0F0

Typography

Headings use Plus Jakarta Sans (free). Body text uses -apple-system (free).

h1	Plus Jakarta Sans · 60px · 700 · -2.1px	Software to replace all software
h2	Plus Jakarta Sans · 48px · 650 · -1.68px	60% of work is lost in context
h3	Plus Jakarta Sans · 26px · 650 · -0.91px	Projects
p	Inter · 14px · 400 · -0.15px	The best AI is your AI. The world's first company Brain
li	Plus Jakarta Sans · 16px · 400	MACOS

Corners & shadows

Corner sizes used

6px

7px

8px

pill

12px

16px

Shadows

Shadow 1

Shadow 2

Shadow 3

Components, rebuilt from their values

Live and clickable. Built by us from the numbers above, not copied from their code. Sample CRM data.

Buttons

Navigation

WorkspaceCompanies Contacts Meetings

Disposition

InterestedCallbackBengaluru

Hide do-not-call

Next call

Licious · Admin head

Wants a proposal before the cafeteria contract renews in March.

Tabs

Table

Company	Owner	Status	Last touch
Zomato Food tech · Gurugram	PR	Callback	18 days ago
Licious Food tech · Bengaluru	RM	Interested	Today
Delhivery Logistics · Gurugram	AS	No answer	35 days ago

Toast

Call logged · callback on Friday

Real components from their site

Cropped from ClickUp’s live website. Click to enlarge.

Buttons · 4

ClickUp button: Login — #F0F0F0 · corners 8px · 32px

ClickUp button: The Best AI is — #E8E8E8 · corners 54px · 30px

ClickUp button: Get started. It's FREE! — #202020 · corners 15px · 52px

Navigation bar · 1

ClickUp Navigation bar: Brain AI — no fill · square · Plus Jakarta Sans 16px

Buttons · 6

ClickUp Buttons: Login — fill #F0F0F0 · corners 8px · Inter 14px

ClickUp Buttons: The Best AI is — fill #E8E8E8 · corners 54px · Inter 14px

ClickUp Buttons: Get started. It's FREE! — fill #202020 · corners 15px · Inter 18px

ClickUp Buttons: Build your own agent — fill #202020 · corners 12px · Inter 16px

ClickUp Buttons: Learn More — fill #F0F0F0 · corners 12px · Inter 16px

Tags and badges · 7

ClickUp Tags and badges: Task — fill #7B5BF0 · corners 6px · SF Pro Text 12px

ClickUp Tags and badges: Backend — fill #E7F9F5 · corners 6px · SF Pro Text 12px

ClickUp Tags and badges: API — fill #FFEDD5 · corners 6px · SF Pro Text 12px

ClickUp Tags and badges: IN PROGRESS — fill #0091FF · corners 6px · SF Pro Text 16px

ClickUp Tags and badges: Data — fill #FEEFF6 · corners 6px · SF Pro Text 12px

ClickUp Tags and badges: Frontend — fill #EAF1FE · corners 6px · SF Pro Text 12px

ClickUp Tags and badges: IN REVIEW — fill #9256D9 · corners 6px · SF Pro Text 16px

Cards and panels · 1

ClickUp Cards and panels: Chat — fill #FFFFFF · corners 12px · Plus Jakarta Sans 16px

Lists and tables · 1

ClickUp Lists and tables: CONTEXT — fill #2A2A2A · square · Plus Jakarta Sans 16px

Icons

30 icons copied exactly from their site’s code.

Product screens

20 real screens from web image search, each linked to where it was found.

ClickUp product screen: How to Build a CRM Database to Serve Your Customers Better | ClickUp — How to Build a CRM Database to Serve Your Customers Better | ClickUp

ClickUp product screen: ClickUp™ Product Features — ClickUp™ Product Features

ClickUp product screen: 10 Best AI To-Do List Apps & Task Managers in 2026 — 10 Best AI To-Do List Apps & Task Managers in 2026

ClickUp product screen: ClickUp Services - New Leaf Digital ClickUp Consultant — ClickUp Services - New Leaf Digital ClickUp Consultant

ClickUp product screen: ClickUp Reviews: 1930+ User Reviews and Ratings in 2020 | G2 — ClickUp Reviews: 1930+ User Reviews and Ratings in 2020 | G2

ClickUp product screen: ClickUp review: key features, pros, cons, and pricing in 2026 - HypeGig — ClickUp review: key features, pros, cons, and pricing in 2026 - HypeGig

ClickUp product screen: ClickUp 3.0 มีอะไรใหม่ๆ บ้าง สรุปจากงาน LevelUp 2023 — ClickUp 3.0 มีอะไรใหม่ๆ บ้าง สรุปจากงาน LevelUp 2023

ClickUp product screen: ClickUp Views: What They Are and How to Use Them — ClickUp Views: What They Are and How to Use Them

ClickUp product screen: ClickUp Changes the Game for Software Development Teams — ClickUp Changes the Game for Software Development Teams

ClickUp product screen: ClickUp™ - View your work, your way. — ClickUp™ - View your work, your way.

ClickUp product screen: 1940 × 1308 — 1940 × 1308

ClickUp product screen: 768 × 533 — 768 × 533

ClickUp product screen: 1400 × 934 — 1400 × 934

ClickUp product screen: 1400 × 926 — 1400 × 926

ClickUp product screen: 2782 × 1740 — 2782 × 1740

ClickUp product screen: 1280 × 720 — 1280 × 720

ClickUp product screen: 1024 × 638 — 1024 × 638

ClickUp product screen: 1384 × 1308 — 1384 × 1308

ClickUp product screen: 1220 × 660 — 1220 × 660

ClickUp product screen: 1114 × 842 — 1114 × 842

Do & don’t

What makes it ClickUp

Near-black buttons and headings instead of a bright brand colour
Lots of small rounded tags and pill shapes for status and priority
Dense layouts with many cards and lists packed together

Use dark neutral (near-black) for primary buttons, not a loud colour
Use pill-shaped tags to show status, priority, or category at a glance
Keep spacing tight so more information fits on screen

Don’t

Don't rely on a single bright brand colour for everything
Don't leave status information as plain text without a tag
Don't use large empty whitespace that wastes space

For AltLeads: Borrow the colour-coded tags for call outcomes and lead status so reps can scan a list and know priority instantly.

Copy the tokens

Paste into any project to try this look.

/* ClickUp · values measured from https://clickup.com/ · reference only, their brand belongs to them */
:root {
  --bg: #FFFFFF;
  --surface: #F8F9FA;
  --text: #202020;
  --muted: #646464;
  --line: #E8E8E8;
  --accent: #202020;
  --on-accent: #FFFFFF;
  --radius-button: 8px;
  --radius-card: 12px;
  --radius-small: 6px;
  --button-height: 32px;
  --font-heading: "Plus Jakarta Sans", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "-apple-system", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
}