Say hello to The Everything App

Software to replace all software

A dense, rounded, AI-work design language with black conversion buttons, product-chip breadth, agent cards, and the unmistakable ClickUp gradient signature.

Workspace / Launch Plan
Finalize campaign briefHighToday
Sync product launch calendarAgentFri
Publish customer proof deckDocsNext
ProjectsChatBrainCalendarWhiteboardsSprintsTime TrackingGoals
29 Colors
15 Type levels
13 Components
64 Tokens
01 / Colors

Black actions, pale systems, gradient signatures.

ClickUp's palette is anchored by sober black UI and white panels, then energized with logo gradients and AI pink/cyan moments.

primary#202020

Main CTA and text anchor.

accent#7612FA

Purple highlights and pricing outlines.

link#0091FF

Links, logo blue, focus rings.

surface#F8F9FA

Soft bands behind dense modules.

surfaceAlt#F1F1F9

Inactive tabs and secondary buttons.

logo cool#6647F0 → #0091FF

Lower ClickUp chevron.

logo warm#FF02F0 → #F76808

Upper ClickUp chevron.

ai-pink#FA12E3

Brain and agent energy.

success#30A46C

Checks, ROI, positive status.

dark-footer#111111

Dense footer and trust sitemap.

02 / Typography

Tight, declarative, and built for many features.

Plus Jakarta Sans carries the billboard claims. Inter handles dense UI and body copy. Mono labels organize the everything-app sprawl.

Replace all software
display — 92px / 700 / 1.05 / -0.04em / Plus Jakarta Sans
AI that showed up to work
hero — 76px / 700 / 1.05 / -0.04em / Plus Jakarta Sans
All apps, AI Agents, and humans
headline-lg — 60px / 650 / 1.1 / -0.035em / Plus Jakarta Sans
Built different. With purpose.
headline-md — 48px / 650 / 1.15 / -0.035em / Plus Jakarta Sans
Loved by 5+ million teams
title-lg — 40px / 650 / 1.2 / -0.04em / Plus Jakarta Sans
Project Management
title-md — 34px / 650 / 1.2 / -0.035em / Plus Jakarta Sans
Super Agent
title-sm — 26px / 650 / 1.25 / -0.035em / Plus Jakarta Sans
Tasks, docs, conversations, and decisions stay connected to the work.
body-lg — 18px / 400 / 1.333 / -0.02em / Inter
Secondary text stays quiet so dense modules remain readable.
body — 16px / 400 / 1.375 / -0.02em / Inter
AI & AUTOMATION / WORK SMARTER
label — 16px / 500 / 1.25 / 0em / Sometype Mono
03 / Buttons

Compact, heavy, and mostly black.

ClickUp conversion actions do not default to purple; black carries the sale, while pale and AI variants support product context.

button-primary
button-primary-hover
button-secondary
button-tertiary
button-ai-pink
button-ghost
button-icon
04 / Cards & Surfaces

White panels, pale AI surfaces, and subtle proof.

Cards are rounded and contained. Borders do most of the hierarchy work; shadows stay soft and operational.

Hero product card

Large rounded white surface for product previews and multi-pane workspace screenshots.

Agent card

Pastel AI surface with a soft shadow for Super Agent capability modules.

Brain prompt

Pink-tinted card for AI copy, search, or "sound like me" moments.

Pricing plan

White plan card with tiny overlay shadow and crisp dividers.

Highlighted plan

Recommended state uses purple outline and inner pale glow, not saturated fill.

Dark proof stack

Used for footer, premium AI, and high-contrast trust modules.

05 / Brand-Specific Product Patterns

The everything app made visible.

These patterns are the giveaway: app-chip sprawl, agent tasking, connected chat, kanban, docs, pricing, and ROI modules.

Replacement app chip wall

ProjectsDocsBrainChatCalendarWhiteboardsSprintsDashboardsAutomationsFormsGoalsTimesheets

Super Agent actions

PM Agent

UPDATE TASK · CREATE EVENT · SEND EMAIL · COMPLETE TASK

Task board

To do
Draft launch brief
Collect assets
Doing
Review sprint risks
Sync campaign docs
Done
Publish roadmap

Brain chat card

Where is the spring campaign logo?
@Brain found the Figma file and attached it to the launch task.
Create a follow-up for Ashley.

Pricing plan pair

Unlimited
$7

per user / month

Business
$12

best for teams

ROI proof stack

384% ROI
92k hours saved
$3.9M revenue gain
<6 mo payback
06 / Forms

Search-first utility, rounded and calm.

Fields stay white with grey borders. Focus uses ClickUp blue as a soft ring, and errors stay restrained.

07 / Spacing

A compact rhythm for dense work surfaces.

Small gaps keep chips and task rows tight; large section spacing gives the catalog room to reset.

xs · 4px
sm · 8px
md · 12px
lg · 20px
xl · 32px
xxl · 60px
section · 150px
08 / Radius

Rounded, but not bubbly.

ClickUp uses a restrained rounded system: crisp enough for work software, soft enough for approachable density.

6px

small controls

8px

tabs, utilities

12px

inputs, CTAs

14px

buttons, cards

20px

agent/pricing

32px

hero media

pill

chips/nav

09 / Elevation

Depth from borders first, shadows second.

The system is flat-leaning. Elevation is subtle and usually supports white panels on pale surfaces.

Flat

border + surface contrast

Hero card

0 4px 10px rgba(13,21,48,.05)

Feature card

0 1px 3px rgba(0,0,0,.10)

Agent card

0 10px 25px rgba(18,43,165,.10)

Pricing card

overlay + 1px lift

10 / Extracted Component Tokens

CSS custom properties.

Core tokens from the extracted design.md, ready to paste into a prototype.

:root {
  --brand-primary: #202020;
  --brand-accent: #7612FA;
  --brand-link: #0091FF;
  --brand-ink: #090C1D;
  --brand-muted: #646464;
  --brand-canvas: #FFFFFF;
  --brand-surface: #F8F9FA;
  --brand-surface-alt: #F1F1F9;
  --brand-border: #CFCFCF;
  --brand-logo-purple: #6647F0;
  --brand-logo-blue: #0091FF;
  --brand-logo-pink: #FF02F0;
  --brand-logo-orange: #F76808;
  --brand-ai-pink: #FA12E3;
  --brand-ai-cyan: #12D0FA;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-xxl: 20px;
  --radius-section: 32px;
  --font-display: "Plus Jakarta Sans", Inter, sans-serif;
  --font-body: Inter, "Plus Jakarta Sans", sans-serif;
  --shadow-card: 0 1px 3px rgba(0,0,0,.10);
  --shadow-agent: 0 10px 25px rgba(18,43,165,.10);
}