A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
9type steps
1radius steps
11pxspacing base
Clickup, in one page
ClickUp's iOS app is a dense, feature-maximal productivity surface whose personality is the brand gradient and an information-rich task list. The default canvas is white (#FFFFFF) in light mode and a deep blue-violet (#1B1B2E) in dark mode — chosen to complement the gradient, NOT neutral black. The app opens to a List view: tasks grouped under custom status pills ("To do", "In progress", "Review", "Complete"), where each task row packs a status checkbox, name, priority flag, tags, due date, and assignee avatar into a compact line. ClickUp's thesis is "one app to replace them all" — so the UI is deliberately dense, with 12+ view types (List, Board, Calendar, Gantt, Timeline, Workload, Table, Doc, Mind Map, Activity, Map, Embed) rendering the same task objects.
The signature visual element is the 3-stop brand gradient: purple (#7B68EE) → pink (#FD71AF) → blue (#49CCF9). It is the brand's hero moment — used on the floating action button, the primary CTA, the logo, and every ClickUp AI surface (the AI bar, AI buttons, AI-generated content highlights). The gradient is reserved and intentional: it never tiles the background; it marks "the most important action" and "AI". The other signature is the custom status system: every List defines its own ordered set of colored statuses, and the task list is grouped by them — each group headed by a saturated status pill with a count.
The color system pairs the gradient triad with a functional palette: status green (#2ECC71), red (#F44E6E), orange (#FF9F1A), blue (#49CCF9), yellow (#FFCC00), teal (#1ECBE1), plus a neutral gray (#5B5B79) for "to do"/unset. Priority is encoded as a colored flag triangle: Urgent (red #F44E6E), High (orange #FF9F1A), Normal (blue #49CCF9), Low (gray). Tags are small rounded pills in any of the palette hues at ~22% opacity with saturated text. Color is functional and dense — it differentiates many simultaneous attributes at a glance.
Typography is Plus Jakarta Sans — a geometric, slightly humanist sans (a close free match to ClickUp's product face). On iOS it falls back to SF Pro. Hierarchy is confident: 32pt extrabold screen titles, 26pt extrabold list titles, 22pt section heads, 14pt semibold task names (denser/bolder than Asana's), 13pt metadata, 10pt extrabold status pills (uppercased, tracked). Headings push to 800; task names sit at a deliberate 600 so the dense list still scans.
Key Characteristics:
- White canvas (
#FFFFFF) light / deep blue-violet (#1B1B2E) dark — complements the gradient, NOT neutral black - 3-stop brand gradient — purple
#7B68EE→ pink#FD71AF→ blue#49CCF9on FAB, primary CTA, logo, all AI surfaces - Custom status pills — every List defines its own ordered colored statuses; the task list is grouped by them
- Dense task rows — status box + name + priority flag + tags + due + assignee packed into one compact line
- Priority flag — a colored triangle: Urgent (red) / High (orange) / Normal (blue) / Low (gray)
- ClickUp AI surfaces — the gradient marks every AI affordance (AI bar, AI buttons, AI content)
- 12+ view types — List / Board / Calendar / Gantt / Timeline / Workload / Table / Doc / Mind Map / Activity / Map
- Tags as ~22% tinted pills with saturated text in any palette hue
- Hierarchy nesting — Spaces ▸ Folders ▸ Lists ▸ Tasks ▸ Subtasks
- Squircle FAB — a rounded-square (18pt radius) gradient button, not a circle
- Minimal but information-dense chrome — bottom tab bar (Home / Tasks / Inbox / Search) + per-list view tabs
Do's and don'ts
Do
- Reserve the 3-stop gradient (
#7B68EE→#FD71AF→#49CCF9) for the FAB, primary CTA, logo, and AI surfaces only - Use the deep blue-violet
#1B1B2Efor dark canvas — it complements the gradient, NOT neutral black - Group the task list by the List's ordered custom status pills (saturated, uppercased, 10pt/800)
- Make the FAB a squircle (56pt, 18pt radius) — a deliberate brand signature, not a circle
- Encode priority as a colored flag triangle (Urgent red / High orange / Normal blue / Low gray)
- Embrace density — surface priority + tags + due + assignee per row; power users want it all visible
- Mark every AI affordance with the gradient (AI bar tint, AI buttons, AI content backdrop)
- Use tags as ~22% tinted pills with saturated text in any palette hue
- Offer the full view switcher (List / Board / Calendar / Gantt / Timeline / Doc / …) over the same tasks
- Use tabular numerals for due dates, points, time-tracked, and counts in the dense grid
- Show the Space ▸ Folder ▸ List breadcrumb so users always know where they are
Don't
- Don't tile the gradient as a background or use it on body text — it marks primary action + AI only
- Don't use pure black (
#000000) for the dark canvas —#1B1B2Eblue-violet is correct - Don't render statuses as faint tint chips — group-header status pills are SOLID and saturated (tags are the tinted ones)
- Don't make the FAB a circle — the squircle is the brand signature
- Don't over-sparsify the list — ClickUp's value is information density; don't strip metadata to "clean it up"
- Don't use a flat checkbox for status — it's a status-colored rounded square that cycles statuses
- Don't use heavy shadows on rows — only floating / dragged elements and the FAB get shadow
- Don't use gray as the FAB shadow — it's a soft purple glow tied to the gradient
- Don't bold task names beyond 600 or lighten below it — 14pt/600 keeps the dense list scannable
- Don't introduce a second gradient — there is exactly one brand gradient; functional colors are solids
- Don't hide the breadcrumb — hierarchy (Space/Folder/List) is core to ClickUp's mental model
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Clickup design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Brand Gradient: #7b68ee
- Brand Purple: #7b68ee
- Brand Pink: #fd71af
- Brand Blue: #49ccf9
- Purple Pressed: #6a57dd
- Purple Tint: #7b68ee
- Canvas White: #ffffff
- Surface Gray: #f7f7fb
- Surface Pressed: #ededf4
- Divider: #e7e7ef
Type:
- families: Plus Jakarta Sans, Numeric, Fallback Stack
- scale: 9, 10, 13, 14, 15, 17, 22, 26, 32
- weights: 400, 600, 700, 800
Shape:
- radius: 10
- elevation: Shadow: `rgba(123,104,238,0.50) 0 8px 22px` | Drag a card to another column = change its status; lift shadow + 200ms settle | Don't use gray as the FAB shadow — it's a soft purple glow tied to the gradient
Spacing: 11, 12, 13
Rules:
- Reserve the 3-stop gradient (`#7B68EE` → `#FD71AF` → `#49CCF9`) for the FAB, primary CTA, logo, and AI surfaces only
- Use the deep blue-violet `#1B1B2E` for dark canvas — it complements the gradient, NOT neutral black
- Group the task list by the List's ordered custom status pills (saturated, uppercased, 10pt/800)
- Make the FAB a squircle (56pt, 18pt radius) — a deliberate brand signature, not a circle
- Encode priority as a colored flag triangle (Urgent red / High orange / Normal blue / Low gray)
- Embrace density — surface priority + tags + due + assignee per row; power users want it all visible
Avoid:
- Don't tile the gradient as a background or use it on body text — it marks primary action + AI only
- Don't use pure black (`#000000`) for the dark canvas — `#1B1B2E` blue-violet is correct
- Don't render statuses as faint tint chips — group-header status pills are SOLID and saturated (tags are the tinted ones)
- Don't make the FAB a circle — the squircle is the brand signature
- Don't over-sparsify the list — ClickUp's value is information density; don't strip metadata to "clean it up"
- Don't use a flat checkbox for status — it's a status-colored rounded square that cycles statuses
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Interactive)
- Brand Gradient (
#7B68EE→#FD71AF→#49CCF9, 135°): The hero — FAB, primary CTA, logo, AI surfaces. Identical light & dark. - Brand Purple (
#7B68EE): The single solid brand color — active tab, links, solid secondary CTA, selection. - Brand Pink (
#FD71AF): Gradient mid-stop; accent on AI / highlights. - Brand Blue (
#49CCF9): Gradient end-stop; also "Normal" priority & "In progress" default status. - Purple Pressed (
#6A57DD): Pressed state of solid-purple surfaces. - Purple Tint (
#7B68EE38): ~22% purple behind selected rows / focused fields.
Canvas & Surfaces (Light Mode)
- Canvas White (
#FFFFFF): Primary light canvas, task list background. - Surface Gray (
#F7F7FB): Grouped surfaces, sidebar, hovered rows. - Surface Pressed (
#EDEDF4): Pressed/selected rows. - Divider (
#E7E7EF): Hairline between task rows and groups. - Card Border (
#DEDEE9): 1pt border on board cards.
Canvas & Surfaces (Dark Mode)
- Dark Canvas (
#1B1B2E): Primary dark canvas — deep blue-violet, NOT pure black. - Dark Surface 1 (
#232338): Cards, grouped surfaces. - Dark Surface 2 (
#2C2C44): Elevated chips, hovered rows, board columns. - Dark Divider (
#383852): Hairline dividers. - Dark Card Border (
#42425C): 1pt border on board cards in dark.
Text
- Text Primary Light (
#1B1B2E): Primary task names, body. - Text Secondary Light (
#5E5E7A): Metadata, due dates, counts, placeholders. - Text Tertiary Light (
#9292A8): Disabled, completed-task strikethrough. - Text Primary Dark (
#F1F1F6): Primary text on dark. - Text Secondary Dark (
#A6A6BC): Metadata on dark. - Text Tertiary Dark (
#6E6E88): Disabled / completed on dark.
Functional Palette (Status / Priority / Tags)
The palette every custom status, priority, and tag draws from. Statuses render as solid pills; tags as ~22% tints.
| Role | Solid Hue | Tint (22%) | On-Solid Text |
|---|---|---|---|
| Green / Complete | #2ECC71 | #2ECC7138 | #FFFFFF |
| Red / Urgent | #F44E6E | #F44E6E38 | #FFFFFF |
| Orange / High | #FF9F1A | #FF9F1A38 | #FFFFFF |
| Blue / Normal | #49CCF9 | #49CCF938 | #0E2A33 |
| Purple / Brand | #7B68EE | #7B68EE38 | #FFFFFF |
| Pink | #FD71AF | #FD71AF38 | #FFFFFF |
| Yellow | #FFCC00 | #FFCC0038 | #3A2F00 |
| Teal | #1ECBE1 | #1ECBE138 | #06363C |
| Gray / To-do / Unset | #5B5B79 | #5B5B7938 | #FFFFFF |
Priority (Flag Triangle)
| Role | Color |
|---|---|
| Urgent | #F44E6E |
| High | #FF9F1A |
| Normal | #49CCF9 |
| Low | #9292A8 (gray) |
| No priority | outline gray, no fill |
Semantic
- Success Green (
#2ECC71): "Complete" status, success toast. - Error / Urgent Red (
#F44E6E): Overdue date, delete, urgent priority, error toast. - Warning Orange (
#FF9F1A): High priority, warning callout. - AI Glow (
#7B68EE→#FD71AF→#49CCF9at ~18% on a panel): backdrop tint behind ClickUp AI content.
Type scaleRead the full spec
Font Family
- Primary:
Plus Jakarta Sans(by Tokotype, 2020, SIL OFL) — geometric humanist sans; the closest free match to ClickUp's product typeface. - Numeric: Plus Jakarta Sans tabular figures for due dates, counts, points, time-tracking (
font-feature-settings: "tnum"). - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - iOS Note: falls back to SF Pro Text/Display when Plus Jakarta Sans isn't bundled.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Screen Title | Plus Jakarta Sans | 32pt | 800 | 1.15 | -0.5pt | "Everything", "Home" — large nav title |
| List Title | Plus Jakarta Sans | 26pt | 800 | 1.2 | -0.3pt | List/Folder name in header (+ color square) |
| Section | Plus Jakarta Sans | 22pt | 700 | 1.25 | -0.2pt | "Today's tasks", subsection headings |
| Subsection | Plus Jakarta Sans | 17pt | 700 | 1.3 | -0.1pt | "Assigned to me", group labels |
| Body | Plus Jakarta Sans | 15pt | 400 | 1.5 | 0pt | Task descriptions, comments, Docs |
| Task Name | Plus Jakarta Sans | 14pt | 600 | 1.35 | 0pt | The task name in a dense list row |
| Status Group Label | Plus Jakarta Sans | 10pt | 800 | 1.1 | 0.6pt | Status-pill text heading a group (uppercased) |
| Meta | Plus Jakarta Sans | 13pt | 400 | 1.35 | 0pt | Due date, subtask count, time estimate |
| Tag | Plus Jakarta Sans | 10pt | 700 | 1.0 | 0.2pt | Tag pill text |
| Button | Plus Jakarta Sans | 15pt | 700 | 1.0 | 0pt | Primary / secondary buttons |
| Text Action | Plus Jakarta Sans | 14pt | 600 | 1.0 | 0pt | "Add subtask", "More options" |
| Assignee Initials | Plus Jakarta Sans | 9pt | 700 | 1.0 | 0.2pt | Initials inside an assignee avatar |
| Tab Label | Plus Jakarta Sans | 10pt | 600 | 1.0 | 0.1pt | Bottom tab bar labels |
| Comment Author | Plus Jakarta Sans | 13pt | 700 | 1.3 | 0pt | Comment / activity author name |
Principles
- Dense but legible: ClickUp packs many attributes per row — task names at 14pt/600 (bolder than typical) so the eye anchors fast.
- Status pills are tight & loud: 10pt/800, uppercased, +0.6pt tracking, white-on-saturated — they head every group.
- Weight concentrated at 400 / 600 / 700 / 800: regular body, semibold task names & actions, bold buttons/headings, extrabold titles & status pills. No thin.
- Tabular numerals for the data: due dates, points, time-tracked, counts must not jitter in the dense grid.
- The gradient never appears in type: text is always solid; the gradient is for surfaces (FAB/CTA/AI), never letterforms in-app.
- Dynamic Type first-class: titles, sections, body, task names, comments scale; status pills, tags, tab labels, assignee initials stay fixed.
Components and layoutRead the full spec
Buttons
Primary Button (Create task / Save / Generate with AI)
- Shape: Rounded rectangle, 10pt corner radius
- Background: the 3-stop brand gradient (135°,
#7B68EE→#FD71AF→#49CCF9) - Text:
#FFFFFF, Plus Jakarta Sans 15pt weight 700 - Padding: 13pt vertical, 26pt horizontal
- Pressed: brightness 0.94 + scale 0.98
- Disabled: gradient at 40% opacity
Solid Secondary Button (Save / Apply)
- Background:
#7B68EE(Brand Purple, solid) - Text:
#FFFFFF, Plus Jakarta Sans 15pt weight 700 - Corner radius: 10pt; padding 13/24pt
- Pressed:
#6A57DD+ scale 0.98
Outline Button (Add subtask / Add field)
- Background: transparent
- Text:
#1B1B2Elight /#F1F1F6dark, Plus Jakarta Sans 14pt weight 600 - Border: 1pt
#E7E7EFlight /#383852dark - Corner radius: 10pt; padding 12/20pt
- Pressed: background
#EDEDF4/#2C2C44
Text Button (More options / Add subtask)
- Font: Plus Jakarta Sans 14pt weight 600
- Color:
#7B68EE(brand purple) - Pressed: 60% opacity
Floating Action Button (Create — squircle, not circle)
- Size: 56pt, 18pt corner radius (rounded-square / squircle)
- Background: the 3-stop brand gradient
- Icon: white
plus24pt, stroke 2.6 - Shadow:
rgba(123,104,238,0.50) 0 8px 22px - Position: 16pt from trailing edge, 16pt above the tab bar
- Pressed: scale 0.94 + brightness 0.94
Task Row (the core atom)
Every task in any list view is a dense row:
- Height: ~52pt with one metadata line
- Leading: 18pt status checkbox — a 5pt-radius rounded square, 2pt border in the status color; checkmark when done
- Name: Plus Jakarta Sans 14pt w600
#1B1B2E/#F1F1F6, truncates with ellipsis - Metadata row (6pt gap): priority flag triangle, tag pills, due date
- Trailing: 22pt circular assignee avatar (initials or photo)
- Divider: 1pt
#E7E7EF/#383852between rows - Swipe-left: Complete (green) + More; swipe-right: set priority
- Tap row: opens the full task panel (description, subtasks, custom fields, checklists, comments, activity)
Status Checkbox
- Default: 18pt rounded square, 5pt radius, 2pt border in the status's color, transparent fill
- "In progress" group: orange/blue border; "Complete": filled
#2ECC71+ white check - Tap: cycles to the next status (or opens the status picker on long-press) + soft haptic
Status Pill (group header)
- A saturated solid pill in the status color: Plus Jakarta Sans 10pt w800, uppercased, +0.6pt tracking, white (or dark on yellow/blue) text
- 4pt vertical / 9pt horizontal padding, 5pt corner radius
- Followed by a count
#9292A8and a trailing "+ add task" affordance
Priority Flag
- A small filled triangle (≈12pt) in the priority color: Urgent
#F44E6E, High#FF9F1A, Normal#49CCF9, Low gray; "No priority" = gray outline - Tap: opens the priority picker
Tag Pill
- ~22% tint of a palette hue with saturated text, Plus Jakarta Sans 10pt w700
- 2pt vertical / 7pt horizontal, 999pt radius (full pill)
Status Group
- A status pill (see above) + item count + "+ add task"
- Tap the pill chevron: collapse/expand the group's tasks (200ms ease-out)
- Lists define an ordered set of statuses; "Complete"-type statuses collapse by default
ClickUp AI Bar / Surfaces
- A horizontal bar (10pt radius) with a ~18% gradient backdrop tint + 1pt purple border
- Leading sparkle glyph in brand purple; label "ClickUp AI · {action}" in Plus Jakarta Sans 12pt w600
- AI-generated content blocks get the same subtle gradient tint to mark provenance
- AI action buttons use the full gradient fill
Navigation
Bottom Tab Bar
- Height: 52pt + safe area
- Background:
#FFFFFF/#1B1B2Ewith 1pt top border#E7E7EF/#383852 - Tabs (4): Home, Tasks (My Work), Inbox (Notifications), Search
- Icon size: 22pt; active filled, inactive stroked
- Active color:
#7B68EE(brand purple); inactive#9292A8/#6E6E88 - Labels: Plus Jakarta Sans 10pt w600, always shown
View Switcher Tabs (per list)
- Below the list title: List, Board, Calendar, Gantt, Timeline, Doc, Table, … (12+; horizontally scrollable)
- Active tab:
#7B68EEtext with a 2.5pt purple#7B68EEunderline - Inactive:
#5E5E7A/#A6A6BC - Plus Jakarta Sans 13pt w600, 18pt gap
Top Nav (list / task detail)
- Height: 44pt + safe area
- Leading: back chevron / close X + breadcrumb (Space ▸ Folder ▸ List)
- Center / leading: compact list or task title
- Trailing: ⋯ actions / share / AI
Input Fields
Search Bar
- Height: 40pt
- Background:
#F7F7FB/#2C2C44 - Border: none
- Corner radius: 10pt
- Leading icon
magnifyingglass16pt#9292A8 - Placeholder: "Search tasks, docs, people" 14pt
#9292A8 - Focus: 1.5pt
#7B68EEborder
Inline Field / Composer
- Tapping a custom-field or name cell turns it into an inline field with a 1.5pt
#7B68EEfocus ring - Comment composer:
#F7F7FB/#2C2C44fill, 10pt radius, "Comment or type / for commands" placeholder; a/slash menu and@-mention picker are available - AI compose: a gradient-bordered field with the sparkle prefix
Distinctive Components
Brand-Gradient FAB & AI Surfaces
- The hero — see Buttons & AI Bar. The gradient is reserved for "most important action" and "AI"; never a background.
Custom-Status Grouped List
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Metadata may wrap; fewer tags shown, "+N" overflow |
| iPhone 13/14/15 | 390pt | Standard dense layout |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in top nav |
| iPhone 15/16 Pro Max | 430pt | One extra metadata column without wrap |
| iPad (portrait) | 768pt | Master-detail: Spaces/Lists sidebar (300pt) + list/task detail |
| iPad (landscape) | 1024pt+ | Three-pane: sidebar + list + task panel; full Gantt/Table |
Dynamic Type
- Screen/list/section titles, body, task names, comments, Docs: full scale
- Status pills, tags, tab labels, assignee initials, status group labels: FIXED (dense-layout-sensitive)
- Due dates / points / counts: scale but stay tabular
Orientation
- All screens support rotation
- iPad landscape unlocks the three-pane (sidebar / list / task panel)
- Board / Gantt / Timeline scroll horizontally in both orientations
Touch Targets
- Status checkbox: 18pt glyph, 44pt hit area (separate from row tap)
- Tab bar icons: 22pt glyph, 44pt hit
- Task row: full-row tap opens the task panel
- Status group chevron: 16pt glyph, 44pt hit
- FAB: 56pt squircle (exceeds minimum)
- Priority flag / tag: 44pt hit even though the glyph is small
Safe Area Handling
- Top: list title & top nav respect safe area + Dynamic Island
- Bottom: tab bar + home indicator respected; FAB 16pt above the tab bar
- Keyboard: inline field, comment composer, and AI compose rise above the keyboard
- Sides: 16pt content inset
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-clickup {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #1b1b2e;
--heading-color: #1b1b2e;
--link-color: #a15b00;
--link-hover-color: #6e3e00;
--border-color: #d6d6d9;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(27,27,46,0.06);
--card-hover-shadow: 0 6px 18px rgba(27,27,46,0.12);
--header-bg: #1b1b2e;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #6b6b77;
--button-bg: #ff9f1a;
--button-text-color: #000000;
--button-hover-bg: #e68600;
--button-border: none;
--button-border-radius: 10px;
--button-secondary-bg: #f1f1f2;
--button-secondary-text-color: #1b1b2e;
--button-secondary-hover-bg: #e4e4e6;
--button-secondary-border: 1px solid #d6d6d9;
--prompt-bg: #f4f4f5;
--prompt-text-color: #1b1b2e;
--base-font: var(--font-helvetica);
--heading-font: var(--font-helvetica);
--card-border-radius: 10px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
ios/design-md/productivity/clickup/DESIGN.md· 27.2 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.