---
title: "ClickUp — Qatalog Acquisition design system"
variant: extended
source: https://clickup.com/qatalog-acquisition
captured_at: 2026-10-12
theme: light
industry: productivity
generator: Design DNA (https://four.wiralomi.com/style/qatalog-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# ClickUp — Qatalog Acquisition · Design System

> Bright editorial space, anchored by confident product visuals

**Theme:** light · **Industry:** productivity · **Source:** https://clickup.com/qatalog-acquisition · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A spacious ClickUp announcement page pairs a clear acquisition message with product imagery and a concise feature overview. Black calls to action and restrained purple accents give the otherwise white canvas a focused, recognizable identity.

## North star

Keep the page calm and spacious, using strong dark typography and vivid product imagery as deliberate focal points.

## Overview

The page uses a white canvas throughout, with dark text and a restrained violet accent to keep the acquisition story readable and distinctly ClickUp. The hero is a balanced text-and-product-image split: a small uppercase mono eyebrow introduces a large, tightly tracked headline, followed by muted explanatory copy and a compact black CTA. A grayscale customer logo row adds credibility without competing with the message. Lower sections alternate centered editorial introduction, a two-column feature explanation, and vivid product imagery; a black-to-magenta promotional panel provides the strongest tonal contrast. Plus Jakarta Sans gives display headings a rounded, assertive character, while Inter handles navigation and body copy with practical clarity. Generous vertical gaps separate content groups, while fine pale hairlines and rounded media edges keep cards controlled. The footer returns to a dense, multi-column link structure.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas and the clean background behind navigation, hero, and content sections. |
| Soft Graphite | `#646464` | `--color-soft-graphite` | neutral | Measured secondary text and link color across navigation, body details, and footer links. |
| True Black | `#000000` | `--color-true-black` | brand | High-contrast CTA and dark promotional panel surface; also frames product UI imagery. |
| Carbon Ink | `#202020` | `--color-carbon-ink` | neutral | Primary dark text and the filled signup and primary CTA buttons. |
| Gradient Ash | `#8f8f8f` | `--color-gradient-ash` | semantic | Gradient endpoint in the heading treatment; not a defining page surface color. |
| Electric Blue | `#0091ff` | `--color-electric-blue` | accent | Small gradient and navigation/badge traces; mostly incidental accent detail rather than a page-wide color. |
| Orchid Violet | `#a43cb4` | `--color-orchid-violet` | accent | Gradient and badge detail, primarily within interface or decorative treatments. |
| Footer Slate | `#808080` | `--color-footer-slate` | neutral | Measured gray in footer and media areas; subordinate to the white-and-ink palette. |
| Quiet Hairline | `#e8e8e8` | `--color-quiet-hairline` | semantic | Subtle borders and dividers separating content without adding visual weight. |
| Neon Magenta | `#f100e3` | `--color-neon-magenta` | accent | A vivid gradient trace found in decorative and navigation detail, not a dominant page color. |
| ClickUp Violet | `#6647f0` | `--color-clickup-violet` | brand | Measured accent text; use sparingly for the small hero eyebrow or focused brand detail. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (True Black) · `--color-surface-2` → `#808080` (Footer Slate) · `--color-text` → `#646464` (Soft Graphite) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#202020` (Carbon Ink) · `--color-border` → `#e8e8e8` (Quiet Hairline) · `--color-accent` → `#6647f0` (ClickUp Violet)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#646464` | `#ffffff` | 5.92:1 | AA |
| `#646464` | `#000000` | 3.55:1 | AA-large |
| `#646464` | `#808080` | 1.5:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#808080` | 3.95:1 | AA-large |
| `#202020` | `#ffffff` | 16.29:1 | AAA |
| `#202020` | `#000000` | 1.29:1 | fail |
| `#202020` | `#808080` | 4.13:1 | AA-large |
| `#6647f0` | `#ffffff` | 5.64:1 | AA |
| `#6647f0` | `#000000` | 3.72:1 | AA-large |

### Gradients

- `linear-gradient(98deg, rgb(32, 32, 32) 43.06%, rgb(143, 143, 143) 91.81%)`
- `linear-gradient(250deg, rgba(0, 0, 0, 0) calc(50% - 36.1484px), rgb(0, 145, 255), rgb(164, 60, 180), rgb(241, 0, 227), rgb(0, 145, 255), rgb(164, 60, 180), rgba(0, 0, 0, 0) calc(50% + 36.1484px))`
- `linear-gradient(250deg, rgba(0, 0, 0, 0) calc(50% - 22.5928px), rgb(0, 145, 255), rgb(164, 60, 180), rgb(241, 0, 227), rgb(0, 145, 255), rgb(164, 60, 180), rgba(0, 0, 0, 0) calc(50% + 22.5928px))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 600, 650 | Body copy, navigation, links, buttons, and compact labels. | Inter |
| Plus Jakarta Sans | `--font-display` | webfont | 650, 700 | Display, page headings, and selected navigation or card text. | DM Sans |
| Sometype Mono | `--font-mono` | webfont | 500 | Small uppercase hero eyebrow and code-like metadata. | Space Mono |

- **Inter:** Use practical sans-serif forms; mostly regular body weight with medium to semibold controls, restrained tracking, and sentence case.
- **Plus Jakarta Sans:** Bold, rounded display shapes with tight negative tracking; use sentence case and strong hierarchy.
- **Sometype Mono:** Compact mono label treatment; uppercase for the hero kicker, with modest weight and no decorative flourish.

### Type scale — Perfect Fourth (ratio ≈ 1.351, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 700 | 1.1 | -0.035em | — | Plus Jakarta Sans | Large display treatment for major campaign or promotional headings. |
| h1 | 48px | 700 | 1.15 | -0.035em | — | Plus Jakarta Sans | Hero acquisition headline. |
| h2 | 40px | 650 | 1.2 | -0.04em | — | Plus Jakarta Sans | Primary section headings, including the centered next-steps introduction. |
| h3 | 34px | 650 | 1.2 | -0.047em | — | Plus Jakarta Sans | Feature and supporting subsection headings. |
| body | 18px | 400 | 1.33 | -0.014em | — | Inter | Hero summary and explanatory section copy. |
| caption | 14px | 500 | 1 | 0 | — | Inter | Compact supporting labels and small metadata. |
| button | 14px | 600 | 1.5 | 0 | — | Inter | Primary and navigation CTA labels. |
| nav | 14px | 500 | 1.43 | -0.011em | — | Inter | Header navigation links. |
| link | 14px | 500 | 1 | 0 | — | Inter | Inline links and footer link labels. |
| code | 16px | 500 | 1.25 | 0 | uppercase | Sometype Mono | Uppercase mono hero eyebrow and short kicker labels. |

OpenType features in use: `"calt" 0`, `"calt" 0, "clig" 0, "liga" 0`.

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 4, 5, 8, 9, 10, 12, 18, 20, 30, 40, 48, 50 px.
- Section rhythm 140px · element gap 4px · card padding — · max content width —.

Use a centered, restrained content column with broad white margins rather than edge-to-edge text. The header runs horizontally across the top; the hero aligns copy left and product media right, then a horizontal customer logo row bridges into the centered next-steps section. Below, use a two-column feature split and a prominent campaign panel, followed by a multi-column footer. Preserve a spacious section rhythm and low content density, with tight groupings inside each section and clear vertical separation between them.

## Shape & elevation

- Radius: button `8px` · card `18px` · media `18px` · nav `8px` · link `9px` · xs `8px` · sm `9px` · md `12px` · lg `18px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

Keep the page predominantly flat: the white canvas and typography carry the hierarchy, not drop shadows. Separate content with generous whitespace and occasional pale hairlines. Use rounded media and button corners as measured, but reserve dark surfaces and gradient imagery for intentional focal panels rather than layering many cards.

## Imagery

Use crisp product-interface imagery as the hero counterweight to the headline, framed in a wide media area with softly rounded corners. Supporting feature visuals can use luminous purple and blue AI motifs, while the promotional panel uses a dark field and saturated gradient alongside interface artwork. Customer marks are small, muted, and treated as a quiet proof row; imagery is illustrative and product-led rather than lifestyle photography.

## Components

### Header navigation

Compact horizontal brand and link row with Inter navigation text, light login treatment, and a dark filled Sign Up button.

### Acquisition hero

Left-aligned mono eyebrow, bold two-line heading, muted body copy, and black Get started button beside product-search imagery.

### Customer logo row

A restrained trust strip of grayscale customer marks beneath the hero, aligned across the content width.

### Feature split

Editorial heading and short feature descriptions sit beside a wide, rounded AI product visual.

### Promotional CTA panel

Black rounded panel with ClickUp mark, white heading and copy, light CTA, and gradient-backed product artwork.

### Footer directory

Dense multi-column link groups and small legal/social details on the same light canvas.

### Measured component styles

- **Primary button** (“Login”): background #f0f0f0 · text #000000 · radius 8px · padding 8px 12px · 600 14px Inter
- **Secondary button** (“Sign Up”): background #202020 · text #ffffff · radius 8px · padding 8px 12px · 600 14px Inter
- **Link** (“iOS & Android”): transparent background · text #646464 · radius 9px · padding 9px · 500 14px Inter
- **Card** (“Experience the future of productivity, a”): background #000000 · text #292d34 · radius 18px · padding 0px · 400 16px Plus Jakarta Sans
- **Badge** (“Brain”): background #646464 · text #646464 · radius 0px · padding 0px · 500 14px Inter
- **Navigation item** (“Brain AI Product Solutions Learn Pricing”): transparent background · text #292d34 · radius 0px · padding 0px · 400 16px Plus Jakarta Sans

## Do

- Use white as the dominant canvas.
- Set major headings in Plus Jakarta Sans with tight tracking.
- Keep body copy and controls clear in Inter.
- Place product imagery beside or below the message it supports.
- Use dark buttons for the main action.
- Reserve violet and multicolor gradients for small accents and media.
- Separate sections with generous whitespace.

## Don't

- Do not fill the page with large colored section backgrounds.
- Do not use gradients as the default canvas treatment.
- Do not crowd the hero with extra decorative elements.
- Do not make secondary copy compete with the heading.
- Do not add heavy shadows to cards or media.
- Do not turn the customer logo row into a high-contrast feature.
- Do not use saturated accent colors as body text.

## Agent prompt

Build a new SaaS announcement page in ClickUp’s spacious editorial style. Use Gallery White (#ffffff) as the canvas, Carbon Ink (#202020) and True Black (#000000) for headings and primary actions, and Soft Graphite (#646464) for supporting text and links. Add ClickUp Violet (#6647f0) only as a restrained label accent; keep Electric Blue (#0091ff), Orchid Violet (#a43cb4), and Neon Magenta (#f100e3) mostly within product artwork or gradients. Set display headings in Plus Jakarta Sans with tight tracking and body, navigation, and buttons in Inter. Lead with a left-copy/right-product-visual hero, then a quiet customer-mark row and centered introduction. Use a feature split, a dark promotional panel, and a compact multi-column footer. Keep surfaces mostly flat, media rounded, and section spacing generous.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Single-column page section with left-aligned hero copy, product media alongside, and a customer logo strip below. | Clear acquisition announcement, Primary getting-started action, Customer credibility row | Mono uppercase eyebrow, Bold display headline, Dark CTA button, Product interface visual |
| 2 | feature-split | Centered section introduction followed by a two-column feature description and product image. | Explain upcoming product direction, Group related capabilities, Support copy with product visuals | Centered section heading, Two-column feature split, Rounded vivid product media |
| 3 | footer | Multi-column directory of product and company links, followed by compact social, legal, and utility details. | Browse related product areas, Access company and support links, Find legal and social destinations | ClickUp brand mark, Dense link columns, Small muted footer details |

## Source CSS custom properties (selected)

```css
--color-button-other-background: 0,0,0,0.15;
--color-shadow: 16,30,54,0.1;
--color-shadow-1: 16,30,54,0.06;
--color-pink-shadow-1: 253,113,175,0.1;
--color-pink-shadow-2: 253,113,175,0.2;
--color-blue-shadow-1: 73,204,249,0.1;
--color-blue-shadow-2: 73,204,249,0.2;
--color-green-shadow-1: 0,184,132,0.1;
--color-green-shadow-2: 0,184,132,0.2;
--color-purple-shadow-1: 123,104,238,0.1;
--color-purple-shadow-2: 123,104,238,0.2;
--color-purple-shadow-4: 123,104,238,0.4;
--color-purple-shadow-5: 123,104,238,0.5;
--color-violet-shadow-1: 155,81,224,0.1;
--color-violet-shadow-2: 155,81,224,0.2;
--color-yellow-shadow-1: 255,200,0,0.1;
--color-yellow-shadow-2: 255,200,0,0.1;
--color-gradient-cyan-accent-light-1: 255,255,255,0.1;
--color-gradient-cyan-accent-lightest-1: linear-gradient(45deg,#45C4F9 -0.01%,#7D09FF 50.33%,#FF0BE5),linear-gradient(180deg,#FFF8FB,rgba(255,248,251,0.00));
--spacing-nav-height: 60px;
--spacing-stack-spacing-desktop: 150px;
--spacing-stack-spacing-mobile: 60px;
--Core-Text-Main: #202020;
--Core-Text-Secondary: #646464;
--Core-Text-Tertiary: #838383;
--Core-Text-Disabled: #bbb;
--Core-Background-Main: #fff;
--Core-Background-Box: #f8f9fa;
--Core-Background-Card: #f8f9fa;
--Core-Button-Primary: #202020;
--Core-Button-Secondary: #f0f0f0;
--Core-Button-Secondary-Hover: #dedede;
--Core-Border-Default: #e8e8e8;
--Core-Accents-Purple: #6647f0;
--Core-Accents-Purple-Badge: #efedfd;
--Core-Accents-Blue: #0091ff;
--Core-Accents-Blue-Badge: #edf6fd;
--Core-Accents-Pink: #ff02f0;
--Core-Accents-Pink-Badge: #feecfc;
--Core-Accents-Orange: #fc6d2d;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/qatalog-com