UI Skillbook
2

ClickUp DESIGN.md

Brands

Productivity software with a bright gradient brand, polished dashboards, and all-in-one work platform messaging. ClickUp's public site combines violet, pink, and blue gradients with white cards and dense productivity…

Raw DESIGN.md

At a glance

Group
Brands
Main color
#7b61ffBlue design systems
Fonts
AxiformaSF Mono

Colors in this file

  • #e7eaf3

    Unnamed

  • #7b61ff

    Unnamed

  • #f63d68

    Unnamed

  • #101828

    Unnamed

  • #3b82f6

    Unnamed

  • #ffffff

    Unnamed

  • #667085

    Unnamed

  • #f7f8ff

    Unnamed

Productivity software with a bright gradient brand, polished dashboards, and all-in-one work platform messaging. ClickUp's public site combines violet, pink, and blue gradients with white cards and dense productivity demos.

1. Visual Theme & Atmosphere

Overall Aesthetic

ClickUp feels like productivity SaaS with more visual energy than typical work software.

Mood & Feeling

  • Fast
  • Energetic
  • Productive
  • All-in-one
  • Modern

Design Density

Medium density. Demos are feature-rich, but the framing is polished and spacious.

Visual Character

  • Gradient brand accents
  • White rounded cards
  • Dashboard and document demos
  • Bright modern SaaS polish

2. Color Palette & Roles

TokenHexRole
--clickup-violet#7B61FFPrimary brand accent
--clickup-pink#F63D68Gradient support
--clickup-blue#3B82F6Supporting accent
--clickup-white#FFFFFFMain surface
--clickup-ink#101828Text
--clickup-muted#667085Secondary text
--clickup-border#E7EAF3Borders
--clickup-surface#F7F8FFSoft background

3. Typography Rules

Font Stack

css--font-display: "Axiforma", "Inter", "Helvetica Neue", Arial, sans-serif;
--font-sans: "Axiforma", "Inter", system-ui, sans-serif;
--font-mono: "SF Mono", Menlo, monospace;

Type Scale

Hero 58/700, H1 42/700, H2 30/700, Body 16/400, Small 14/400

Typography Philosophy

Use modern productivity-focused type with strong, upbeat hierarchy.

4. Component Stylings

css.button-primary { background:linear-gradient(135deg,#7b61ff,#f63d68); color:#fff; border:none; border-radius:999px; min-height:46px; padding:0 20px; font-weight:700; }
.button-secondary { background:#fff; color:#101828; border:1px solid #e7eaf3; border-radius:999px; min-height:46px; padding:0 20px; }
.card { background:#fff; border:1px solid #e7eaf3; border-radius:24px; box-shadow:0 12px 24px rgba(16,24,40,.06); }

5. Layout Principles

Spacing Scale

4, 8, 12, 16, 24, 32, 48, 64px

Layout Behavior

  • Lead with all-in-one platform positioning
  • Use dense but polished work demos
  • Let gradients highlight, not dominate

6. Depth & Elevation

ClickUp uses soft elevated cards with bright accent energy.

7. Do's and Don'ts

Do

  • Keep it vivid and modern
  • Use gradient accents intentionally
  • Preserve polished board/doc/dashboard demos

Don't

  • Don’t make it dull monochrome SaaS
  • Don’t let bright colors become chaotic

8. Responsive Behavior

Breakpoints

  • Mobile <768px
  • Tablet 768px-1023px
  • Desktop 1024px+

Responsive Rules

  • Stack demos before shrinking
  • Keep gradient CTA hierarchy obvious

9. Agent Prompt Guide

textDesign this like ClickUp: bright productivity SaaS with violet-pink gradient accents, white rounded dashboard cards, polished all-in-one work-platform demos, and modern energetic typography.

Use it with your agent

Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.

Download

curl -o DESIGN.md https://www.uiskillbook.com/design-md/clickup.md

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

get_design_md({ "slug": "clickup" })

Related Design.md files

Proton

Brands · Inter

Privacy ecosystem design with deep purple foundations, secure product clarity, and calm encrypted-service surfaces.

Arm

Brands · Inter

AI-era semiconductor branding with deep compute minimalism, luminous gradients, and efficiency-first storytelling. Arm’s current visual language combines dark navy foundations, bright futuristic highlights, and…

Clerk

Brands · Inter

Authentication product design with polished drop-in components, violet developer-brand energy, and secure account-management flows.

PlanetScale

Brands · Inter

Database platform design with official black-and-white restraint, purple primary brand color, and clean deploy-request workflows.

Qualtrics

Brands · Poppins

Experience-management design with flexible survey styling, clean enterprise surfaces, and explicit accessibility safeguards. Qualtrics supports multiple survey layouts and palette options while keeping typography,…

LayerX

Brands · Inter

LayerX is a Tokyo-based "compound startup" whose mission — すべての経済活動を、デジタル化する ("digitize all economic activity") — sets the tone for a design language that is at once corporate-trustworthy and quietly futuristic. The…

All Design.md filesBrowse by font